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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<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>