Google Maps

Creative Commons Logo This work is licensed under the Creative Commons Attribution Non-Commercial 2.0 UK: England & Wales Licence. This means that you are free to: copy; distribute; and modify this work. It also means that you cannot use it for commercial purposes. Additionally, you must attribute this work to the original author, Thomas Guymer, ideally with a link.

Blank

<div id="map"></div>

Blank

var t;
var map;

function loadJS() {
 if(document.getElementsByTagName("head")[0] && document.getElementById("map")) {
 script = document.createElementNS("http://www.w3.org/1999/xhtml", "script");
 script.setAttributeNS(null, "type", "text/javascript");
 script.setAttributeNS(null, "src", "http://maps.google.com/maps?file=api&v=2&key=" + apiKey + "&async=2&callback=insertMap&sensor=false");
 document.getElementsByTagName("head")[0].appendChild(script);
 }
 else {
 t = setTimeout("loadJS()", 100);
 }
}

// Function to insert Google Map on page.
function insertMap() {
 // Add Google map to page and centre on position.
 map = new GMap2(document.getElementById("map"));
 map.setCenter(new GLatLng(13.000000, 100.00000), 4, G_HYBRID_MAP);
 map.setUIToDefault();
 // Download the data in plan.xml, add markers to the map and join them up.
 GDownloadUrl("../../expeditions/2007-06-28/plan.xml", function(data, responseCode) {
 var xml = GXml.parse(data);
 var markers = xml.documentElement.getElementsByTagName("marker");
 var points = new Array();
 for(i = 0; i < markers.length; i++) {
 var lat = parseFloat(markers[i].getAttribute("lat"));
 var lng = parseFloat(markers[i].getAttribute("lng"));
 var date = markers[i].getAttribute("date");
 var header = markers[i].getAttribute("header");
 var country = markers[i].getAttribute("country");
 var point = new GLatLng(lat, lng);
 points[i] = point;
 map.addOverlay(createMarker(point, lat, lng, date, header, country));
 }
 var polyline = new GPolyline(points, "#00ff00", 10);
 map.addOverlay(polyline);
 });
}

// Function to jump to a point on the map.
function jumpTo(lat, lng, zoom) {
 map.setCenter(new GLatLng(lat, lng), zoom, G_HYBRID_MAP);
}

// Function to create a marker with a custom label.
function createMarker(point, lat, lng, date, header, country) {
 var marker = new GMarker(point);
 GEvent.addListener(marker, "click", function() {
 marker.openInfoWindowHtml("" + header + " <code>N" + lat + ", E" + lng + " (" + date + ")</code> " + country + " <a href=\"javascript:jumpTo('" + lat + "','" + lng + "',11);\" title=\"Zoom In to Level 11\">Zoom In to Level 11</a> <a href=\"javascript:jumpTo('" + lat + "','" + lng + "',13);\" title=\"Zoom In to Level 13\">Zoom In to Level 13</a> <a href=\"javascript:jumpTo('" + lat + "','" + lng + "',15);\" title=\"Zoom In to Level 15\">Zoom In to Level 15</a>");
 });
 return marker;
}

document.onload = loadJS();

Blank

This page was last modified on 06/04/2010. This page has had 214 hits up until 13/06/2010.