For a while now, you have been able to put a Google Map on your web site, to perhaps show where you are located, for example. There are a couple of ways to achieve this – either via a static link, or via an API that allows for an interactive version.
I’ve only recently started fiddling with Google Maps and its API to put on one of my web sites, and while Google gives you an example, I found that I ended up trawling through a fair amount of documentation and third party tutorials to try and get information on how to add some of the more basic features and modifications.
So this is hopefully an easy to understand guide, with some of the basic options, which will allow you to customise the look of the map to suit your needs.
The first thing you will need to do is to sign up for an API key. When you do this, you will have to provide the URL of the site on which the map(s) will be located (this sadly does mean that you will only be able to use it on some sort of server/web space, and not directly off your hard drive) – make sure you only enter the URL and not add a directory, or you will be limited to using maps to that directory. When you sign up, you will be given the key to use and an example web page with the code for a basic map. You can sign up for the key at http://code.google.com/apis/maps/signup.html
The Javascript:
You will need to add some javascript into the head section of your XHTML document (between and , preferably below the title and meta tags) – the first of which gets the file with all the map functions. This line of code has your map API key, which you must have and use, or you will just get an error message pop up. In the line below, I have used abcd1234 as an example, replace this with the key that you were given when you signed up.
[code lang=”javascript”][/code]
At this stage, you can localise your map to use a different language using the hl option by adding &hl=xx where xx is the standard two letter code for your chosen language – for example, you would use de for German.
[code lang=”javascript”][/code]
One of the problems I encountered when I started, is that the API requires you to provide locations in decimal latitude and longitude, and I wanted to use UK postal codes to mark locations. After some digging, I found that Google now has a geocoder (a tool that returns lat/long from various other location types, such as addresses, etc.) tool that you can access directly using the API. I have included this in the example code below. Please be aware that Google limits access to the geocoder via the API to 50,000 requests per API key per day, however, by default, requests are cached and 50,000 requests is much higher than most sites will use. If you use more than this, the geocoder will refuse requests, and you’ll have to contact Google.
And now, for the main code that defines your map. You can copy & paste the javascript code below – I shall explain what each bit does below it:
[code lang=”javascript”]
[/code]
First off, we have the main function load() that contains all the code for our map – this is called by onload() when the page is loaded.
[code lang=”javascript”]function load() {}[/code]
The Google function GBrowserIsCompatible() checks to see if the visitor’s browser can load and view the map.
[code lang=”javascript”]GBrowserIsCompatible()[/code]
We need to initialise a new instance of the map:
[code lang=”javascript”]var map = new GMap2(document.getElementById(“map”));[/code]
And also of the geocoder tool:
[code lang=”javascript”]var geocoder = new GClientGeocoder();[/code]
We also need some sort of address or location – in this example I have hard coded in a UK post code (this is for the Buckingham Palace area of London). Exactly how you pass the address info to the variable address script depends upon your needs.
[code lang=”javascript”]var address = “‘SW1A 1AA'”;[/code]
The main code is in the geocoder.getLatLng() function, address is the variable with the location, the latitude & longitude is returned to the rest of the script.
[code lang=”javascript”]geocoder.getLatLng( address, *javascript code here* );[/code]
The following javascript (perhaps obviously for some) pops up on error message if the address could not be found:
[code lang=”javascript”]
function(point) {
if(!point) {
alert(address + “not found”);
}
[/code]
If a location is found (the location is held in the point variable), the javascript in the else {} section for the map is executed.
The following line of code sets the centre point of the map, and the zoom level, which in this case is set to 13 – you can obviously change this to suit your needs.
[code lang=”javascript”]map.setCenter(point, 13);[/code]
The next two lines starts a new instance of the marker pin, and adds it to the map based on the location held in the point variable.
[code lang=”javascript”]
var marker = new GMarker(point);
map.addOverlay(marker);
[/code]
If you want to have an information bubble pop up on the map, you can uncomment (remove the two forward slashes // ) the following line. It will display whatever is in the address variable, but you can replace this with whatever you want.
[code lang=”javascript”]//marker.openInfoWindowHtml(address);[/code]
Next control adds the zoom and panning controls. Options here are GSmallZoomControl() which creates just plus and minus zoom buttons, GSmallMapControl() which creates the buttons and panning controls, and GLargeMapControl() whcih create the panning controls and a zoom slider.
[code lang=”javascript”]map.addControl(new GSmallMapControl());[/code]
The following adds the map/satellite/hybrid buttons:
[code lang=”javascript”]map.addControl(new GMapTypeControl());[/code]
The HTML:
That’s more or less it for the javascript in our example code – we just now have to add the HTML side of things to get it working.
We need to get the map javascript to load when the page is loaded in the visitor’s browser, so we add the onload event in the body tag. We will also use the GUnload function to free off memory:
[code lang=”javascript”]
There is the odd occasion when you can’t put the onload and onunload into the body tag – I ran into this when writing a module for a CMS and just wanted to use them on one page. To get around this, I loaded them by using the following in your page’s main body:
[code lang=”javascript”]
[/code]
And finally, add the following HTML where you want the map to appear. You can use the width and height here to change the size of your map:
[code lang=”html”]
[/code]
Example:
I’ve put up an example using the above code here.
Resources:
Sign up for a Google API key
Google’s documentation – API reference.
Google’s documentation – developer guide.
The Google Mapki, a wiki for the API.
If you have found this article useful, please leave a comment and let me know!