Simple explanation of how to add a map to a website using Google Maps API v3
Forked from Enrique Moreno Tent's Pen Google Maps API v3 - Basic Map.
A Pen by Kharis Sulistiyono on CodePen.
Simple explanation of how to add a map to a website using Google Maps API v3
Forked from Enrique Moreno Tent's Pen Google Maps API v3 - Basic Map.
A Pen by Kharis Sulistiyono on CodePen.
<div id="wrapper"> | |
<div id="map-canvas"></div> | |
<div class="nav"> | |
<button id="btn">Hit Me to Reinitialize</button> | |
</div> | |
</div> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script> |
;(function ( $, window, document, undefined ) { | |
var map; | |
// if HTML DOM Element that contains the map is found... | |
if (document.getElementById('map-canvas')){ | |
// Coordinates to center the map | |
var myLatlng = new google.maps.LatLng(52.525595,13.393085); | |
var myLatlng2 = new google.maps.LatLng(0,0); | |
// Map 1 | |
var mapOptions = { | |
zoom: 14, | |
center: myLatlng, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}; | |
// Map 2 | |
var mapOptions2 = { | |
zoom: 1, | |
center: myLatlng2, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}; | |
// Wrap map init in a function | |
function loadMap(options){ | |
map = new google.maps.Map(document.getElementById("map-canvas"), options); | |
} | |
// Init map | |
loadMap(mapOptions); | |
} | |
var $btn = $('#btn'); | |
$btn.on('click', function(e){ | |
// Custom event | |
$btn.trigger( 'get_location' ); | |
return false; | |
}) | |
.on('get_location', function(e){ | |
// Init map | |
loadMap(mapOptions2); | |
}); | |
})( jQuery, window, document ); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
#wrapper{ | |
width: 500px; | |
max-width: 100%; | |
} | |
#map-canvas{ | |
height: 500px; | |
width: 100%; | |
border:1px solid #000; | |
} | |
#btn{ | |
display: block; | |
width: 100%; | |
height: 50px; | |
margin-top: 7px; | |
} |