Google Maps API {removeOverlay(marker);} AND {clearOverlays();}

i have a problem in removing the old markers without removing the central point of the circle "it's also a marker"
the source ::::
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"&gt;&lt;/script&gt;
    <script type="text/javascript">
    //<![CDATA[
    var map;
var container;
var opacity = 0.4;
var circle;
var centerMarker;
var circleUnits;
var circleRadius;
var zoom = 2;
var centerPoint = new GLatLng(40,-100);
var laat;
var lnng;

    function load() {
      if (GBrowserIsCompatible()) {

        map = new GMap2(document.getElementById('map'),{draggableCursor:"crosshair"});
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(40, -100), 4);
      }
    }

function drawCircle() {
    var oUnitsMI = document.getElementById('unitsMI');
    var oUnitsKM = document.getElementById('unitsKM');
    var oRadius = document.getElementById('radiusInput');
    oRadius.value = oRadius.value ? oRadius.value : 500;

    if (oRadius.value.match(/[^\d.]/)) {
     alert("Don't be silly. Enter a number for radius");
     return;
    }
    if (oRadius.value > 9999) {
    }

    circleRadius = oRadius.value;

    if (oUnitsKM.checked) {
     circleUnits = 'KM';
    }
    else {
     circleUnits = 'MI';
    }

    doDrawCircle();
}


function doDrawCircle(){

    if (circle) {
     map.removeOverlay(circle);

    }


    if (centerMarker) {
    //map.removeOverlay(marker);
     map.setCenter(centerMarker.getLatLng())
    }
    else {
     centerMarker = new GMarker(map.getCenter(),{draggable:true});
     GEvent.addListener(centerMarker,'dragend',drawCircle)
     map.addOverlay(centerMarker);
    }

    var center = map.getCenter();

    var bounds = new GLatLngBounds();


    var circlePoints = Array();

    with (Math) {
     if (circleUnits == 'KM') {
      var d = circleRadius/6378.8; // radians
     }
     else { //miles
      var d = circleRadius/3963.189; // radians
     }
laat=center.lat();
lnng=center.lng();
     var lat1 = (PI/180)* center.lat(); // radians
     var lng1 = (PI/180)* center.lng(); // radians

     for (var a = 0 ; a < 361 ; a++ ) {
      var tc = (PI/180)*a;
      var y = asin(sin(lat1)*cos(d)+cos(lat1)*sin(d)*cos(tc));
      var dlng = atan2(sin(tc)*sin(d)*cos(lat1),cos(d)-sin(lat1)*sin(y));
      var x = ((lng1-dlng+PI) % (2*PI)) - PI ; // MOD function
      var point = new GLatLng(parseFloat(y*(180/PI)),parseFloat(x*(180/PI)));
      circlePoints.push(point);
      bounds.extend(point);
     }

     if (d < 1.5678565720686044) {
      circle = new GPolygon(circlePoints, '#000000', 2, 1, '#000000', 0.25); 
     }
     else {
      circle = new GPolygon(circlePoints, '#000000', 2, 1); 
     }
     map.addOverlay(circle); 

     map.setZoom(map.getBoundsZoomLevel(bounds)-2);
     searchLocationsNear(center);
    }
}

   function searchLocationsNear(center) {

     var radius = document.getElementById('radiusInput').value;
     var searchUrl = 'phpsqlsearch_genxml.php?lat=' + laat + '&lng=' + lnng + '&radius=' + radius;
     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
       var markers = xml.documentElement.getElementsByTagName('marker');
     if (marker) {
     map.removeOverlay(marker);

    }

//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


     //map.removeOverlay(marker);   /*how to remove the old markers without removing the central point mark. */
        //map.clearOverlays();


//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

       var sidebar = document.getElementById('sidebar');
       sidebar.innerHTML = '';
       if (markers.length == 0) {
         sidebar.innerHTML = 'No results found.';
         map.setCenter(new GLatLng(40, -100), 4);
         return;
       }

       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
         var name = markers[i].getAttribute('name');
         var address = markers[i].getAttribute('address');
         var distance = parseFloat(markers[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));

         var marker = createMarker(point, name, address);
         map.addOverlay(marker);
         var sidebarEntry = createSidebarEntry(marker, name, address, distance);
         sidebar.appendChild(sidebarEntry);
         bounds.extend(point);
       }
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds-2));
     });
   }

    function createMarker(point, name, address) {
      var marker = new GMarker(point);
      var html = '<b>' + name + '</b> <br/>' + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function createSidebarEntry(marker, name, address, distance) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px'; 
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }
    //]]>
  </script>
  </head>

  <body onload="load()" onunload="GUnload()">
  Radius: <input name="radiusInput" id="radiusInput" size="10" ><br>
       <input type="radio" name="units" id="unitsMI" checked value="MI">Miles<br>
       <input type="radio" name="units" id="unitsKM" value="KM">Kilometers<br><br>
       <input type="submit" value="Draw" onclick="drawCircle()"><br><br>

    <br/>
<div style="width:600px; font-family:Arial, 
sans-serif; font-size:11px; border:1px solid black">
  <table> 
    <tbody> 
      <tr>
        <td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 400px; font-size: 11px; color: #000"></div>

        </td>
        <td> <div id="map" style="overflow: hidden; width:400px; height:400px"></div> </td>

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

tags:

views:

answers:

Google Maps API {removeOverlay(marker);} AND {clearOverlays();}

related questions
