Google Maps

Google Maps

Welcome to the “Google Maps” documentation. Looking to integrate a google maps into your website? Our widget 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 widget.

Step 1 : Open The Editor
Step2 : Enter Google Map API Key
Step 3 : Add Location
Step 4 : Configure Settings
         Step 5 : Choose Colors
         Step 6 : Preview 

   



Step 1: Open the Editor
1. Go to Google Maps template.
2. Click on "Edit" after choosing your template.




Step 2: Enter Google Map API key
In this panel, you can easily enter the google maps API Key.






Step 3: Add Location

1. Here, you can add locations by typing them into the search input, and you can also remove them.





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.





For the info window section, decide whether to show or hide each window's content.



        


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.





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.





3. Customize the side panel by showing or hiding each of its contents, including the title, image, rating, address, and search option.






Step 5: Choose Colors

1. Within this panel, you can pick colors for borders and text.






Step 6: Preview

Lastly, you can click on “Preview” to see how your google maps widget looks on both desktop and mobile devices. After this, you can proceed to the next step.



Related Articles:
Weather Clock Display