Don’t call me DOM

19 January 2006

Area-selector for Google Maps

Filed under:

As a follow-up on my geographical site map generator, I’ve coded up a very simple system that allows to navigate on a Google Map by area; although Google Maps are really pretty fun to use, I find that getting an overview of a well-defined area (country, continent, etc) takes quite too much effort by default.

So, after having looked up data for the areas the most relevant to my map, I wrote a simple area-selector as follows:


// This relies on the fact that the HTML selector widget is the first one in the document
// should probably use a name instead
// Also, this assumes the map variable has been set to the relevant GMap object
function centerOn() {
   placeSelect = document.forms[0].place;
   place = placeSelect.options[placeSelect.selectedIndex].value;
   switch(place) {
      case "USA": 
        map.centerAndZoom(new GPoint(-95.677068,37.0625),13);
        break;
      case "NewEngland":
        map.centerAndZoom(new GPoint(-73.399658,42.867912),10);
        break;
      case "Europe":
        map.centerAndZoom(new GPoint(11.513672,49.439557),13);
        break;
      case "France":
        map.centerAndZoom(new GPoint(2.8125,46.860191),11);
        break;
      case "PACA":
        map.centerAndZoom(new GPoint(5.125122,43.858297),9);
        break;
      case "World":
        map.centerAndZoom(new GPoint(-1.054687,31.353637),15);
        break;
      case "Brazil":
        map.centerAndZoom(new GPoint(-47.460937,-12.897489),13);
        break;
   }
   placeSelect.selectedIndex = 0;
   return false;
}

This is plugged in the HTML code with a drop down menu:


<form><p>Center and Zoom on: <select name='place' id='place' onchange='centerOn()'>
<option selected='selected' disabled='disabled'>Pick an area</option>
<option value='World'>World</option>
<option value='Europe'>Europe</option>
<option value='France'>France</option>
<option value='PACA'>South of France</option>
<option  value='USA'>USA</option>
<option  value='NewEngland'>New England</option>
<option  value='Brazil'>Brazil</option>
</select></p></form>

(implemented on my personal Web site)

It would be nice if there was some place (typically a Wiki) where the community could maintain a list of various distinctive areas that one could pick relevant values from; I guess the data should store a more standard scale than the zoom level used in Google Maps in such a case.

2 Responses to “Area-selector for Google Maps”

  1. Max Froumentin, W3C » Photo Albums on Google Maps Says:

    […] update: I made a few changes: – now the latest map is at the top of the index page; – the map features Dom’s area selector; – each album row now has a ‘map’ link which links to a close-up satellite view of where the thumbnail picture was taken. It’s not always very accurate since I don’t always remember where I took that particular picture; – the page is almost XHTML. The geo namespace declaration is still inserted by XSLT, even despite the exclude-result-prefixes declaration. | Permalink […]

  2. Britney Says:

    Thanks for the update and information, I always like looking thru Google maps and this Area Selector is pretty cool edetion to my expierince via Google maps, it has no doubt cut down on the load time thanks !!!!

Picture of Dominique Hazael-MassieuxDominique Hazaël-Massieux (dom@w3.org) is part of the World Wide Web Consortium (W3C) Staff; his interests cover a number of Web technologies, as well as the usage of open source software in a distributed work environment.