Advanced Search

Return to Snippet

Revision: 21403
at December 11, 2009 18:14 by pkd65
Updated Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <title>
      Linkpipe: Upstream Manholes
    </title>
    <script src=
    "http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw"
    type="text/javascript">
</script>
  </head>
  <body onunload="GUnload()">
    <h3>
      Linkpipe: Upstream Manholes
    </h3>
    <table border="1">
      <tr>
        <td>
          <form name="dd" id="dd">
            <select name="priority" onChange="setPriority(this);">
              <option value="-1" selected="selected">
                Select Priority
              </option>
              <option value="3">
                High
              </option>
              <option value="2">
                Medium
              </option>
              <option value="1">
                Low
              </option>
              <option value="0">
                CCTV
              </option>
            </select>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          <div id="map" style="width: 800px; height: 700px"></div>
        </td>
        <td width="150" valign="top" style=
        "text-decoration: none; color: #4444ff;">
          <div id="side_bar" style=
          "overflow:auto; height:700px; font-size:10px;font-family:Arial;text-decoration:none;">
          </div>
        </td>
      </tr>
    </table><script type="text/javascript">
//<![CDATA[

    if (GBrowserIsCompatible()) 
    {
      var side_bar_html = "";
      var gmarkers = [];
      var htmls = [];
      var i = 0;
      var priority = [];
      

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) 
      {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() 
        {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
        return marker;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) 
      {
        GEvent.trigger(gmarkers[i], "click");
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(33.9033, -118.2418), 10);

     GDownloadUrl("linkpipe2.xml", function(doc)
     {
        var xmlDoc;
        function setPriority(dd) 
        {
        map.clearOverlays();
        var selectedPriority = dd.value;
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");

           for (var i = 0; i < markers.length; i++)
            {
             // obtain the attribues of each marker
             var lat = parseFloat(markers[i].getAttribute("lat"));
             var lng = parseFloat(markers[i].getAttribute("lng"));
             var point = new GLatLng(lat,lng);
             var html = markers[i].getAttribute("label");
             var label = markers[i].getAttribute("label");
             var priority = markers[i].getAttribute("priority");
             // create the marker
             //If the selected priority == -1 then display all
             if (priority==selectedPriority || selectedPriority==-1) 
            {
             var marker = createMarker(point,label,html);
             map.addOverlay(marker);
             }
     // GDownloadUrl("linkpipe2.xml", function(doc) {
     //   xmlDoc = GXml.parse(doc);
           }
    
    
           // put the assembled side_bar_html contents into the side_bar div
           document.getElementById("side_bar").innerHTML = side_bar_html;

    }

    }

    )
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>
    </script>
  </body>
</html>

Revision: 21402
at December 11, 2009 15:45 by pkd65
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Linkpipe: Upstream Manholes</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
  </head>
  <body onunload="GUnload()">

 <H3> Linkpipe: Upstream Manholes</h3>
 
    <table border=1>
    <tr><td>

            <form name = "dd">
                <select name="priority" onChange="alert(document.dd.priority.value)" >
                    <option value="3">High</option>
                    <option value="2">Medium</option>
                    <option value="1">Low</option>
                    <option value="0">CCTV</option>
                </select> 
            </form>

    </td></tr>
      <tr>
        <td>
           <div id="map" style="width: 800px; height: 700px"></div>
        </td>
        <td width = 150 valign="top" style="text-decoration: none; color: #4444ff;">
           <div id="side_bar" style="overflow:auto; height:700px; font-size:10px;font-family:Arial;text-decoration:none;"></div>
        </td>
      </tr>
    </table>


    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      var side_bar_html = "";
      var gmarkers = [];
      var htmls = [];
      var i = 0;
      var priority = [];
      

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
        return marker;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(33.9033, -118.2418), 10);


       GDownloadUrl("linkpipe2.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
          var html = markers[i].getAttribute("label");
          var label = markers[i].getAttribute("label");
          var priority = markers[i].getAttribute("priority");
          // create the marker
          var marker = createMarker(point,label,html);
          map.addOverlay(marker);
        }
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>
    </script>
  </body>

</html>
Initial URL 









Initial Description














Initial Title





HTML page for gmaps









Initial Tags














Initial Language





HTML