Support Center

Google Map

Google Map

  1. Copy the shortcode from the below.
  2. Add HTML module to a page. Switch to HTML Tab & Paste.
  3. Remember to uncheck RemoveScripts in Text/HTML Editor.

You do need a Google Map API Key

Obtain one here: https://developers.google.com/maps/documentation/javascript/get-api-key

Copy Google Map API key in the Style Switcher

See: http://www.mandeeps.com/support/documentation/pageid/1489/tahoe-using-style-switcher-settings

To show a map of an address

<div class="google-map hidden-phone" id="googlemaps"></div>
<script>
    $(document).ready(function () {
        $('#googlemaps').gMap({
            address: "Quito, Ecuador",
            zoom: 5
        });
    });
</script>

To show a map of an address with a marker

<div class="google-map hidden-phone" id="googlemaps"></div>
<script>
    $(document).ready(function () {
        $('#googlemaps').gMap({
            address: "Quito, Ecuador",
            zoom: 5,
            markers: [
            {
                address: "Guayaquil, Ecuador",
                html: "My Hometown"
            }]
        });
    });
</script>

To show a map of an address with multiple markers

<div class="google-map hidden-phone" id="googlemaps"></div>
<script>
    $(document).ready(function () {
        $('#googlemaps').gMap({
            address: "Quito, Ecuador",
            zoom: 5,
            markers: [
            {
                address: "Guayaquil, Ecuador",
                html: "My Hometown"
            },
            {
                address: "Galapagos, Ecuador",
                html: "My Office"
            }]
        });
    });
</script>

For advance users, refer to the Google Maps Documentation

Glad we could be helpful. Thanks for the feedback.

Sorry we couldn't be helpful. Your feedback will help us improve this article.

How helpful was this page?

  
Updated on Mon, 10 Aug 2020 by Ashish Pachori