I'm having a problem with my markers in a Google Maps web-app. I can add markers, but I can't remove them. I have been looking for several days for a solution but the standard advice for v3 seems to be:
marker.setMap(null);
The problem is that this seems to be pletely ineffective in my code. Here is a sample of a function ran on start-up. It gets the current location quickly at low accuracy. A later function which takes longer to plete should then remove the marker and place a new marker in the more accurate location. Problem is, I cannot remove the marker once placed.
function geoLocCheckAndFastLatLng(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
//get current position
pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
//place low accuracy marker
placeMarker(pos,window.meIconMediumAccuracy,window.myPositionMarker);
//and center map
window.map.setCenter(pos);
window.map.setZoom(14);
window.myPositionMarker.setMap(null);
});
}else{
alert("Sorry - You're Browser Doesn't Support Geolocation.\nChange To Google-Chrome Or Dolphin To Use This App");
}
}
So the above function in theory gets the location, places a marker then removes that same marker. But the marker persists! Can anybody help? I've only got a couple of days to finish and I can't understand where I'm going wrong.
Here is the place marker function:
function placeMarker(location, iconType, marker) {
//alert(window.markers.length);
//if the marker is undefined it means it needs to be created form scratch
//using the iconType and location provided in the function call
if(marker === undefined){
marker = new google.maps.Marker(
{
position: location,
map: window.map,
icon: iconType,
});
//and add a click listener
google.maps.event.addListener(marker, 'click', function()
{
alert("Marker location:\n" + pos);
});
//add to markers array
window.markers.push(marker);
}else{
marker.setPosition(location);
}
}
I'm having a problem with my markers in a Google Maps web-app. I can add markers, but I can't remove them. I have been looking for several days for a solution but the standard advice for v3 seems to be:
marker.setMap(null);
The problem is that this seems to be pletely ineffective in my code. Here is a sample of a function ran on start-up. It gets the current location quickly at low accuracy. A later function which takes longer to plete should then remove the marker and place a new marker in the more accurate location. Problem is, I cannot remove the marker once placed.
function geoLocCheckAndFastLatLng(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
//get current position
pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
//place low accuracy marker
placeMarker(pos,window.meIconMediumAccuracy,window.myPositionMarker);
//and center map
window.map.setCenter(pos);
window.map.setZoom(14);
window.myPositionMarker.setMap(null);
});
}else{
alert("Sorry - You're Browser Doesn't Support Geolocation.\nChange To Google-Chrome Or Dolphin To Use This App");
}
}
So the above function in theory gets the location, places a marker then removes that same marker. But the marker persists! Can anybody help? I've only got a couple of days to finish and I can't understand where I'm going wrong.
Here is the place marker function:
function placeMarker(location, iconType, marker) {
//alert(window.markers.length);
//if the marker is undefined it means it needs to be created form scratch
//using the iconType and location provided in the function call
if(marker === undefined){
marker = new google.maps.Marker(
{
position: location,
map: window.map,
icon: iconType,
});
//and add a click listener
google.maps.event.addListener(marker, 'click', function()
{
alert("Marker location:\n" + pos);
});
//add to markers array
window.markers.push(marker);
}else{
marker.setPosition(location);
}
}
- What does the placeMarker function look like? – geocodezip Commented Jun 16, 2014 at 22:33
-
What do you think this
window.myPositionMarker.setMap(null);references? Looks to me like it should bewindow.markers[i].setMap(null);where "i" is the index of the particular marker you want to hide (which would bewindow.markers.length-1, the last marker added, for your original example) – geocodezip Commented Jun 16, 2014 at 23:03 - Thanks man - you're absolutely right. Though I don't really understand why I can't reference the marker as window.myPositionMarker (it's been declared as global) when i refer to it as window.markers[0] it is removed as expected. Thanks for the help :) – user3535074 Commented Jun 16, 2014 at 23:14
4 Answers
Reset to default 2I think the root cause of your problem is you're not actually addressing the object you think you are with the .setMap(null) call.
Try returning your marker from placeMarker() and then assign it to a var and call the setMap(null) on that.
If you declare window.myPositionMarker = marker after you initialize the google.maps.marker() it will work as expected.
Seems your answer was already resolved, but for others struggling with this issue, be forewarned -
my markers would not delete after I set custom properties on them.
For example
// can create a marker and add it to map OK
marker = new new google.maps.Marker({...})
marker.setMap(map)
// But don't set a custom property on the marker
marker.foo = "bar"
marker.setMap(null) // wont remove the marker
When a new marker was created, it wasn't able to be referenced by its global name myPositionMarker. However during the process of creating the marker, its placed in an array. If I refer to the marker as
window.markers[0].setMap(null);
it is removed from the map as expected. Thanks a lot for your help!
In my case I used Google's MarkerClusterer and had our own reference to the marker object and this was preventing it from being removed.
Once I removed our own reference, the markers were cleaned up by the Clusterer itself.