Google Maps – a step by step guide to a simple map

Tim Malone — Fri, 06 Jul 2007 23:44:57 +0000

Let’s say you have a need to put a map on a website directing visitors to your location. Or you’re writing about a particular country or city and would like to show visitors where in the world it is.

Previously here in Australia, a lot of people used WhereIs maps for directions. And of course for country or city maps there’s tons all over the Internet. Trouble is, none of this is actually free for you to use on your site (WhereIs charge $100 per 12 months – and the service is called MapLink so I’m wondering whether it’s just a link to their site, and pretty much any image you find on the Internet is copyrighted anyway).

Solution? Google Maps. Completely free and amazingly customisable. Because it’s amazingly customisable it’s also incredibly complicated and if you aren’t familiar with JavaScript it can be a nightmare. So here’s a simple, step by step guide to getting a map up on your site. I’ll go into a few extra features but I’m leaving out all the advanced features of the Google Maps API. If you want to use them, you’ll be best reading up on them at the Google Maps API Documentation.

So, let’s get started.

Step One

Get yourself a Maps API key. The key is valid for a particular domain and/or directory, and you need this for all calls to the API.

Step Two

Place this code in between the and tags in your webpage:

Step Three

Add this code into your page where you want the map to display:

This will display a simple map of Venice. The user will be able to move around the map, but won’t be able to do anything else.

Here’s what it looks like:

Customisation

Now obviously displaying a map of Venice to your users isn’t going to be helpful in most cases, so the first thing you’re going to want to do is recentre the map. The ‘setCenter’ function you see in the code above does just that, and the ‘GLatLng’ function you see within it lets you create a new location based on latitude longitude co-ordinates.

There are tons of ways to do this. But this is what I find easiest:

Visit Google Maps
Find the place you want by searching for it, and move around until you have the view you want
Click ‘Link to this page’
Copy the link, and copy out the latitude longitude value of the ‘ll’ variable in the link – you can ignore everything else (make sure you get the ‘ll’ variable, not the ‘sll’ one if it is present)

Now that you have the co-ordinates of your place, replace Venice’s co-ordinates with them. The final number – set to 13 in the example – controls the zoom. If you want a world view, you can set the zoom to 0 or 1. If you want a close up street view, you might want to set it to 16 or 17. Experiment till you get the result you want.

Don’t forget to also play around with the height and width of the div that the map is displaying in, if you want to focus on a particular place without anything else around it.

Extra features

I’m not going to go into great detail here on extra features – that is out of the scope of this post – but what I will do is outline a few useful features that you will probably want to implement on almost every map anyway.

To add the buttons that allow the user to switch between street maps, satellite maps and hybrid maps, add this code directly below the line where we run setCenter():

map.addControl(new GMapTypeControl());

To add a zoom control, add this code:

map.addControl(new GLargeMapControl());

To enable double click zoom (double left click to zoom in, double right click to zoom out), add this code:

map.enableDoubleClickZoom();

And finally, to add a placemarker, add this code:

map.addOverlay(new GMarker(new GLatLng(45.433756,12.337303)));

That will add your placemarker on Venice, so be sure to change it to your own co-ordinates.

Further information

This article hasn’t looked at many of the advanced features of Google Maps – there is so much more you can do, such as adding multiple placemarkers with information boxes, adding real-time traffic information and driving directions, responding to users clicking on the map, and so on. For further information, you’ll want to look at the Google Maps API Documentation – or if you’re ready for the nitty gritty, the API reference.

Alternatives

Of course, Google isn’t the only provider of maps. If Google’s Maps don’t do want you want them to do, perhaps check out Microsoft’s Virtual Earth SDK, or Yahoo!’s Maps API.

The one thing that did annoy me about Google’s Maps was that place names are localised to the country they are in – i.e. place names in Thailand are written in Thai, names in Greece are in Greek, etc. – which makes the maps very hard to read if you don’t actually know the language. The latest information I was able to find – December 2006 – indicated that Google didn’t have any immediate plans to change this, so my solution when hit with this problem was to use the alternatives above (Microsoft use English names throughout, and Yahoo transliterate the names from the language to latin characters so that you can at least figure out what they are).

So, I hope that this article has helped get you off the ground with displaying maps on your site. If you have any questions, let me know!

Preloading images with CSS

Tim Malone — Sun, 30 Apr 2006 02:41:59 +0000

A simple CSS image preloading technique: http://specere.net/blogs/?p=4.

’nuff said.

PHP, CSS, and mod_rewrite cheat sheets

Tim Malone — Fri, 13 May 2005 22:26:58 +0000

A great resource from Dave Child of ILoveJackDaniels.com.

Dave has recently released three “cheat sheets”, both in PNG and PDF format, with easy references for commonly used syntax and expressions in PHP, CSS, and mod_rewrite. They make great posters .

See www.ilovejackdaniels.com/cheat-sheets/.

Tim Malone.id.au » Web design

Google Maps – a step by step guide to a simple map

Preloading images with CSS

PHP, CSS, and mod_rewrite cheat sheets