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&v=2&sensor=false&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>
The Maps API doesn’t have a function for clearing all markers except one.
What you can do is keep a global array of marker references for the markers that you’re going to want to remove. When you want to remove them, loop through that array removing them one by one.
That might possibly look a bit inefficient, but map.clearOverlays() does exactly the same thing but loops through an internal array of overlays that you don’t have access to.