Google maps

The Google maps JavaScript API lets you customize maps with your own content and imagery for display on web pages and mobile devices. Read the Official Documentation for a full list of instructions and other options.

Classic Map

Check the classic map example.

<div id="map_canvas" class="gmap h-450p"></div>
<!-- Gmap JS -->
<script type="text/javascript" src=""></script>
<script src="dist/js/gmap-init.js"></script>
/* 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.long, 0],
			  [,, melbo.long, 1],
			// Basic options for a simple Google Map
			// For more options see:
			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.

			// 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="" target="_blank"></a></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; 
						return function () {, marker);
				})(marker, i));
				new google.maps.event.trigger( marker, 'click' );