Marker removal

[shaevtchac]

Hi

I'd like to remove a marker from the map using 'delete' link on an
infowindow. I went through the api reference and found out that I need
to set the marker's map to null, but how do I get the marker that has
infowindow currently opened?

[shaevtchac]

Ok - some more info. I was going through phpsqlajax example published
in here: http://code.google.com/intl/pl/apis/maps/articles/phpsqlajax_v3.html
everything works fine, except the 'remove' link I've added by myself.
It looks like this:

Loading marker data and creating markers and infowindows:

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(lat,lng),
zoom: 14,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = parseXml(data);
var markers = xml.documentElement.getElementsByTagName
("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var id = markers[i].getAttribute("id");
var user = markers[i].getAttribute("user");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html + "<br/> <a href=
\"javascript:delMarker(" + id + "," +
marker + "," + infoWindow + ")\">Remove</a>"); //<--- PROBLEM HERE
- Link does not work - can I call JS function like this?
}
});
}

used functions:

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.set_content(html);
infoWindow.open(map, marker);
});
}
function delMarker(id, marker, infoWindow) {
var url = "phpsqlinfo_delrow.php?id=" + id;
infoWindow.close();
marker.setMap(null);
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
document.getElementById("message").innerHTML = "Location
deleted.";
}
});
}


I don't get any error msg from firebug debugger - just nothing happens
on link clicking. Can anyone help please?

[Esa]

Please provide a link to a live page.

You say that the "Link does not work". I put my compiler hat on and
saw that the info window does not exist at all.

var infoWindow = new google.maps.InfoWindow;

Again. Please provide a link.

[shaevtchac]

There you are:

http://www.drazdzewo.pl/mapa_edycja1.html

Please don't touch any other markers but the ones with default icon
labeled TEST, TEST2. Database access does work correctly. I have made
a
backup though.

IE debugger says: ']' expected line 1 col 23 when I click 'remove'
link, which does not make sense at all.

I'd be happy to see a simple example of a marker with an infoWindow,
that has working :) 'remove' link. Then I could fix my map.

[Esa]

Construct the info window with

new google.maps.InfoWindow();

not

new google.maps.InfoWindow;

"javascript:" protocol in a link refers to global scope. So delMarker
() and its parameters: id, marker and infoWindow should be declared as
global variables.

[shaevtchac]

Ok. I've made them global:

function load() {
var map = new google.maps.Map(document.getElementById("map"), {

center: new google.maps.LatLng(53.089504, 21.124120),

zoom: 14,
mapTypeId: 'roadmap'
});

infoWindow = new google.maps.InfoWindow();

// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = parseXml(data);
var markers = xml.documentElement.getElementsByTagName
("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");

id = markers[i].getAttribute("id");
var user = markers[i].getAttribute("user");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};

marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html + "<br/> <a href=
\"javascript:delMarker(" + id + "," +
marker + "," + infoWindow + ")\">Remove</a>");
}

});
}

but it's still the same. I think It's a logical issue. I did some more
debugging to find out that marker and infoWindow objects are empty
once load() finishes it's job, so delMarker() references to an empty
objects.
What do I do now? Shall I create another array to store references to
all markers on the map? Or maybe there is any way to get the reference
to a last clicked marker and opened infoWindow?

[Esa]

Now you can see on status bar, what is the link calling:

delMarker(106,[object Object],[object Object])

You cannot concantenate objects to a string. But I think you don't
have to pass any objects to the delMarker() function. Just 'id', if
you push your markers to an array. There is only one infoWindow, so
there is no need to pass that as a parameter.

function delMarker(id) {

var url = "phpsqlinfo_delrow.php?id=" + id;
infoWindow.close();

markers[id].setMap(null);

Then your link string simplifies to:

"<a href=\"javascript:delMarker(" + id + ")\">Remove</a>"

[shaevtchac]

Finally we got it to work. Thank you Esa.

Working function looks like this:

function delMarker(rowid, markerid) {
var url = "phpsqlinfo_delrow.php?id=" + rowid;
infoWindow.close();
markersMap[markerid].setMap(null);

downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
document.getElementById("message").innerHTML = "Location
deleted.";
}
});
}

Markers[] stores xml marker data taken from database (now markersXML
[] ), so I pushed all marker objects to global markersMap[] array and
used link "<br/> <a href=\"javascript:delMarker(" + id +"," + i + ")
\">Remove</a>"; to call the function.