problem with plotting markers

I have been trying to plot markers on google map at multilple location on mouse click. After plotting markers, I want to draw a polyline between connecting two markers. A log is also provided which show the coordinates of the markers plotted and the line drawn at points between them.
The problem with the code is I am unable to plot the markers on multiple locations.. And the markers does not show info window on mouse over.
Below is my code snippet. Please rectify the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google Maps </title>
<style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    body {
 font-family:Arial,Helvetica,Sans Serif;
 font-size:10pt;
 background-color: #63F;
    }
    </style>
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
            type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[

    var map;
    var marker;
    var markerArray=[]
    var polyShape;
    var polygonMode;
    var polygonDepth = "20";
    var polyPoints = Array();
    var drawMode;
    var oldMarker;
    var geocoder = null;


    var lineColor = "#0000FF"; // blue line
    var opacity = 1;
    var lineWeight = 5;



    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4224, -122.0838), 13);
    map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 GEvent.addListener(map, 'click', mapClick);
 geocoder = new GClientGeocoder();
       }
    }


   // mapClick - Handles the event of a user clicking anywhere on the map
   // Adds a new point to the map and draws either a new line from the last point
    function Marker() 
 {
      var color = getColor(true);
      var marker = new GMarker(latlng, {icon: getIcon(color), draggable: true});
      map.addOverlay(marker);

      GEvent.addListener(marker, "dragend", function() {

      });
      GEvent.addListener(marker, "mouseover", function() {


   });
     // polyPoints.push(marker);
   GEvent.addListener(marker, "click", function() {
         marker.openExtInfoWindow(
              map,
              "simple_example_window",
              "I'm some HTML content that will go in the simple example's ExtInfoWindow.",
              {beakOffset: 3}
            ); 
      });
    }

    function mapClick(marker, clickedPoint) {
      markerArray.push(clickedPoint);
   polyPoints.push(clickedPoint);
      drawCoordinates();
     }


      // Clear current Map
      function clearMap(){
        map.clearOverlays();
        polyShape = null;
        polyPoints = [];
        // logCoordinates();
        document.getElementById("coords").innerHTML =  "&lt;-- Click on the map to know the coordinates";
      }


      // Toggle from Polygon PolyLine mode

      function toggleDrawMode(){
        map.clearOverlays();

                drawCoordinates();
      }


    // Delete last Point
    // This function removes the last point from the Polyline and redraws map.

    function deleteLastPoint(){
      map.removeOverlay(polyShape);
      // pop last element of polypoint array 
   polyPoints.pop();
      drawCoordinates();
     }


    // drawCoordinates
    function drawCoordinates(){
             GLog.write(polyPoints.length);
             polyShape = new GPolyline(polyPoints,lineColor,lineWeight,opacity);
      }
      map.clearOverlays();
      map.addOverlay(polyShape);

      // Grab last point of polyPoints to add new marker
      var tmpPoint = polyPoints[polyPoints.length-1];
      tmpPoint+=1;

      logCoordinates(); 
    }

    // logCoordinates - prints out coordinates of global polyPoints array

    function logCoordinates(){

        var header = " " ;
      // print coords header
      document.getElementById("coords").innerHTML =  header;

      // loop to print coords 
      for (var i = 0; i<(polyPoints.length); i++) {
       // alter("The coordinates of latitute and longitude are");

  var lat = polyPoints[i].y;
        var longi = polyPoints[i].x;
        document.getElementById("coords").innerHTML += "Longitude: ,"+longi + ", " + "Latitude:,"+lat + "\n";
      }
  //   }
      document.getElementById("coords").innerHTML +=  footer;
 }


 function showAddress(address) {
   if (geocoder) {
     geocoder.getLatLng(
       address,
       function(point) {
         if (!point) {
           alert(address + " not found");
         } else {
           map.setCenter(point, 13);
           clearMap();
         }
       }
     );
   }
 }


    //]]>
    </script>
</head>
<body text="#FFFFFF" link="#6633CC" onload="load()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
  <h4>Search for desired location </h4>
  <p>
    <input type="text" size="40" name="address" value=" " />
    <input type="submit" value="Search!!" />
  </p>
</form>
</p>

<input type="button" onclick="Marker();" value="Markers"/>
<input type="button" onclick=" mapClick();" value="Lines"/>
<input type="button" onclick="deleteLastPoint();" value="Undo"/>
<input type="button" onclick="clearMap();" value="Clear Map"/>
<br/>
<br/>
<table>
  <tr valign="top">
    <td><div id="map" style="width: 600px; height: 500px"></div></td>
    <td><div id="status" style="width:500px; height: 60px;">
        <textarea id="coords" cols="40" rows="20" readonly="true" onclick="this.select();"> </textarea>

      </div></td>
  </tr>
</table>
</body>
</html>
ansaurus

tags:

views:

answers:

problem with plotting markers

related questions
