Listing 2. JavaScript for Google Map

1 var map;
2 var default_map = "35.181804,-105.40625,8";
3
4 function initialize (el) {
5 if (!GBrowserIsCompatible()) {
6 document.getElementById(el).innerHTML = "Incompatible Browser";
7 return;
8 }
9
10 map = new GMap2(document.getElementById("map"));
11
12 var l = default_map.split(",");
13 map.setCenter(new GLatLng(parseFloat(l[0]), parseFloat(l[1])), parseInt(l[2]));
14 update_gui();
15
16 map.addControl(new GMapTypeControl());
17 map.addControl(new GSmallMapControl());
18 map.setMapType(G_HYBRID_MAP);
19
20 GEvent.addListener(map, "mousemove", function () {update_gui();});
21
22 ajax_get("/markers.xml", "parse_markers");
23
24 ajax_get("/zones.xml", "parse_zones");
25
26 update_gui();
27 }
28
29 function parse_markers (e) {
30 var i, lon, lat;
31 var assets = e.getElementsByTagName("asset");
32
33 for (i=0; i<assets.length; i++) {
34 lon = parseFloat(assets[i].getAttribute("long"));
35 lat = parseFloat(assets[i].getAttribute("lat"));
36
37 var marker = new GMarker(new GLatLng(lat,lon));
38
39 marker.id = assets[i].getAttribute("id");
40 marker.name = assets[i].getAttribute("name");
41 marker.desc = assets[i].getAttribute("desc");
42
43 marker.long = lon;
44 marker.lat = lat;
45
46 map.addOverlay(marker);
47
48 //GEvent.addListener(marker, "mouseover", function () {marker_mouseover(this);});
49 GEvent.addListener(marker, "click", function () {marker_click(this);});
50 }
51 }
52
53 function parse_zones (e) {
54 var i,j;
55 var containers = e.getElementsByTagName("container");
56
57 for (i=0; i<containers.length; i++) {
58 var bounds = new Array;
59
60 var id = containers[i].getAttribute("id");
61 var name = containers[i].getAttribute("name");
62 var desc = containers[i].getAttribute("description");
63
64 var points = containers[i].getElementsByTagName("point");
65 for (j=0; j<points.length; j++) {
66 var p = new Object;
67
68 p.long = points[j].getAttribute("long");
69 p.lat = points[j].getAttribute("lat");
70
71 bounds.push(new GLatLng(p.lat,p.long));
72 }
73
74 var container = new GPolygon(bounds, "#ff0000", 5, .5, "00ff00", .2);
75
76 container.id = id;
77 container.name= name;
78 container.desc = desc;
79
80 map.addOverlay(container);
81 GEvent.addListener(container, "click", function () {zone_click(this);});
82
83 }
84 }
85
86 function marker_mouseover(who) {
87 map.openInfoWindow(new GlatLng(who.lat,who.long), who.name);
88 }
89
90 function marker_click(who) {
91 map.openInfoWindow(new GLatLng(who.lat,who.long), who.desc);
92 }
93
94 function zone_click(who) {
95 map.openInfoWindow(new GLatLng(who.lat,who.long), who.desc);
96 }
97
98 function update_gui () {
99 var sw = map.getBounds().getSouthWest();
100 var ne = map.getBounds().getNorthEast();
101
102 document.getElementById("debug_sw").innerHTML= sw.toString();
103 document.getElementById("debug_ne").innerHTML= ne.toString();
104 document.getElementById("debug_zoom").innerHTML= map.getZoom();
105 }