Web Maps with the Google Map API

Getting the Right Coordinates

To get the precise geographical location for specific sites, you could use some kind of a geocoder tool. There are several free ones (the Perl module Geo::Coder::US, for instance), but most work only with U.S. addresses. For our purposes, we used Google Earth (earth.google.com), which in its latest version combines satellite imagery, maps, terrain, and 3D buildings. This tool gives a simple interface to navigate over a global satellite map and manually assign points of interest with markers, polylines, and polygons. This software was so straightforward that we could give it to our team of rural engineers and, after a few minutes of training, they were able to represent a large amount of information that was scattered in a variety of files in different engineering software formats. The original file was converted to KML, short for "Keyhole Markup Language" (code.google.com/apis/kml/documentation), an XML-based language for managing three-dimensional geospatial data. This file contained coordinates, labels, and even HTML descriptions, in a format that was human readable and easy to process using XSLT. Listing One, for instance, is the location of my office in KML.

<Placemark>
  <name>My Office</name>
  <LookAt>
    <longitude>23.78266482649396</longitude>
    <latitude>37.97757782541832</latitude>
    <altitude>0</altitude>
    <range>155.5744724827026</range>
    <tilt>1.639002638135242e-012</tilt>
    <heading>0.001088456620806448</heading>
  </LookAt>
  <Point>
    <coordinates>
      23.78277996313077,37.97773328821575,0
    </coordinates>
  </Point>
</Placemark>

Initializing the Map

Although the Map API is free, to embed a map in a web pages you first have to sign up for an API key. A single key is valid for a single "directory" on your web server, so if you sign up for the URL "www.mycompany.com/mysite," the key you get will be good for all URLs in the "www.mygooglemapssite.com/mysite/" directory. You must have a Google Account to get a Maps API key, and your API key is connected to your Google Account. These keys are generated in real time and are required to import the core library in your JavaScript code:

<script
src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY"
type="text/javascript">
</script>

For a basic map to appear, the API requires that the construction be made while the body of the page loads with a function similar to Listing Two. In this way, you first check if the browser is compatible with your JavaScript API (most are), then construct a new map object. For our purposes, we added some controls on the map to help us zoom in/out, and change modes between satellite imagery and geopolitical view. Also, we defined the initial center of the map and provided a welcome message window that contains HTML code. Our API also gave us a built-in function GUnload() for cleanup purposes on exiting the map page.

function load() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(37.97775399999999, 23.782611), 16);
    map.openInfoWindow(map.getCenter(),"Welcome message");
map.setMapType(map.getMapTypes()[1]);
var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(250,0));
pos.apply(document.getElementById("control"));
map.getContainer().appendChild(document.getElementById("control"));
  }
}