Nigel Whitfield

Freelance journalist & editor

Nigel Whitfield, June 2006
About me My Work Links  

Welcome to the Where Am I page, which accompanies a column in the August 2009 issue of Personal Computer World.

To start with, let's have a map showing where I was when the picture at the top right of this page was taken - it's a simple example of how to add a Google map to your own web site:

All you need to add a map like that is to sign up for the Google Maps API, and get a key, which you reference in a single line SCRIPT tag, then add some simple JavaScript to your page, like this:

function init_maps() {
  if (GBrowserIsCompatible()) {
    var firstmap = new      GMap2(document.getElementById("firstmap"));
    firstmap.setCenter(new GLatLng(51.4564, -2.6269), 15);
    firstmap.setUIToDefault() ;

Then, use the onload attribute of the page body tag to call your function. As you can see, here I've set the map type to Google's hybrid view.

Where are you coming from?

If you're visiting this page from a browser that uses the W3C geolocation API, we can add a map that shows where you are. It's not the only API to do that, but it should become the standard way, so let's see what we can find out about where you are.

If you see a request at the top of the page to allow your location to be sent to the web site, choose OK.

Your latitude and longitude should replace this text.

If you're using Mozilla 3.5 or later, and a WiFi connection, you should see a map centred roughly on your location; in future the W3C API will allow browsers to send information derived from multiple sources, including GPS units, so mobile phone browsers in particular will be able to show users exactly where they are. You can read more about GeoLocation in the August 2009 issue of Personal Computer World. This page was previous coded to work with the Geode plugin instead, but amended in April 2010.

This is a sample page to show how easy it can be to add mapping features to your own web site, for the August 2009 PCW Hands On Web Development column

Useful additional links: