Google Map
Thedir Google Maps allows you to use the potential of Google Maps in a simple way.
Important!
The Google Map degradation issue is related with the latest changes that were introduced on June 11th, 2018. For more information, see https://developers.google.com/maps/billing/important-updates . Hence, you are required to use your own API.
How to use? #
Copy-paste the following <script>
near the end of your pages to enable it. Include your API key in the place of
YOURAPIKEY.
<script src="//maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap" async defer></script>Copy-paste the init function under JS Plugins Init., before the
closing </body> tag, to enable it.
<script>
// initialization of google map
function initMap() {
var latlng = new google.maps.LatLng(40.762529, -73.957334);
var mapProp = {
center: latlng,
zoom: 12,
mapTypeId: 'roadmap',
disableDefaultUI: true,
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
</script>Basic example #
<script>
var map;
function initMap() {
var latlng = new google.maps.LatLng(40.762529, -73.957334);
var mapProp = {
center: latlng,
zoom: 12,
mapTypeId: 'roadmap',
disableDefaultUI: true,
styles: [
{
"featureType": "administrative.country",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "administrative.province",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "administrative.province",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#c3b6a2"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "labels.text",
"stylers": [
{
"color": "#c3b6a2"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#c3b6a2"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape.natural.terrain",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.icon",
"stylers": [
{
"color": "#808080"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#808080"
}
]
},
{
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f0f0f0"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c0c0c0"
},
{
"saturation": -75
},
{
"lightness": -80
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ededed"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ededed"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text",
"stylers": [
{
"color": "#ededed"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#91bbd5"
}
]
},
{
"featureType": "road.highway.controlled_access",
"stylers": [
{
"color": "#ededed"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ededed"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f0f0f0"
}
]
},
{
"featureType": "transit.station.airport",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#c3b6a2"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#c7d7d4"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#91bbd5"
}
]
}
]
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
</script>