Google Maps api v3 - remove marker before adding new one from click event
Im using the following code and trying to figure out how to add a function that I can call will remove the previous marker before adding a new one. the map uses onclick events to add a marker where the user clicks ... basically I only want one marker on the map at any given time.
I've searched and tried almost everything, but must be wrong somehow ... please quickly give the code a quick glance and let me know how this will be achieved.
thanks a million!
<script>
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(document.getElementById('field_lat').value,document.getElementById('field_lng').value),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
// SET MY UI SEARCH TEXT FIELDS TO THE LAT AND LNG
document.getElementById('field_lat').value = e.latLng.lat();
document.getElementById('field_lng').value = e.latLng.lng();
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
//Marker.setMap(null);
var Marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
$("#listbox ul").empty();
docall();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
the display in the body looks like this
<div id="map_canvas" style="width: 400px; height: 400px;"></div>
I tried to get this or something similar to work, but no cube ...
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
source to share
Just do the following:
I am. Declare a global variable:
var markersArray = [];
II. Define a function:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
}
OR
google.maps.Map.prototype.clearOverlays = function() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
}
III. Push the markers into "markerArray" before calling the following:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Call the function where needed.
clearOverlays();
OR
map.clearOverlays();
What is it!
Hope it helps.
source to share
Just remove the previous marker if there is one.
var Marker;
function placeMarker(position, map) {
if(typeof marker!= 'undefined')
marker.setMap(null);
var Marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
$("#listbox ul").empty();
docall();
}
source to share
You can set the marker on the first click and then just change the position on subsequent clicks.
var marker;
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
if (marker == null) {
marker = new google.maps.Marker({
position: location,
map: map
});
} else {
marker.setPosition(location);
}
}
source to share