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
--
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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
