Javascript is executed twice in an infowindow

509 views
Skip to first unread message

gilles

unread,
Feb 24, 2011, 9:50:09 AM2/24/11
to Google Maps JavaScript API v3
Hello,

I don't know why but the javascript code in a infowindow is executed
twice.

Does anybody know a workaround for this problem ?

Here is my code :

HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript" src="infowindow.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

JS file:
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-34.397, 150.644),
map: map
});
var infowindow = new google.maps.InfoWindow({
content: "test<script>alert('test')</script>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

geoco...@gmail.com

unread,
Feb 24, 2011, 2:33:48 PM2/24/11
to Google Maps JavaScript API v3
On Feb 24, 9:50 am, gilles <thegil...@gmail.com> wrote:
> Hello,
>
> I don't know why but the javascript code in a infowindow is executed
> twice.
>
> Does anybody know a workaround for this problem ?
>
> Here is my code :
>

Have you read the posting guidelines?
READ THIS FIRST: Posting Guidelines
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

Code is not helpful, a web page is.

-- Larry

Michael Geary

unread,
Feb 24, 2011, 3:49:09 PM2/24/11
to google-map...@googlegroups.com
On Thu, Feb 24, 2011 at 11:33 AM, geoco...@gmail.com <geoco...@gmail.com> wrote:

Have you read the posting guidelines?
READ THIS FIRST: Posting Guidelines
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

Code is not helpful, a web page is.

...except when the code *is* helpful. :-)

When I read the OP's message, the problem jumped right out at me. And posting the code made it so simple: I didn't even have to click a link or do a View Source or anything.

Of course you're right that *in general* it's better to post a link. But could we all please not be so trigger-happy on these "read the posting guidelines" replies? In this specific case, a few seconds' glance at the posted code was all it took.

So, OP, what's the problem? Don't use a <script> tag in the HTML you load into an infowindow. Instead, call a function containing whatever code you need at the time you open the infowindow. If needed, listen for an event such as the 'domready' event on your infowindow object, so you can execute the code at the right time.

If that doesn't point you toward a solution, describe what you're trying to do in a bit more detail and we can kick it aroun.

-Mike

Michael Geary

unread,
Feb 24, 2011, 3:52:50 PM2/24/11
to google-map...@googlegroups.com
On Thu, Feb 24, 2011 at 12:49 PM, Michael Geary <m...@mg.to> wrote:
If that doesn't point you toward a solution, describe what you're trying to do in a bit more detail and we can kick it aroun.

Yes, I do know how to spel better than that! :-)

geoco...@gmail.com

unread,
Feb 24, 2011, 4:29:57 PM2/24/11
to Google Maps JavaScript API v3
On Feb 24, 3:49 pm, Michael Geary <m...@mg.to> wrote:
> On Thu, Feb 24, 2011 at 11:33 AM, geocode...@gmail.com <geocode...@gmail.com
>
> > wrote:
>
> > Have you read the posting guidelines?
> > READ THIS FIRST: Posting Guidelines
> >http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e
>
> > Code is not helpful, a web page is.
>
> ...except when the code *is* helpful. :-)
>
> When I read the OP's message, the problem jumped right out at me. And
> posting the code made it so simple: I didn't even have to click a link or do
> a View Source or anything.
>
> Of course you're right that *in general* it's better to post a link. But
> could we all please not be so trigger-happy on these "read the posting
> guidelines" replies? In this specific case, a few seconds' glance at the
> posted code was all it took.

For you perhaps. That was my suspicion, but to check it out would
have required a bunch of work. Glad you could help him without the
link, I couldn't do more than guess.

-- Larry

Esa

unread,
Feb 24, 2011, 5:09:48 PM2/24/11
to Google Maps JavaScript API v3


On Feb 24, 4:50 pm, gilles <thegil...@gmail.com> wrote:

> I don't know why but the javascript code in a infowindow is executed
> twice.
>
> Does anybody know a workaround for this problem ?


Michael presented you a workaround, but about your first question, why
is the code execute twice?

I think it is because how the infowindow DOM is built. The HTML is
appended to <div> and again the <div> is appended to another <div>.
Each time the script gets executed.

I tried with FF3.6 on OS X and I got four alerts.

Michael Geary

unread,
Feb 24, 2011, 5:14:56 PM2/24/11
to google-map...@googlegroups.com
On Feb 24, 3:49 pm, Michael Geary <m...@mg.to> wrote:
>
> Of course you're right that *in general* it's better to post a link. But
> could we all please not be so trigger-happy on these "read the posting
> guidelines" replies? In this specific case, a few seconds' glance at the
> posted code was all it took.

On Thu, Feb 24, 2011 at 1:29 PM, geoco...@gmail.com <geoco...@gmail.com> wrote:

For you perhaps.  That was my suspicion, but to check it out would
have required a bunch of work.  Glad you could help him without the
link, I couldn't do more than guess.

Of course we will see if I've actually helped him or not! :-)

After all, I don't know if that use of the <script> tag is the real reason for the double execution in this particular page. I do think it's an unreliable technique, having tried it myself some time ago with poor results - so it jumped out at me as something to clean up and use either the domready event or some direct JavaScript call. We will see what happens!

-Mike

p.s. Thanks for not taking offense at my comment. :-)

geoco...@gmail.com

unread,
Feb 24, 2011, 5:32:42 PM2/24/11
to Google Maps JavaScript API v3
On Feb 24, 5:14 pm, Michael Geary <m...@mg.to> wrote:
> On Feb 24, 3:49 pm, Michael Geary <m...@mg.to> wrote:
>
>
>
> > > Of course you're right that *in general* it's better to post a link. But
> > > could we all please not be so trigger-happy on these "read the posting
> > > guidelines" replies? In this specific case, a few seconds' glance at the
> > > posted code was all it took.
>
> On Thu, Feb 24, 2011 at 1:29 PM, geocode...@gmail.com <geocode...@gmail.com>
>
>  wrote:
>
> > For you perhaps.  That was my suspicion, but to check it out would
> > have required a bunch of work.  Glad you could help him without the
> > link, I couldn't do more than guess.
>
> Of course we will see if I've actually helped him or not! :-)
>
> After all, I don't know if that use of the <script> tag is the real reason
> for the double execution in this particular page. I do think it's an
> unreliable technique, having tried it myself some time ago with poor results
> - so it jumped out at me as something to clean up and use either the
> domready event or some direct JavaScript call. We will see what happens!
>
> -Mike
>
> p.s. Thanks for not taking offense at my comment. :-)

Mike,
Your knowledge is of great benefit to the group. I certainly
appreciate your input and have learned a lot from you. I try not to
scream "LINK", unless a link would make it so that I could help the
original poster.

Thanks,
Larry

gilles

unread,
Feb 25, 2011, 10:50:43 AM2/25/11
to Google Maps JavaScript API v3
Sorry for the missing link.
Here it is : http://webflore.free.fr/infowindow/

My goal is to use jquery.lightbox plugin inside a infowindow. (http://
leandrovieira.com/projects/jquery/lightbox/)
The content of the infowindow comes from the result of an ajax
request.
This result contains 3 pictures.
After the call of 'infowindow.open', I call a function that enable the
lightbox : $('a.lightbox').lightBox();
The problem is that the total number of picture is 6 instead of 3.

I've checked the HTML rendered with firebug and the result seems good:
there is only 3 <img> tags inside HTML code.

I said the javascript is executed twice because if I put an alert() in
the result of the ajax request, the alert() is displayed twice.

Michael Geary

unread,
Feb 25, 2011, 2:29:32 PM2/25/11
to google-map...@googlegroups.com
Ah, very interesting. So the double alert from JS in your infowindow HTML was a red herring. That alert was something you added to the test code you posted and isn't present in the actual site.

The real problem you're trying to troubleshoot is that you get six images in your lightbox instead of three. That could have the same underlying cause as the double alert - or not.

Do you know how to use Firebug? If not, go get it and learn enough of it to follow along...

Open your infowindow.js in Firebug's Script tab and scroll to this function:

function showInfoWindow() {
$.ajax({
url: 'content.html',
success: function(result) {
infowindow.setContent(result);
infowindow.open(map, marker);
$('a.lightbox').lightBox();
}
});
}

Set a breakpoint on this line:

$('a.lightbox').lightBox();

and click your marker. Your code will stop at the breakpoint.

Now go to the Console tab and enter this into the console input line (>>>):

$('a.lightbox').length

Yes, it's found six 'a.lightbox' elements in the DOM, not the three you expected. Or try it this way:

$('a.lightbox')

If you use Firebug's HTML tab you can find these elements in the DOM, inside a couple of DIVs listed just below your map_canvas DIV.

On a wild hunch - this is only a small step from cargo cult programming - I thought, "infowindow.setContent() accepts either HTML text or a DOM node. What if we give a DOM node instead?". So I ran this line of code in the Firebug console:

result = $('<div>').html(result)[0];

(If you added this to your code, it would be immediately above the infowindow.setContent() line.)

This creates a jQuery object with a single DIV - $('<div>') - then inserts the downloaded HTML into it - .html(result) - and then finally grabs the DIV's DOM node since we need that and not the jQuery object - the [0] at the end. So now result contains a single DOM node with the A elements a children, instead of HTML text.

Then I let execution continue (F8 on Windows or click the > button). Bingo - only three images in the lightbox.

I couldn't tell you that this is the right way to do it and the HTML text was the wrong way - in fact I'd be most curious to hear from anyone on the Maps team why it turned out this way. It was just a hunch that maybe the Maps API code would have to do less work - or at least *different* work - to process the DOM node and wouldn't end up duplicating it.

If you do this, you may as well include the <div> and </div> wrapper as part of the HTML text you download. Then the code would be simpler:

result = $(result)[0];

Or just do it in one line:

infowindow.setContent( $(result)[0] );

-Mike

p.s. If you're still curious about the double alert in the test version, that could have been something else entirely. When you use $.ajax() to download the HTML, jQuery searches through that downloaded code looking for <script> tags and executes them! At least it used to - I haven't checked it lately.

Michael Geary

unread,
Feb 25, 2011, 2:38:48 PM2/25/11
to google-map...@googlegroups.com
Larry, you're too kind. Thanks!

Well it turns out the joke was on me, and my apologies, because you were completely right on the need for the LINK. :-)

The double alert was an artifact of the test code and may have had nothing to do with the actual problem - which turned out to be even more strange and interesting than that...

Keep up the good work,

-Mike

Esa

unread,
Feb 25, 2011, 4:10:50 PM2/25/11
to Google Maps JavaScript API v3
I had a bad theory about that double alert. I tested again in minimal
context and did get just a single alert with infowindow content:

{content: "<scri" + "pt> alert(8) </" + "script>"}

gilles

unread,
Feb 27, 2011, 6:45:06 AM2/27/11
to Google Maps JavaScript API v3
Wonderfull, your hunch was good Mike.
I won't have the idea to insert DOM element instead of HTML text.

I changed the code and it's works perfectly

But the reason of the double execution of the JS code contents in the
result is strange.
There may be there an interaction with jquery + google map api.

Thank you all for your help.

On 25 fév, 20:38, Michael Geary <m...@mg.to> wrote:
> Larry, you're too kind. Thanks!
>
> Well it turns out the joke was on me, and my apologies, because you were
> completely right on the need for the LINK. :-)
>
> The double alert was an artifact of the test code and may have had nothing
> to do with the actual problem - which turned out to be even more strange and
> interesting than that...
>
> Keep up the good work,
>
> -Mike
>
> On Thu, Feb 24, 2011 at 2:32 PM, geocode...@gmail.com
> <geocode...@gmail.com>wrote:
Reply all
Reply to author
Forward
0 new messages