Advanced Search

HTML page for gmaps

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.