Google Maps v3 - Simple Map Integration

With so much flexibility, Google Maps can be a little confusing to implement. Here is how to put a simple map on your website.

Posted on 27 Jul 2011 in Website Development / 7,430 Views

Having been developing websites for some years now, I have seen my fair share of Google Map implementation. I have also seen how their integration steps have got easier and more flexible.

That said, with so much flexibility, it can be a little daunting trying to work out exactly how you get a map to appear on your website.

This article will be followed by another explaining how to add multiple markers to your map, and also how to add numbered markers to your map.

So adding a map and putting a marker in the middle consists of 2 parts and requires you to know the latitude and longitude of where you want the map centred. You can either Google for the latitude and longitude of a place, or you can make use of Google's geocoding - which is much more fun.

As an example, lets look for the latitude and longitude of a hugely popular place, Waroona... located in Western Australia and is where all the good website developers are... Open your favourite browser - unless that happens to be Internet Explorer, in which case you need some serious therapy - and type in:

https://maps.google.com/maps/geo?output=csv&sensor=false&q=Waroona, Western Australia

To find your location, you obviously replace Waroona, Western Australia with your desired location.

This should show you something like the following:

200, 4, -32.8461715, 115.9226980

This is a Comma Separated list, and only the last 2 items (-32.8461715 being the Latitude and 115.9226980 being the Longitude) are important. Make a note of these as we will be using these in a minute.

On the page where you want your map to appear, you can either include this in the <head></head> section of your website which is recommended, or alternatively you can put it just before where you want the map.

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	function initialize() 
	{
		//set latitude and longitude of starting centre point
		var myLat = -32.8461715;
		var myLon = 115.9226980;

		var latlng = new google.maps.LatLng(myLat, myLon);
		
		//set options for initial view
		var myOptions = {
			zoom: 14,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		//put the map into your specified div. in this case "map_canvas".
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		//set a marker at the centre point
		var marker = new google.maps.Marker({
			position: latlng,
			title:"Display Me When Hovering Over Marker"
		});

		// To add the marker to the map, call setMap();
		marker.setMap(map);
	}
</script>

Replace the latitude and longitude values with the ones you worked out earlier.

Finally, all that is left to do is to set where the map will display, and call for the map. This is done with the following 2 lines of code:

<div id="map_canvas" style="width:100%; height:300px; border:1px solid #ccc;"></div>
<script type="text/javascript">initialize();</script>

Hopefully the comments in this code are sufficient to work out just what is going on, but basically you are giving a function called initialize some settings and telling it to apply the map to a div with an id of map_canvas. You are then creating that div, and calling the initialize function to bind the map to it.

And there you have your first Google Map integration! Simple hey?