Google Maps v3 - Simple Map Integration
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.
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:
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?