Banner

 

Google maps exercise

Maps are useful for displaying spatial data, and Google provides an API to enable the easy addition of information to a Google map. In this lab exercise, you will learn how to use a few of the elements of the API to map the locations of the seven summits, the highest mountain on each continent.

  1. Get a developer key

    You need a sign up for a Google maps API key before you can embed a map on your Web page. Usually your instructor will have done this for the class if you are creating a page on your university's Web site. If not, follow the procedures on the sign up page.

  2. Code the head

    Create a new Web page using your usual HTML editor. If you don't have a HTML editor, then consider Nvu, an open source HTML editor.

    Edit the source code of the HTML file to include the following in the header area (the portion within the <head> and </head> tags.

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=your Google API key" type="text/javascript"> </script>

  3. Code the body

    Add the following code to the html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
   <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>The summits</title>
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA177NoGmqFB7-lqqzKBVXoBQXv8xmGxBKbvj7G6Y_q6gHcf8IFxTw4gFXq3pj3BMOTFdY5vJj1kuhww" type="text/javascript"></script>
   <script type="text/javascript">
    function initialize() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(-15, -0), 2);
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
 // Download the data in summits.xml and load it on the map. The format we
    // expect is:
    // <markers>
    //   <marker lat="37.441" lng="-122.141"/>
    //   <marker lat="37.322" lng="-121.213"/>
    // </markers>
    GDownloadUrl("summits.xml", function(data) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
    parseFloat(markers[i].getAttribute("lng")));
    map.addOverlay(new GMarker(point));
    }
    });
    }
    }
   
   </script>
   </head>
   <body onload="initialize()" onunload="GUnload()">
   <div id="map_canvas" style="width: 1050px; height: 800px"></div>
   </body>
   </html>
 

  1. Save the html file

    Save the html file as map.html on the server for which you have an assigned Google API key.

  2. Create the XML file

    The data file for this example contains the locations of the seven summits.

    Mountain Continent Height (meters) Latitude Longitude
    Mount Everest Asia 8,850 27.99 86.93
    Aconcagua South America 6,959 -32.65 -70.00
    Mount McKinley (Denali) North America 6,194 63.10 -151.01
    Kilimanjaro Africa 5,895 -3.07 37.35
    Mount Elbrus Europe 5,642 43.36 42.44
    Vinson Massif Antarctica 4,897 -78.58 -82.42
    Mount Kosciuszko Australia 2,228 -36.45 148.27

    Create an XML file containing the details for each summit. The format is:

    <markers>
    <marker lat="27.99" lng="86.93" mountain="Mount Everest" continent="Asia" height = "8850"/>
…
</markers>

    Add the data for the other six summits and save the file as summits.xml in the same directory as map.html on the same server.

  3. Test the mapping

Use your browser to open map.html (e.g., richardtwatson.com/map.html).

Complete code for map.html

Don't forget to replace the key value with your key.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
   <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>The summits</title>
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA177NoGmqFB7-lqqzKBVXoBQXv8xmGxBKbvj7G6Y_q6gHcf8IFxTw4gFXq3pj3BMOTFdY5vJj1kuhww" type="text/javascript"></script>
   
   <script type="text/javascript">
    function initialize() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(-15, -0), 2);
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
 // Download the data in summits.xml and load it on the map. The format we
    // expect is:
    // <markers>
    //   <marker lat="37.441" lng="-122.141"/>
    //   <marker lat="37.322" lng="-121.213"/>
    // </markers>
    GDownloadUrl("summits.xml", function(data) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
    parseFloat(markers[i].getAttribute("lng")));
    map.addOverlay(new GMarker(point));
    }
    });
    }
    }
   
   </script>
   </head>
 	<body onload="initialize()" onunload="GUnload()">
	<div id="map_canvas" style="width: 1050px; height: 800px"></div>
	</body>
	</html>

 

This page is part of the promotional and support material for Data Management (fifth edition) by Richard T. Watson
For questions and comments please contact the author
Date revised: October 24, 2009