Posted By

pkd65 on 12/11/09


Tagged


Versions (?)

HTML page for gmaps


 / Published in: HTML
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta name="generator" content=
  6. "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
  7. Linkpipe: Upstream Manholes
  8. </title>
  9. <script src=
  10. "http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw"
  11. type="text/javascript">
  12. </head>
  13. <body onunload="GUnload()">
  14. <h3>
  15. Linkpipe: Upstream Manholes
  16. </h3>
  17. <table border="1">
  18. <tr>
  19. <td>
  20. <form name="dd" id="dd">
  21. <select name="priority" onChange="setPriority(this);">
  22. <option value="-1" selected="selected">
  23. Select Priority
  24. </option>
  25. <option value="3">
  26. High
  27. </option>
  28. <option value="2">
  29. Medium
  30. </option>
  31. <option value="1">
  32. Low
  33. </option>
  34. <option value="0">
  35. CCTV
  36. </option>
  37. </select>
  38. </form>
  39. </td>
  40. </tr>
  41. <tr>
  42. <td>
  43. <div id="map" style="width: 800px; height: 700px"></div>
  44. </td>
  45. <td width="150" valign="top" style=
  46. "text-decoration: none; color: #4444ff;">
  47. <div id="side_bar" style=
  48. "overflow:auto; height:700px; font-size:10px;font-family:Arial;text-decoration:none;">
  49. </div>
  50. </td>
  51. </tr>
  52. </table><script type="text/javascript">
  53. //<![CDATA[
  54.  
  55. if (GBrowserIsCompatible())
  56. {
  57. var side_bar_html = "";
  58. var gmarkers = [];
  59. var htmls = [];
  60. var i = 0;
  61. var priority = [];
  62.  
  63.  
  64. // A function to create the marker and set up the event window
  65. function createMarker(point,name,html)
  66. {
  67. var marker = new GMarker(point);
  68. GEvent.addListener(marker, "click", function()
  69. {
  70. marker.openInfoWindowHtml(html);
  71. });
  72. // save the info we need to use later for the side_bar
  73. gmarkers.push(marker);
  74. // add a line to the side_bar html
  75. side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
  76. return marker;
  77. }
  78.  
  79.  
  80. // This function picks up the click and opens the corresponding info window
  81. function myclick(i)
  82. {
  83. GEvent.trigger(gmarkers[i], "click");
  84. }
  85.  
  86.  
  87. // create the map
  88. var map = new GMap2(document.getElementById("map"));
  89. map.addControl(new GLargeMapControl());
  90. map.addControl(new GMapTypeControl());
  91. map.setCenter(new GLatLng(33.9033, -118.2418), 10);
  92.  
  93. GDownloadUrl("linkpipe2.xml", function(doc)
  94. {
  95. var xmlDoc;
  96. function setPriority(dd)
  97. {
  98. map.clearOverlays();
  99. var selectedPriority = dd.value;
  100.        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
  101.  
  102.        for (var i = 0; i < markers.length; i++)
  103. {
  104.          // obtain the attribues of each marker
  105.          var lat = parseFloat(markers[i].getAttribute("lat"));
  106.          var lng = parseFloat(markers[i].getAttribute("lng"));
  107.          var point = new GLatLng(lat,lng);
  108.          var html = markers[i].getAttribute("label");
  109.          var label = markers[i].getAttribute("label");
  110.          var priority = markers[i].getAttribute("priority");
  111.          // create the marker
  112.          //If the selected priority == -1 then display all
  113.          if (priority==selectedPriority || selectedPriority==-1)
  114. {
  115.          var marker = createMarker(point,label,html);
  116.          map.addOverlay(marker);
  117.          }
  118. // GDownloadUrl("linkpipe2.xml", function(doc) {
  119. // xmlDoc = GXml.parse(doc);
  120.        }
  121.  
  122.  
  123.        // put the assembled side_bar_html contents into the side_bar div
  124.        document.getElementById("side_bar").innerHTML = side_bar_html;
  125.  
  126. }
  127.  
  128. }
  129.  
  130. )
  131. else {
  132. alert("Sorry, the Google Maps API is not compatible with this browser");
  133. }
  134.  
  135. //]]>
  136. </script>
  137. </body>
  138. </html>

Report this snippet  

You need to login to post a comment.