Google Maps API V3 - InfoWindow help

smithsteve

12-08-2011, 06:44 PM

Hi everyone,

I am a new poster and new to Google maps/ JS programming (altho I’ve got an extensive programming background).

I’ve been working on building a map and have a problem I suspect is in how I build an Infowindow. The example works perfectly on Firefox or Chrome, but not in IE. In Explorer the map is built, markers are set and a mouse rollover event happens to identify each, but the Infowindow doesn’t show when a marker is clicked.

Can anyone please help me? I've done extensive searching and have yet to find the answer, so I'd would be very appreciative for any help…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

<title>Oregon Foodie Map</title>

<style type="text/css">

html { height: 500px; width: 600px }

body { height: 500px; margin: 0; padding: 0 }

#map_canvas { height: 500px; width: 600px ;

border: 5px solid #333;

}

</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

var sites = [

['New Sammys Cowboy Bistro', 42.228709 , -122.755341, 1, '<a href="http://www.flickr.com/photos/70837219@N03/6416889035/" title="NSCB by Steven James Smith, on Flickr"><img src="http://farm8.staticflickr.com/7018/6416889035_531bfe2f4b_s.jpg" width="125" height="125" alt="NSCB1"></a>New Sammys Cowboy Bistro2210 S. Pacific Highway, Talent, OR 541-535-2779 Geocode 42.228709, -122.755341'],

['K-R Drive Inn', 43.535261 , -123.294667, 1, '<a href="http://www.flickr.com/photos/fiveforefun/3523459722/" title="Ice cream break by fiveforefun, on Flickr"><img src="http://farm4.staticflickr.com/3564/3523459722_5f1532578e_s.jpg" width="125" height="125" alt="Ice cream break"></a> <a href="http://krdriveinn.com/" target="_blank">K-R Drive Inn</a> 307 John Long Rd, Oakland, OR 541-849-2570 Geocode 43.535261, -123.294667'],

['Los Delphines', 44.220309 , -123.204439, 1, '<a href="http://www.flickr.com/photos/70837219@N03/6416169749/" title="Los Delfines by Steven James Smith, on Flickr"><img src="http://farm8.staticflickr.com/7154/6416169749_794190db49_s.jpg" width="125" height="125" alt="Los Delfines"></a>Los Delphines Taqueria730 Ivy Street, Junction City, OR 541-998-7508 Geocode 44.220309, -123.204439'],

['Le Patissier', 44.587958 , -123.259193, 1,'<a href="http://www.flickr.com/photos/70837219@N03/6416169925/" title="Le Patissier by Steven James Smith, on Flickr"><img src="http://farm7.staticflickr.com/6059/6416169925_19653c5ed0_s.jpg" width="125" height="125" alt="Le Patissier"></a> <a href="http://www.lepatissier.net/" target="_blank">Le Patissier</a>956 NW Circle, Corvallis, OR 541-752-1785 Geocode 44.587958, -123.259193'],

['Chula Vista', 44.927952 , -122.984801, 1,'<a href="http://www.flickr.com/photos/70837219@N03/6443010235/" title="Chula Vista by Steven James Smith, on Flickr"><img src="http://farm8.staticflickr.com/7015/6443010235_c6458fe655_s.jpg" width="125" height="125" alt="Chula Vista"></a>Chula Vista3935 State Street SE, Salem, OR 503-316-0019 Geocode 44.927952, -122.984801'],

['Mississippi Marketplace', 45.554341 , -122.675826, 2, '<a href="http://www.flickr.com/photos/70837219@N03/6420544905/" title="Mississippi Marketplace by Steven James Smith, on Flickr"><img src="http://farm7.staticflickr.com/6096/6420544905_e2ff57ffa7_s.jpg" width="125" height="125" alt="Mississippi Marketplace"></a> <a href="http://www.missmarketplace.com/" target="_blank">Mississippi Marketplace</a>4233 N. Mississippi, Portland, OR Geocode 45.554341, -122.675826'],

['Com Tam Saigon', 45.497742 , -122.57573, 1, '<a href="http://www.flickr.com/photos/70837219@N03/6454546069/" title="Com Tam Saigon by Steven James Smith, on Flickr"><img src="http://farm8.staticflickr.com/7007/6454546069_8e8a923056_s.jpg" width="125" height="125" alt="Com Tam Saigon"></a>Com Tam Saigon8435 SE Powell Blvd, Portland, OR 503-360-1478 Geocode 45.497742, -122.57573'],

];

var infowindow = null;

/*

This function sets up the map

*/

function initialize() {

var centerMap = new google.maps.LatLng(43.999999,-123.060525);

var myOptions = {
zoom: 7 ,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

setMarkers(map, sites);

infowindow = new google.maps.InfoWindow({

content: "Loading..."
});

}

/*

This function sets the markers (array)

*/

function setMarkers(map, markers) {

for (var i = 0; i < markers.length; i++) {
var site = markers[i];
var siteLatLng = new google.maps.LatLng(site[1], site[2]);

var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4],

// Markers drop on the map

animation: google.maps.Animation.DROP
});

google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}

</script>

</head>

<body onload="initialize()">

<div id="map_canvas"></div>

</body>

</html>

Old Pedant

12-08-2011, 09:41 PM

I'd start by finding out if the event is even triggered.

google.maps.event.addListener(marker, "click", function () {
alert("click event triggered");
infowindow.setContent(this.html);
infowindow.open(map, this);
});

If it's not, then you need to figure out why not.
If it is, then you need to figure out why the infowindow isn't showing.

Old Pedant

12-08-2011, 09:45 PM

When I did this, I created a new InfoWindow for each marker.

That is, I used code similar to
google.maps.event.addListener(marker, "click", function () {
var w = new InfoWindow( { content: this.html; } );
w.open(map,this);
});

(Wasn't quite like that, as I actually create the info windows at the same time I created the markers and then just opened them via click...but that's the general idea.)

smithsteve

12-09-2011, 01:44 AM

Thanks for the quick response Old Pedant. I tried each tip sequentially.

The first one's a valuable and simple debugging tool I'll throw in my toolbelt. The infobubble it reports from told me the click event was triggered.

The second tip didn't work at all (built no map, just put a border around the canvas on IE). Inspecting that code w/a novice's eyes leads me to believe it should work, but my attempts using it have consistently failed.

My newbie belief is that the code builds everything appropriately for Chrome/FF but IE wants something declared more explicitly (for instance I had to declare the map canvas size for IE whereas Chrome/FF seemed to inherit them from an HTML statement earlier in the code). Something like that.

I'll continue to play with your suggested code and see what happens.

Meanwhile, if you have other ideas please let me know. Again, thanks...

Steve

Old Pedant

12-09-2011, 03:57 AM

I'm afraid I'd just be doing the same thing you are at this point. Debug, debug, debug...and try various things.

smithsteve

12-09-2011, 03:47 PM

I’m totally new to debugging JS scripts. Basically I'm just replacing/modifying code and then re-running. I’ve read about Firebug, but that’s on FF and the script works fine there and in Chrome (just not IE). Is there something similar for IE?

Old Pedant

12-09-2011, 08:27 PM

Which version of MSIE? In MSIE 9, you can click on "Tools" menu and then "Developer Tools" or just hit F12.

In prior versions, you have to use a separate debugger. MS has a "script debugger", which I think you can download. Or you can use any version of Visual Studio, including the free Web Developer Express (@ msdn.microsoft.com/express).

More than likely the code will work in MSIE 9, as it's much more compatible than earlier versions. So you may be stuck using a separate debugger.

smithsteve

12-09-2011, 09:41 PM

Hi Old Pedant

An update - on IE the code hangs in the infowindow.setContent(this.html) statement on IE, not Chrome/FF.

Generate any ideas?

Thanks...Steve :)

Old Pedant

12-10-2011, 02:39 AM

More debugging.

For starters, put in alert(this.html) just before the setConent. If that works, then change setContent to something like setContent("this is a test") to see if the problem is what the content is.

You could also try alerting all the properties of infoWindow that Google documents to see if you see any differences.

smithsteve

12-10-2011, 05:29 PM

What I eventually ended up doing is relacing the infowindow.setcontent with an explicit infowindow build. Apparently IE choked on infowindow.setcontent because it works.

Now it works In all browsers I've tried (chrome, ff, ie), but when an infowindow is up and another marker is clicked, the original infowindow remains. The old code didn't have that behavior.

So I'm looking for a way to close the first window when a second opens.

Any ideas?

xelawho

12-10-2011, 07:02 PM

that's the way that the API is designed. rather than creating a separate infowindow for every marker, it's recommended that you create one infowindow and change its contents and location as needs be. If you can give a link to your current map, maybe we can see a simple way to do that

xelawho

12-10-2011, 08:35 PM

... but I think I may have figured out what was the problem with your original code, and it's one of the most schoolmarmishest quirks in IE, but it pops up again and again.

I couldn't reproduce the original problem (IE7 loaded the markers and showed the infowindow, but popped an error on this line):
var siteLatLng = new google.maps.LatLng(site[1], site[2]);

saying "1 is undefined"

which is silly of course, until you look at your sites array.

right at the end there, in your code you have a comma after the Com Tam Saigon object. But the array ends there. So what smart browsers do is they just go, oh well, big deal there's nothing else so this must be the end of the array. But IE says "well if there's a comma that means there must be something else" and then it looks for that something else and doesn't find anything and then it gets all confused and has to go have a little lie down and a cup of hot milk.

I would suggest using the code you originally posted and removing the "dangling comma" from your sites array. It's error-free in IE7, at least, (aside from being good coding practice) and avoids the multiple infowindow problem.

smithsteve

12-11-2011, 05:54 PM

Thank you so much xelaho - that took care of the problem in IE 6 and FF 8 :) Later on another machine I'll try it w/IE 8 and Chrome before I list this "resolved".

Now I can relax w/a lie down and a cup of hot milk...

Steve

... but I think I may have figured out what was the problem with your original code, and it's one of the most schoolmarmishest quirks in IE, but it pops up again and again.
.
.
.
I would suggest using the code you originally posted and removing the "dangling comma" from your sites array. It's error-free in IE7, at least, (aside from being good coding practice) and avoids the multiple infowindow problem.

smithsteve

12-11-2011, 08:53 PM

Confirmed working on IE (6 and 8), FF 8, and Chrome 15. On to Safari ;)

Thanks all :thumbsup: