Master Google Maps
- Article 6 of 9
- Practical Web Design, October 2006
It may seem dauntingly sophisticated, but with just a bit of work Google Maps can be part of your website, too. Rob Buckley gives you the directions.
Whenever you try to explain to someone what AJAX is, you end up waving your hands and using jargon words you’d rather not mention. It’s a whole lot easier to say “anything that works like Google Maps”.
Google Maps is one of those tools that looks so much like magic at first glance, so useful after you’ve tried it and so obvious in retrospective. It allows you to grab a map of almost anywhere in the world, zoom in and out, pan around it simply by dragging and dropping. Since it doesn’t require any plug-ins. There’s aerial photography data for most locations as well, so you really can see what’s going on in your neighbourhood if you want to.
Google has very generously made it possible for you to include maps based on its system in your own web site. That’s great for anyone who’s ever wanted to have a decent map to their offices on their site, anyone who has a club, anyone having a party – in short, anyone who needs to show others how to get somewhere.
To use Google Maps, all you need is a reasonable grasp of the basics of JavaScript. If you don’t have that, just follow the tutorial closely and you should be able to get the basic ideas. A little experimentation will also help.
In this tutorial, we’re going to show you how to add all the foundation code to a web page so that you can embed a Google Map in it. We’ll then show you how to work out the coordinates of all the points you’ll need on the map. Then we’ll show you how to add points to the map, add information windows that display HTML and add controls for moving around the map, zooming in and out and switching to aerial photography views of the area. For advanced users, we’ll also show you how to draw lines linking points on the map.
Google Maps is very, very feature rich though, so we couldn’t hope to cover all of it in one tutorial. There’s a whole world of custom icons, tabbed windows and polygons for you to enjoy, once you’ve started. This is merely the beginning of your journey. Here’s our map to guide you in getting started.