Technical Reviews and Geek Toys

Recently I needed to develop a custom map showing the location of the Twin Angels Ruin, a Chaco World Heritage Site administered by the Bureau of Land Management in North West New Mexico. I knew the approximate location and I had photos taked by some individuals that had recently visited the site. With this information I was able to pinpoint the location of the Ruins and build the custom map. Here is how you can build your own custom Google map including a couple of sample files and instructions how they can be used.

...

An article appeared in the March 2009 issue of the National Geographic Explorer stating the Aztec Chamber of Commerce had recently released a map indicating the position of the Twin Angels Ruins for the first time. As things often happen, the release of the map had been delayed so it became necessary to get a map online as soon as possible.

NOTE: If you can't embed Javascript on your webpage you may use the Google Static Maps API to embed a simple map that doesn't require the use of Javascript.

The Google Map API is an excelent tool that enables one to embed a Google Map on a webpage using Javascript. The Google Maps Home page also provides information and examples on how to use the API. We are going to build a self contained page that contains the Javascript that will build the map. An XML file will also be used to display markers for specific points on the map with an information window. To make things a little more interesting, the XML file also populates a drop down menu listing the name of the points. When an item is selected in the drop down menu, the map will scroll to that marker and its information window is displayed. An example of the two files may be downloaded here.

This first thing that must be accomplished is to sign up for a Google Map API key. A single Maps API key is valid for a single "directory" or domain. There is no charge for the key, however one must have a Google Account in order to generate the key. This key is then plugged into the call to google for the javascript code... line 5 of the test.html file.

Google provides some default markers, however there are a number of custom markers available... just Google it. One site I found offered some Google Map: Colored Markers.. Just install the markers on the site where the map can find them.

The map then needs a precise location to define the center of the map as well as the location to place the markers. I don't have a GPS locator so I used the next best thing. WikiMapia is a geographic information system (GIS) tool that uses Google Map technology. It is very easy to zoom into a location and use the cross-hair in the center of the map to define a relatively precise location. Once the cross-hair marks the desired location, the longitude (lon) and latitude (lat) may be extracted from the URL and used in our Google Map.

This latitude and longitude is then plugged the Google Map script to define the center of the map when it is drawn. The 18 shown in the image defines the zoom level.

The XML file is used to define the Marker location, marker image, any text that will show up in the Text Window as well as the label for the drop down menu.

When done the completed map should look similar to that shown below.