Getting InfoWindow content on closeclick

[Hadyn Dickson]

Hi everyone, this is probably straight forward but I cant seem to get it working.

I have an infowindow on my map which is attached to a marker and the infowindow contains only the following html <input type="text" value="before">
I then have the following javascript in my head

    google.maps.event.addListener(infowindow, 'closeclick', function() {
      alert(infowindow.content);
    });

If I click my marker and change the value of the input field to "after" and click the close button on the infowindow I get the alert but it says <input type="text" value="before"> when I should have my after text in it.

What am I doing wrong, its driving me crazy!

Thanks

[meetamit]

Try alerting infowindow.getContent()

[Hadyn Dickson]

Tried that but I get the same result.

[Chris Broadfoot]

... have you got a link to show us what you've tried?

I tried something similar over here and as expected, it worked fine.

Chris

--
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.

--
http://twitter.com/broady

[Hadyn Dickson]

http://220.233.5.108:8081/viewmap.php?m=1&mode=map

On Jun 2, 11:05 pm, Chris Broadfoot <c...@google.com> wrote:
> ... have you got a link to show us what you've tried?
>
> I tried something similar over here and as expected, it worked fine.
>
> Chris
>

[Hadyn Dickson]

This might have something to do with closures, which I am only just
learning about, so if it does can someone shed some light as i would
like to understand what im doing wrong.

Basically im loading a map with some markers on it which come out of a
database and they have some html associated with them which is
basically an update form. The infowindow /s (not sure if i have one or
many in the way ive coded it ) load using the marker.html. When I
close the infowindow i want to save the form as it currently is back
to the html property of the marker that the infowindow is associated
with.

My problem is i cant get the html of the infowindow as it currently
stands when i hit the close button.

Dont be misguided, my problem is not saving the html back to the
marker html property, i can do that just fine manually and the
infowindow will reopen with my saved changes. My problem is getting
the form as it stands in the infowindow when i close the infowindow.

Hope that makes sense.

On Jun 2, 11:05 pm, Chris Broadfoot <c...@google.com> wrote:

> ... have you got a link to show us what you've tried?
>
> I tried something similar over here and as expected, it worked fine.
>
> Chris
>

[Rossko]

> My problem is i cant get the html of the infowindow as it currently
> stands when i hit the close button.

Why not do it the conventional way, give your form and/or elelements
some ID and read the user-set values by script.
I'm not at all sure the infowindow object content would be expected to
reflect user-made changes

[Hadyn Dickson]

Ok I think after reading some articles about js closures and v3
infowindows etc I have come up with my own solution, not sure how
elegant it really is, so If someone has a better idea then feel free
to contribute.

Just a recap, what I would like to do is so multiple markers each with
an infowindow (multiple infowindows) which display a form that can be
updated but the form must retain its state/code changes between
opening an closing infowindows. (So people can half fill out a form
and then go click on another marker fill that form out etc go back to
the first marker and it still contain the form details that they had
half entered.)

I thought I could do this:
function initialize()
{
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new
google.maps.Map(document.getElementById("map_canvas"),myOptions);

var infowindow = new google.maps.InfoWindow({
content: ''
});

SERVER SIDE LOOP
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
html: '<input type="text" value="before" />'
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,marker);
});
END SERVER SIDE LOOP
}

(NB: Javascript is great because you can make up properties that dont
exist for objects like marker.html above.)

But that resulted obviously in the infowindow being reassigned the
marker.html every time it opened (thus resetting its state)
So I figured I could assign the current infowindows html back to the
marker.html property when the infowindow is closed, but this failed
also because I couldnt find a way to get hold of the current
infowindows content. I tried getContent() and i tried the content
property of the infowindow object, but it just contained the original
state of the content when the infowindow was opened.

Everywhere I looked on the net people say you can do multiple
infowindows in v3 and propose to show you how, but then tell you to do
it with one infowindow and just set the content each time its clicked.
So I havent actually seen an example of multiple instances of
infowindows attached to markers in v3(provide one if you like) In any
case the people were doing multiple infowindows but not changing the
content of them, so it works great for a static content in the
infowindow but nothing easy where you want to update a form or have
dynamic content in an infowindow.

Then I read the V3 Api reference again, and you can set the content to
a dom node, which I was unsure about and I couldnt see any examples in
googles code to do this so I did another search on google and
basically you just use document.getElementById() to return a reference
to the dom node. I didnt really want to add the dom nodes to my
document and hide them I just wanted to have it all in memory, but I
couldnt see any other way to do it. So I tried referencing the dom
node using:

function initialize()
{
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new
google.maps.Map(document.getElementById("map_canvas"),myOptions);


SERVER SIDE LOOP
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
html: '<input type="text" value="before" />'
});

var infowindow = new google.maps.InfoWindow({
content: document.getElementById('mymarkerdomid')
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,marker);
});
END SERVER SIDE LOOP

}

I figured if marker was referenced inside the addlistener then
infowindow should be able to be aswell because it had just been
declared. I figured out later that marker can be referenced because
its being passed to the addlistener which has a closure (thats why you
can reference "this" within it. What actually happened was that only
the last infowindow object created was referenced by all the markers.

By this time I had also figured out that using a dom node worked
nicely to preserve the state of the form, but how would I get the
infowindow to reference its dom node. I figured..hell if the marker is
in the closure maybe i can get the infowindow in the closure too which
would hold the reference to the dom object (that would create many
infowindows in memory each with thier own reference to the dom node),
but then I thought no I cant figure out how to do that. (someone else
can give me the answer here if you want so I know for next time) So I
figured well why not attach the ref to the dom node to the marker and
then reference that as I did with this.html. Which left me with this
code:

function initialize()
{
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new
google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow({});

SERVER SIDE LOOP
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
myMarkersDomElementReference:
document.getElementById('mymarkerdomid')
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.myMarkersDomElementReference);
infowindow.open(map,this);
});
END SERVER SIDE LOOP

}

This turned out nicely, so I can update the form and its state is
retained between infowindows, and there is only 1 infowindow in
memory.

Let me know if you have a better idea or cleaner code.

Cheers