Google Maps
This section will guide you through how to setup a basic google map and add overlay colors to it,For more advance options please refer the google map developer API for Web Google Map Developer API
Setting up a map
Step one
Add the following google map api js, this is without private key.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>Step Two
Create an Empty div with an ID
<div id="myMap"></div>Step Three
Initialize Google Map.
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
var map;
var zoomLevel = 11;
function init() {
// 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: zoomLevel,
disableDefaultUI: true,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the
var mapElement = document.getElementById('myMap');
// Create the Google Map using out element and options defined above
map = new google.maps.Map(mapElement, mapOptions);
}Map themes
Google Maps comes with styling option that you can change, add the following styles attribute to mapOptions in the JS you created before
Last updated