Google Maps
Google Maps
Welcome to the “Google Maps” documentation.
Looking to integrate a google maps into your website? Our block allows you to create stunning, interactive maps that enhance the user experience and provide valuable location information.
In this guide, we'll show you how to use the editor to customize your google maps block.
Step 1: Open the Editor
1. Go to Google Maps template.
2. Click on "Edit" after choosing your template.
class="" alt="">Step 2: Enter Google Map API key
In this panel, you can easily enter the google maps API Key.
class="flex justify-center items-start h-auto w-auto" alt="">Step 3: Add Location
1. Here, you can add locations by typing them into the search input, and you can also remove them.
class="flex justify-center items-start h-auto w-96" alt="">2. Customize each location by choosing whether it should be the map center or not.
In the marker section, select the type of display, which can be default or as a pin. If you choose a pin, you can specify its content as a number, text, or an image, and then set its size and color.
class="flex justify-center items-start h-auto w-80 h-auto " alt="">For the info window section, decide whether to show or hide each window's content.
class="flex justify-center items-start h-auto w-128 h-auto " alt="">Step 4: Configure settings
Here, you'll handle the settings:
1. Begin with the map settings, where you can specify its height and default zoom. Additionally, you can select the default view as either a map or satellite.
class="flex justify-center items-start h-auto w-96 h-auto " alt="">2. In this section, you can choose the action that occurs when you click on a location: redirect to a link, open an info window, or do nothing.
You can also decide whether the info window should open by default and allow links to open in new tabs.
class="flex justify-center items-start h-auto w-80 h-auto h-auto " alt="">3. Customize the side panel by showing or hiding each of its contents, including the title, image, rating, address, and search option.
class="flex justify-center items-start h-auto w-auto" alt="">Step 5: Choose Colors
1. Within this panel, you can pick colors for borders and text.
class="flex justify-center items-start h-auto w-96 h-auto " alt="">Step 6: Preview
Lastly, you can click on “Preview” to see how your google maps block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto" alt="">