Google Map Section

Inserting a Map

Our themes offer a simple full width map section that allows for multiple map markers. The map can be displayed in color or in greyscale.

Related Video Tutorials
Setup of a google map

Teaches you how to embed a Google Map and launch a map using lightbox

Step 1: Switch To Backend Editor

To insert a map section, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Google Map

Click "Google Map" in the Visual Composer Modal to insert a map section, for example:

Google Map Section Settings
Step 3: Edit Google Map Section Settings

Once the map section element has been inserted click the Edit Link(pen icon) of the map section, for example:

Google Map Section Settings

Here is an overview of available map section options:

  • Use Embed or Button

    Determines whether the map should be embedded in the page or be launched in a lightbox using a button:

    • No dependent options.

    • Button Label

      Enter button label.

  • Map Style Type

    Determines whether the map should be shown in color or in greyscale.

  • Coordinates 1

    Enter the map coordinates of the first map marker here. Lat/long should be comma separated i.e. 40.723301,-74.002988.

  • Information 1

    Enter the map tooltip information of the first map marker here.

  • Map Marker 1

    Upload the first map marker.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Color Options

    Background Color
    Background Color Logo
    Background Hover Color Logo
    Border Color Logo (Hover)
    Logo Background Color (Hover)
    Grid Border Color

Troubleshooting

  • My map's not showing up and I get a JavaScript Error

    If you see something like this for your map, follow the steps below:

    Google Map Troubleshooting
    Generating Your Map API Key
    1. Go to the Google API Console.
    2. Create or select a project.
    3. Click Continue to enable the API and any related services.
    4. On the Credentials page, get an API key.
    5. Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key.
    6. From the dialog displaying the API key, select Restrict key to set a browser restriction on the API key.

    7. In the Key restriction section, select HTTP referrers (web sites), then follow the on-screen instructions to set referrers.

      Note: if key restriction is set to HTTP referrers (web sites), make sure to enter your website URL as follows:

      *.yourdomain.com/*

    8. Once you have the API key, go ThemeMountain Options Panel > Map Settings and set "Use Google Map API Key" and paste the API you copied from Google API Console:

      Google Map API Key Setting

Can't find what you're looking for? Submit a request in our forum.