- Copy the shortcode from the below.
- Add HTML module to a page. Switch to HTML Tab & Paste.
- 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