Find a person's location with Google Maps

Google Maps is one of the most useful websites to appear in recent years.

If you want to show someone on a map where your office is, or the location of a party, it’s a great tool.

You can add a link to a map very easily by clicking the buttons on Google Maps to get the code. But there is more to Google Maps than that.

If your site can determine the location of a user, geolocation can be used to customise the information displayed automatically.

So there is no need for people to enter their postcode, for example, to find the nearest branches of a business.

But how do you do it? Well, the web standards organisation W3C has developed a geolocation API, designed to allow you to determine someone’s location in Javascript.

Javascript provides a way for your web pages to identify where a user is.

You could draw a map, or send the location back to the server via a web form, but first you need to find the location, so how is that done?

Not many web browsers support W3C geolocation, but the idea is that it’s extensible.

Rather than relying on a single method, there are several ways of finding out where someone is.

The least accurate is by a geographic look-up of an IP address.

Next, there are services such as Skyhook which map the locations of Wifi access points, and then there is GPS.

Some of the example services use Skyhook, which can be quite accurate.

I’m going to show how to add Google maps to your site, including one that is based on the location of the visitor.

Unfolding the maps
Before you can use Google’s Maps API, which will allow you to request a map for any co-ordinates, you will need to register on the website.

To do that, you need a Google account, and you’ll receive an API key that looks like a random string of letters.

Next, there are a few things to add to your web page. First, include the Google Maps Javascript, like this:

replacing the key with your actual API key.

You’ll also need a region on your page where you want the map to appear; a DIV is the simplest way to do this:

Now, I’ll create a map showing the location where a photograph was taken; you just need to add this as a script in the HEAD of the page:

function init_maps() {
if (GBrowserIsCompatible()) {
var firstmap = new GMap2(document.getElement4
ById(“firstmap”));
firstmap.setCenter(new GLatLng(51.4564, -2.6269), 15);
firstmap.setUIToDefault() ;
}
}

And then, in the BODY tag, add:

onload=”init_maps()” onunload=”GUnload()”

That is as simple as it gets, in terms of embedding a Google Map in your page.

The options to the setCentre method are the latitude and longitude, followed by the zoom level; it’s worth experimenting with that to get the result you want.

When you declare the new map, the name of the document element has to match the id you gave to the part of the page where you want the map to appear.

You can add markers just as easily, or text boxes in the floating balloon style that you will have seen on other maps, and set options such as the map vi ew.

The API documentation explains how it’s done ­ it’s all incredibly easy:

var origin = new GLatLng(51.4564, -2.6269) ;
firstmap.addOverlay(new GMarker(origin)) ;

will add a marker at the centre of our existing map.

Where are you?
W3C geolocation is experimental. So much so that the test page at doesn’t agree with the documentation.

But if you visit that page with the Mozilla browser and the Geode plug-in is enabled you should see a second map appear, which will attempt to show your own position.

If your browser doesn’t support the service you will see a polite message.

Opera has released a test build to work with W3C geolocation and the Skyhook positioning service, but I have not persuaded it to return useful information and the documentation only offers a vague ‘You need to register your site on Loki.com’ comment.

Loki provides a geolocation API of its own, as does Google’s Gears, so you can use either of those. But the W3C implementation is simple and should become more widespread.

All you have to do in a script on your own site is something like this:

navigator.geolocation.getCurrentPosition(visitor_map, location_error);

The two parameters are functions that will be called when the location of the browser has been worked out; the first is called with a position as its parameter, if a location can be found, and the second ­ which is optional ­ if the location can’t be found.

The first parameter, which provides the information you can use to find your nearest branch, for example, differed from the documentation.

Most of that states that among the attributes of a position object are co-ordinates, which themselves have latitude and longitude attributes, so if you have a paragraph on your page where you want the user’s position to appear, with the id ‘latlong’, you’d update it with something like this:

userLocation = document.getElementById(“latlong”) ;
userLocation.innerHTML = “Latitude “ + position.coords.latitude + “, longitude “ + position.coords.longitude ;

In fact, using the Geode plug-in for Firefox, I had to refer to simply position.latitude, and position.longitude.

From the Google maps example above, it should be easy to take those elements and create a new map further down the page.

The full code is in the PDF download available with this feature. All that is missing is the code to load the Google Maps API for drawing the maps, and a few hooks in the HTML ­ there’s a second DIV with the name secondmap, and a paragraph with the id latlong:

Your latitude and longitude should replace this text.

and that really is the basics of it.

Sites such as Loki and Google both provide ‘geocoding’ and ‘reverse geocoding’ which are used to map from addresses to latitude and longitude or in the opposite direction, respectively.

So, you could even alarm visitors to your site with a pop-up message telling them the name of the street you think they’re on ­ or amuse them, depending on the level of accuracy.

The Geode plug-in allows users to set how much information they want to pass to a website; the W3C specification includes information to tell the site how accurate the positioning information is.

There is also information about altitude, heading and speed, plus a ‘watch’ function that allows for the page to update each time the computer moves.