Release of grains plugin to racktables-contribs
[racktables-contribs] / gmaps / maps.php
CommitLineData
41e8a5f2
DO
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html>
3 <head>
4 <title>Google Maps</title>
5 </head>
6 <body onunload="GUnload()">
7
8 <!-- you can use tables or divs for the overall layout -->
9 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=REPLACE_THIS_STRING_WITH_YOUR_GMAPS_KEY" type="text/javascript"></script>
10 <table border=1>
11 <tr>
12 <td>
13 <div id="map" style="width: 1000px; height: 600px"></div>
14 </td>
15 <td width = 200 valign="top" style="text-decoration: underline; color: #4444ff;">
16 <div id="side_bar"></div>
17 </td>
18 </tr>
19
20 </table>
21
22 <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
23 However, it seems JavaScript is either disabled or not supported by your browser.
24 To view Google Maps, enable JavaScript by changing your browser options, and then
25 try again.
26 </noscript>
27
28
29 <script type="text/javascript">
30 //<![CDATA[
31
32 if (GBrowserIsCompatible()) {
33 // this variable will collect the html which will eventualkly be placed in the side_bar
34 var side_bar_html = "";
35
36 // arrays to hold copies of the markers used by the side_bar
37 // because the function closure trick doesnt work there
38 var gmarkers = [];
39
40 // A function to create the marker and set up the event window
41 function createMarker(point,name,html) {
42 var marker = new GMarker(point, {title: name });
43 GEvent.addListener(marker, "click", function() {
44 marker.openInfoWindowHtml(html);
45 });
46 // save the info we need to use later for the side_bar
47 gmarkers.push(marker);
48 // add a line to the side_bar html
49 side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
50 return marker;
51 }
52
53
54 // This function picks up the click and opens the corresponding info window
55 function myclick(i) {
56 GEvent.trigger(gmarkers[i], "click");
57 }
58
59 // create the map
60 var map = new GMap2(document.getElementById("map"));
61 map.addControl(new GLargeMapControl());
62 map.addControl(new GMapTypeControl());
63 map.setCenter(new GLatLng( 50.87879,4.6999), 14);
64 map.enableScrollWheelZoom();
65
66 // Read the data from example.xml
67 GDownloadUrl("data.php", function(doc) {
68 var xmlDoc = GXml.parse(doc);
69 var markers = xmlDoc.documentElement.getElementsByTagName("marker");
70
71 for (var i = 0; i < markers.length; i++) {
72 // obtain the attribues of each marker
73 var lat = parseFloat(markers[i].getAttribute("lat"));
74 var lng = parseFloat(markers[i].getAttribute("lng"));
75 var point = new GLatLng(lat,lng);
76 var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
77 //var html = markers[i].getAttribute("html");
78 var label = markers[i].getAttribute("label");
79 // create the marker
80 var marker = createMarker(point,label,html);
81 map.addOverlay(marker);
82 }
83 // put the assembled side_bar_html contents into the side_bar div
84 document.getElementById("side_bar").innerHTML = side_bar_html;
85
86 var lines = xmlDoc.documentElement.getElementsByTagName("line");
87 // read each line
88 for (var a = 0; a < lines.length; a++) {
89 // get any line attributes
90 var colour = lines[a].getAttribute("colour");
91 var width = parseFloat(lines[a].getAttribute("width"));
92 // read each point on that line
93 var points = lines[a].getElementsByTagName("point");
94 var pts = [];
95 for (var i = 0; i < points.length; i++) {
96 pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
97 parseFloat(points[i].getAttribute("lng")));
98 }
99 map.addOverlay(new GPolyline(pts,colour,width));
100 }
101
102 });
103 }
104
105 else {
106 alert("Sorry, the Google Maps API is not compatible with this browser");
107 }
108
109
110 //]]>
111 </script>
112 </body>
113
114</html>
115
116
117
118