Delete a single marker with a button click in Google Maps API

[Eishita]

I have created something like following -

1. In a Google map I'll place markers by clicking and there will be
a table row created dynamically with each click and will show the lat,
long in that table row.
2. I have put a delete button with each of the table row which
deletes the corresponding row.

What I want -

I want when the row is deleted, the corresponding marker should also
be deleted from the map. I have no clue how can I associate that
specific marker with that delete button.

Any sort of help will be appreciated. A rough look of my page is
available here-

http://aiworker2.usask.ca/stack.html

[geoco...@gmail.com]

My suggestion would be to give each marker as it is created a unique
id. Use that unique id to delete that marker by processing through
the markerArray looking for the marker with that id. The hard part is
putting that unique id in call to deleteRow in the table. I usually
create the entire row in javascript rather than cloning an existing
row, then I can pass whatever arguments to the function called by the
button click listener that I want to.

As an FYI, at least in Chrome all the rows (except the header) have
the id"tr1", all the delete buttons have the id delPOIbutton (the id
on an html element is supposed to be unique).

-- Larry

[Eishita]

Thanks for the response. I have created id for each marker pushed into
the array with a counter and able to manage the deletebutton id with
that marker id as well. But the problem is, when I'm using
setmap(null) or markerArray.pop(marker), it brings out the last marker
of that array instead of the specific marker I want.

You can try out my sample code here -

http://aiworker2.usask.ca/PasswARGUI1/addLevel.html

Regards,
Eishita

On Jun 25, 6:03 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

[Rossko]

> You can try out my sample code here -
>
> http://aiworker2.usask.ca/PasswARGUI1/addLevel.html

<input ... onclick="deleteRow(this)" value="Delete" ..>

What do you think 'this' is in the context of a click on a button? It
isn't any marker.

Use something like the key of your markersArray[] relating to the
particular marker wanted. Then, when building your button while
placing the marker, you could write something like
onclick="deleteRow(3)" into your button

[Eishita]

I'm sorry. Actually I have uploaded the older version of the code.
I'll upload the newer one ASAP. Now I'm just doing some coding on it.

On Jul 6, 2:36 am, Rossko <ros...@culzean.clara.co.uk> wrote:
> > You can try out my sample code here -
>
> >http://aiworker2.usask.ca/PasswARGUI1/addLevel.html
>
>    <input ... onclick="deleteRow(this)" value="Delete" ..>
>
> What do you think 'this' is in the context of aclickon abutton?  It
> isn't anymarker.
>
> Use something like the key of your markersArray[] relating to the
> particularmarkerwanted.  Then, when building yourbuttonwhile

> placing themarker, you could write something like
> onclick="deleteRow(3)" into yourbutton

[Eishita]

Ok... So I have updated the things which is available in the following
link -

http://aiworker2.usask.ca/PasswARGUI1/addLevel.html

Everything is good but the problem is I cannot retrieve the marker's
id from markersArray. I tried to see id of one of the marker by
'alert(markersArray[0].id);' but apparently no alert is visible at
that time.

Thanks,
Eishita

[Nathan Raley]

Why are you creating another marker at the same spot each time a user clicks on the marker?  That doesn't make sense.

Anyway, if you want to remove the marker on the marker click event is instead of calling addMarker create a function to deleteMarker which would iterate through your markersArray and delete the Marker such as:

It would look something like this:
var listener = (google.maps.event.addListener(marker, "click", function () {
                for ( var i = 0; i < markersArray.Length; i++ )
                {
                          if ( markersArray[i].id == marker.id )
                          {
                                  markersArray[i].setMap(null);
                                  markersArray.splice(i, 1);
                          }
                }
            }));

I didn't check to make sure you were keeping track of the listeners for all your markers.  If you aren't you need to as you will have a potential memory leak as the listeners would never be getting deleted, you would use a similar method of adding and removing the listeners as you do for handling the markers.

If you have any questions feel free to ask.

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Eishita]

Oh.. I have solved it :)

On Jul 6, 1:37 pm, Eishita <eze...@gmail.com> wrote:
> Ok... So I have updated the things which is available in the following
> link -
>
> http://aiworker2.usask.ca/PasswARGUI1/addLevel.html
>

> Everything is good but the problem is I cannot retrieve themarker's