Google Map
Introduction
Google Maps is a web mapping service developed by Google. It offers satellite imagery, street maps, 360° panoramic views of streets, real-time traffic conditions, and route planning for traveling by foot, car, bicycle, or public transportation.
How to Setup
HTML Structure
<div id="map_canvas" class="gmap"></div>Dependency
JS
<!-- Gmap JavaScript -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>Initialize Vector Map JS
/* Map initialization js*/
if( $('#map_canvas').length > 0 ){
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
var donca = {
info: '<strong>Welcome to donca</strong>',
lat: -37.7830,
long: 145.1660
};
var melbo = {
info: '<strong>Welcome to melbo</strong>',
lat: -37.8136,
long: 144.9631
};
var locations = [
[donca.info, donca.lat, donca.long, 0],
[melbo.info, melbo.lat, melbo.long, 1],
];
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(-37.8136, 144.9631), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"visibility": "simplified"
},
{
"saturation": "-65"
},
{
"lightness": "45"
},
{
"gamma": "1.78"
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"saturation": "-33"
},
{
"lightness": "22"
},
{
"gamma": "2.08"
}
]
},
{
"featureType": "transit.station.airport",
"elementType": "geometry",
"stylers": [
{
"gamma": "2.08"
},
{
"hue": "#ffa200"
}
]
},
{
"featureType": "transit.station.airport",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station.rail",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station.rail",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "simplified"
},
{
"saturation": "-55"
},
{
"lightness": "-2"
},
{
"gamma": "1.88"
},
{
"hue": "#ffab00"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#bbd9e5"
},
{
"visibility": "simplified"
}
]
}
]};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map_canvas');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var contentString = '<div class="infowindow-wrap">'+
'<h5 class="infowindow-header">Envato Pvt Ltd</h5>'+
'<div class="infowindow-body"><p class="txt-dark mb-15">121 King Street, <br>Melbourne VIC 3000, Australia</p><a href="https://envato.com/" target="_blank">www.envato.com</a></div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker, i;
// Let's also add a marker while we're at it
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
if(i === 2) {
return false;
}
else
return function () {
infowindow.open(map, marker);
}
})(marker, i));
new google.maps.event.trigger( marker, 'click' );
}
}
}To get the API for google map you have to follow the steps here.
Last updated
