1. Home
  2. Help Center
  3. Page Building
  4. Custom Elements
  5. Setting Up Google Maps

First you need a Google Maps API key. Visit this link to get your API https://developers.google.com/maps/documentation/javascript/get-api-key

In the Customizer go to General → Keys & APIs and paste your Google API key

Even though the API is free to use your Google Account must have a valid payment method.

Adding Map to Content

To do it really easy insert a new template. Choose maps and select either one of the full pages or a map section.

Then start editing or add an empty Google Maps element

Map Container Settings

Edit the element you just added and choose your preferred options

Map Marker Settings

Now click in the + icon on the map container element to add a Map Marker.

Now add your content.

Only Marker Image is optional, the other fields Latitude, Longitude, Marker Title and Marker Description are required

How to get Latitude and Longitude?

Open Google Maps, search a location and click on any point. A box will appear at the bottom with the required coordinates.

Latitude is the first value, and Longitude is the second value. Add those to the markar element and save.

Custom Maps Styling

The map component has some predefined styles. But if you want to use a custom map style browse some designs or create your own in SnazzyMaps

Then, paste your code in the Google Map container settings

Show Locations List

Enable the option on the Google Map container and save your preferences.

Was this article helpful?

Related Articles