Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Google Maps API V3 - InfoWindow help

    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…


    Code:
    <!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><p style="font-family:tahoma">New Sammys Cowboy Bistro</p><p style="font-family:tahoma">2210 S. Pacific Highway, Talent, OR<br />541-535-2779<br />Geocode 42.228709, -122.755341</p>'],
    
       ['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"><p style="font-family:tahoma">K-R Drive Inn</p></a> <p style="font-family:tahoma">307 John Long Rd, Oakland, OR<br />541-849-2570<br />Geocode 43.535261, -123.294667</p>'],
    
       ['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><p style="font-family:tahoma">Los Delphines Taqueria</p><p style="font-family:tahoma">730 Ivy Street, Junction City, OR<br />541-998-7508<br />Geocode 44.220309, -123.204439</p>'],
    
       ['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"><p style="font-family:tahoma">Le Patissier</p></a><p style="font-family:tahoma">956 NW Circle, Corvallis, OR<br />541-752-1785<br />Geocode 44.587958, -123.259193</p>'],
    
       ['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><p style="font-family:tahoma">Chula Vista</p><p style="font-family:tahoma">3935 State Street SE, Salem, OR<br />503-316-0019<br />Geocode 44.927952, -122.984801</p>'],
    
       ['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"><p style="font-family:tahoma">Mississippi Marketplace</p></a><p style="font-family:tahoma">4233 N. Mississippi, Portland, OR<br />Geocode 45.554341, -122.675826</p>'],
    
       ['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><p style="font-family:tahoma">Com Tam Saigon</p><p style="font-family:tahoma">8435 SE Powell Blvd, Portland, OR<br />503-360-1478<br />Geocode 45.497742, -122.57573</p>'],
    
                ];
    
     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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    I'd start by finding out if the event is even triggered.
    Code:
                    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    When I did this, I created a new InfoWindow for each marker.

    That is, I used code similar to
    Code:
                    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.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    I'm afraid I'd just be doing the same thing you are at this point. Debug, debug, debug...and try various things.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    smithsteve (12-11-2011)

  • #10
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    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

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    ... 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):
    Code:
    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.

  • Users who have thanked xelawho for this post:

    smithsteve (12-11-2011)

  • #13
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


    Quote Originally Posted by xelawho View Post
    ... 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.

  • #14
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Resolved: Google Maps API V3 - InfoWindow help

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

    Thanks all


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •