Ajax - updating markers and infowindows

[dbrb2]

Hello - I have a map (v3) that loads a series of markers, each with an
associated onclick event handler and infowindow.

Currently, the location of all the markers, the type of the marker,
and the infowindow content is all set at page load.

I have been attempting to modify this so that an ajax call (using
prototype) can do this update periodically.


When initially creating my markers, I put each into a global array so
that I can refer to them later:

markerArray[id] = new google.maps.Marker({.....});

Where id is a reference to the marker.

When the ajax call completes, I check the newly received data to see
if the marker needs changing. If it does, I call:

markerArray[id].setImage(testicon);

I have put in an alert above this line, and I reach this point when I
should, but the marker on the map does not change. Is it possible to
dynamically update marker icons like this?

I also try to change the infowindow associated with that marker by
calling:

google.maps.event.addListener(markerArray[id], 'click', function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
infowindow.setContent(str);
infowindow.open(map,marker);
} else {
infowindow.setContent(str);
infowindow.open(map,marker);
}

I'm not sure if I should store all the events in a global array like
the markers, so that I can remove them and replace them as they need
updating? Anyway - I tried both of the above sections in isolation and
am not getting very far with either of them, so any help would be much
appreciated!

Cheers,

Ben

[am63]

Hi,

Have you tried to remove the marker from the map, change its
properties and then add it again to the map ?

markerArray[id].setMap(null);
markerArray[id].setImage(testicon);
markerArray[id].setMap(map);

As for the infowindow, you should first remove all previously set
Onclick events :
google.maps.event.clearListeners(markerArray[id], 'click');

then add again the listener.

[Rossko]

> When the ajax call completes, I check the newly received data to see
> if the marker needs changing. If it does, I call:
> markerArray[id].setImage(testicon);

This will be happening asynchronously, as you are using AJAX ; are you
sure 'id' is still in scope in your AJAX callback etc.?

[dbrb2]

Hello - seems to be working now.

The variable scope was not the problem. I replaced:

markerArray[id].setImage(testicon);

with

var temp = new google.maps.MarkerImage(testicon);
markerArray[id].setIcon(temp);


And all seems to work :-)

My only issue now is the infowindow. I can update the markers onclick
event listner in my ajax callback, so that the next time that marker
is clicked the infowindow content changes. What would be nice is if I
can update the infowindow if it is already being displayed at the time
of the callback.

I tried this by putting a div inside the infowindow and using
getElementByID and innerHTML in the callback, which failed. I'll keep
trying :-)

[dbrb2]

Ok - I've sorted that problem. I was doing getElementByID, but unless
that ID was open, there was no ID to get - so the javascript was
throwing an error. For the moment I've stuck the getelementbyid into a
try/catch statement, so that the getelementbyid updates the window if
it is open, otherwise the event listner is changed as before.

Query though:

I have been changing the event listner by calling:

google.maps.event.addListener(markerArray[id], 'click', function()

{ ....}

This would seem to mean that after a few itterations, every marker
will have many click listners. Is this the case, and if so, any
thoughts as to how I can replace the listner rather than add another?

Cheers

[geoco...@gmail.com]

On Aug 1, 7:25 am, dbrb2 <benjamin.bar...@gmail.com> wrote:
> Ok - I've sorted that problem. I was doing getElementByID, but unless
> that ID was open, there was no ID to get - so the javascript was
> throwing an error. For the moment I've stuck the getelementbyid into a
> try/catch statement, so that the getelementbyid updates the window if
> it is open, otherwise the event listner is changed as before.
>
> Query though:
>
> I have been changing the event listner by calling:
>
> google.maps.event.addListener(markerArray[id], 'click', function()
> { ....}
>
> This would seem to mean that after a few itterations, every marker
> will have many click listners. Is this the case, and if so, any
> thoughts as to how I can replace the listner rather than add another?

Have you tried removeListener?
http://code.google.com/apis/maps/documentation/javascript/reference.html#MapsEventListener

-- Larry

[dbrb2]

I looked at that - but it seems that to use it I would need a
reference to every listner I added - rather than just saying "remove
the listener associated with this marker"

I suppose I could keep a global array of all the listeners I've added
and use that to remove them again...


On Aug 1, 3:35 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

> On Aug 1, 7:25 am, dbrb2 <benjamin.bar...@gmail.com> wrote:
>
>
>
>
>
> > Ok - I've sorted that problem. I was doing getElementByID, but unless
> > that ID was open, there was no ID to get - so the javascript was
> > throwing an error. For the moment I've stuck the getelementbyid into a
> > try/catch statement, so that the getelementbyid updates the window if
> > it is open, otherwise the event listner is changed as before.
>
> > Query though:
>
> > I have been changing the event listner by calling:
>
> > google.maps.event.addListener(markerArray[id], 'click', function()
> > { ....}
>
> > This would seem to mean that after a few itterations, every marker
> > will have many click listners. Is this the case, and if so, any
> > thoughts as to how I can replace the listner rather than add another?
>

> Have you tried removeListener?http://code.google.com/apis/maps/documentation/javascript/reference.h...

[geoco...@gmail.com]

On Aug 1, 11:16 am, dbrb2 <benjamin.bar...@gmail.com> wrote:
> I looked at that - but it seems that to use it I would need a
> reference to every listner I added - rather than just saying "remove
> the listener associated with this marker"

Yes, it does. How do you expect it to know what you mean?

>
> I suppose I could keep a global array of all the listeners I've added
> and use that to remove them again...

Or you could add a property to the marker that includes a reference to
the listener, or you could use function closure.

-- Larry

[dbrb2]

> Yes, it does.  How do you expect it to know what you mean?

Presumably this relationship must exist somewhere, since when I click
on a marker I get the correct infowindow displayed

In the end I used a separate global array, which seems to work -
although storing it as a property of the matker would seem to be a
neater solution.

Thanks,

Ben

On Aug 1, 7:32 pm, "geocode...@gmail.com" <geocode...@gmail.com>

[am63]

Or you could remove all listeners for the click event on the marker :

google.maps.event.clearListeners(markerArray[id], 'click');

[dbrb2]

Out of interest, if I do add click event after click event without
ever using remove, what is actually happening? I still seem to get the
most recently defined infowindow displayed when I click a marker

On Aug 1, 7:32 pm, "geocode...@gmail.com" <geocode...@gmail.com>