How to: Google Maps

(by AXDS)

Example: http://jsfiddle.net/nLxqqx33/

Google Maps API works in a similar way to the Google Charts API.

The script is added:

<script src="http://maps.googleapis.com/maps/api/js"></script>

Create where the map is going to go:

<div id="googleMapLocation" style="height:500px;width:500px;"></div>

Remember to set the height and width of the div element. The Google map renders using percentage rather than pixels to work out sizing. Missing out the height and width from the div will show nothing, and look as though it hasn’t worked, but will actually produce a 0px * 0px map.

Similar to the Google Charts API the function that creates the map takes in the div location and map options as arguments.

var map = new google.maps.Map(mapDivLocation,mapSettings);

The list of all the map settings can be found online. The most common settings are the where the map should be centred and how much the map should be zoomed in at this place.

var mapSettings = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7
};

The functions that initialise the map needs to run after the page has loaded. All together it should look something like this:

HTML:

<div id="googleMapLocation" style="height:500px;width:500px;"></div>

SCRIPT:

window.onload = function(){
initMap();
};

function initMap(){
var mapLocation = document.getElementById("googleMapLocation");
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7
};
var map = new google.maps.Map(mapLocation,mapProp);
}

This will produce a working Google Map.


Markers can be added to the map by calling the setMap function from the API (This would be inside the inside the initMap function after the map has been initialised:

 var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.508742,-0.120850),
title:"Hello World!";
});

marker.setMap(map);
Advertisements