Add Google Map on Tucson theme.
Add Google Map API Key
Refer to the following documentation to get Google Map API key.
https://developers.google.com/maps/documentation/javascript/get-api-key
Update GoogleMapAPI tag in theme XML (\Portals\_default\Skins\Tucson\).
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