Marker Data

Table of Contents | All Slides | Link List | Examples | CSCI E-12

<< previous | next >>

Marker Data

campus_data.xml

Javascript createMarker function:

function createMarker(point, elem) {
  // create tabs
  var infoTabs = [];
  var tabs = elem.getElementsByTagName("tab");
	for (var i = 0; i < tabs.length; i++) {
    var tab = new GInfoWindowTab(
        tabs[i].getAttribute("label"),
        tabs[i].getElementsByTagName("content")[0].textContent
    );
    infoTabs.push(tab);
  }
  // create marker, add tabs 
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowTabsHtml(infoTabs);
  });
  return marker;
}
    
// load function
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
	      map.addControl(new GOverviewMapControl());
	      // center 42.375492,-71.117613
        map.setCenter(new GLatLng(42.375492,-71.117613), 16);
	      map.setMapType(G_HYBRID_TYPE);
        // Download the data in data.xml and load it on the map. The format we
        // expect is:
        // <markers>
        //   <marker lat="37" lng="-122"><content>...</content></marker>
        //   <marker lat="30" lng="-100"><content>...</content></marker>
        // </markers>
        GDownloadUrl("campus_data.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")));
            var marker = createMarker(point, markers[i]);
	          map.addOverlay(marker);
          }
        });
      }
    }

Table of Contents | All Slides | Link List | Examples | CSCI E-12

<< previous | next >>