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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Google Maps API V3 - InfoWindow help

    Hi guys, I am a new poster and new to google maps.

    I have been working on geocoding and I have a problem, the example below works fine, all rollovers and icons work perfectly.

    However, the info window will only display for one point. I am assuming I have this line of code in the wrong place.
    new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});

    Can anyone please help me? I would be so appriciative.


    Code:
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    
    /**
     * Data for the markers consisting of a name, a LatLng and a zIndex for
     * the order in which these markers should display on top of each
     * other.
     */
    var MarkersArray = [
      ['Oceans Eleven Casino', 33.199931,-117.368917, 4, '<div id="">Oceans Eleven Casino - text</div>', 'images/search.chips.small.png'],
      ['Pala Casino & Resort', 33.359418,-117.10583, 5, '<div id="content">Pala Casino & Resort - text</div>', 'images/search.chips.png'],
      ['Casino Pauma', 33.333271,-116.990626, 3, '<div id="content">Casino Pauma - text</div>', 'images/search.chips.small.png'],
      ['Lucky Lady Casino', 32.75844,-117.075513, 2, '<div id="content">Lucky Lady Casino - text</div>', 'images/search.chips.small.png'],
      ['Palomar Club', 32.75542,-117.13433, 1, 'Palomar Club - text', 'images/search.chips.png']
    ];
    
    
    function setMarkers(map, locations) {
      // Add markers to the map
      for (var i = 0; i < locations.length; i++) {
    
        var MarkersArray = locations[i];
      // Marker sizes are expressed as a Size of X,Y
      var image = new google.maps.MarkerImage(MarkersArray[5],
          // This marker is 20 pixels wide by 32 pixels tall.
          new google.maps.Size(60, 50),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at 0,32.
          new google.maps.Point(0, 33));
      var shadow = new google.maps.MarkerImage(MarkersArray[5],
          // The shadow image is larger in the horizontal dimension
          // while the position and offset are the same as for the main image.
          new google.maps.Size(75, 60),
          new google.maps.Point(0,0),
          new google.maps.Point(0, 33));
          // Shapes define the clickable region of the icon.
      var shape = {
          coord: [0,0,1,54,59,54,59,0],
          type: 'poly'
      };
    	
        var infowindow = new google.maps.InfoWindow({content: MarkersArray[4]});
    			
    	
        var myLatLng = new google.maps.LatLng(MarkersArray[1], MarkersArray[2]);
        var marker = new google.maps.Marker({position: myLatLng,map: map,shadow: shadow,icon: image,shape: shape,title: MarkersArray[0],zIndex: MarkersArray[3]});
      }
      	new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
    }
    
    
    
    function initialize() {
      var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(32.75542,-117.13433),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
      setMarkers(map, MarkersArray);
    }
    </script>
    Last edited by flashdave; 06-28-2010 at 12:49 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    This is the culprit:
    Code:
        new google.maps.event.addListener(
             marker, 
             'click', 
             function() {infowindow.open(map,marker);}
       );
    }
    When the click event finally happens, eons (in computer time) from the time you created the markers, *WHICH* marker does that variable refer to???

    You only have one variable named marker, which you assign to multiple times in the process of creating all those markers, so of course the only thing that marker *can* refer to is whichever one was last created using that variable.

    You need to have the function refer to the same thing that was clicked on. So some variation on this seems to be called for.
    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
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the up floor is right ,you only have one variable named marker because your "new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
    "
    is not include the for() function. and your for() function create more than one point ,but only one Listener on a marker.

    I am a Chinese programmer,and this is my frist answer on that website. I am very pleased to find out a question which I can resourve ,hehe

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks guys, I think I get it. So basically I need to define something like marker[i]?

    Can you show me an example? in my example??

    PLEASE? thanks in advance.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I'm not sure, but why can't you just use this ???

    Code:
      	new google.maps.event.addListener(
                    marker, 'click', function() {infowindow.open(map,this);}
                 );
    Untested.

    I *did* use an array in 2.0 API, and then did a lookup in the array. But I think that's clumsy and if you can avoid it, do so.
    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:

    flashdave (06-28-2010)

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    WOW, that does work, well almost.

    Now each point shows a infowindow when clicked but they all show the same information in the window, instead of their individual information.

    In other words the individual infowindows all show the information for the last result.

    so I am guessing that I need to

    maybe do something here?

    Code:
    new google.maps.event.addListener(
                    marker, 'click', function() {infowindow.open(map,this);}
                 );
    Last edited by flashdave; 06-28-2010 at 10:39 PM. Reason: add code

  • #7
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    this is driving me nuts. I am soooo close.. Any suggestions?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oh, I see. Didn't notice how you were creating the infoWindow object. DOH on me.

    I was confused by your having two variables name MarkersArray when one is for all the markers and the other is for only one marker. Ugh. Would have been cleaner to use different names, but okay...

    Well, maybe I wasn't so dumb after all, using an array as I did.

    If you added another element to the sub-arrays in your MarkersArray, you'd almost be there:
    Code:
    var MarkersArray = [
      [ 'Oceans Eleven Casino', 33.199931,-117.368917, 4, 
        '<div id="">Oceans Eleven Casino - text</div>', 
        'images/search.chips.small.png',
        null],
      ... ditto for each other ...
    And then when you create the marker, store a reference to it back in there:
    Code:
        var marker = new google.maps.Marker(
              {position: myLatLng,map: map,shadow: shadow,icon: image,
               shape: shape,title: MarkersArray[0],zIndex: MarkersArray[3]}
              );
        MarkersArray[6] = marker; // reference to this new marker
        // and invoke a new function for the listener:
        google.maps.event.addListener(marker, 'click', function() { getInfowindow(this); }
    
    ...
    
    function getInfoWindow(which)
    {
        for ( var m = 0; m < MarkersArray.length; ++m )
        {
            var markerInfo = MarkersArray[m];
            if ( markerInfo[6] == which ) 
            {
                var infowindow = new google.maps.InfoWindow({content: markerInfo[4]});
                infoWindow.open( map, which );
                return;
            }
        }
    }
    What do you think?
    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:

    flashdave (06-29-2010)

  • #9
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hey I really appreciate your help. I know we are close. Now it no longer shows the info window at all. here is what i got.

    Feel free to make ANY changes.
    THANKS IN ADVANCE

    Dave

    Code:
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    
    /**
     * Data for the markers consisting of a name, a LatLng and a zIndex for
     * the order in which these markers should display on top of each
     * other.
     */
    var MarkersArray = [
      ['Oceans Eleven Casino', 33.199931,-117.368917, 4, '<div id="">Oceans Eleven Casino - text</div>', 'images/search.chips.small.png', null],
      ['Pala Casino & Resort', 33.359418,-117.10583, 5, '<div id="content">Pala Casino & Resort - text</div>', 'images/search.chips.png', null],
      ['Casino Pauma', 33.333271,-116.990626, 3, '<div id="content">Casino Pauma - text</div>', 'images/search.chips.small.png', null],
      ['Lucky Lady Casino', 32.75844,-117.075513, 2, '<div id="content">Lucky Lady Casino - text</div>', 'images/search.chips.small.png', null],
      ['Palomar Club', 32.75542,-117.13433, 1, 'Palomar Club - text', 'images/search.chips.png', null]
    ];
    
    
    function setMarkers(map, locations) {
      // Add markers to the map
      for (var i = 0; i < locations.length; i++) {
    
        var MarkersArray = locations[i];
      // Marker sizes are expressed as a Size of X,Y
      var image = new google.maps.MarkerImage(MarkersArray[5],
          // This marker is 20 pixels wide by 32 pixels tall.
          new google.maps.Size(60, 50),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at 0,32.
          new google.maps.Point(0, 33));
      var shadow = new google.maps.MarkerImage(MarkersArray[5],
          // The shadow image is larger in the horizontal dimension
          // while the position and offset are the same as for the main image.
          new google.maps.Size(75, 60),
          new google.maps.Point(0,0),
          new google.maps.Point(0, 33));
          // Shapes define the clickable region of the icon.
      var shape = {
          coord: [0,0,0,35,35,35,35,0],
          type: 'poly'
      };
    	
    	
        var infowindow = new google.maps.InfoWindow({map: map, content: MarkersArray[4]});
        var myLatLng = new google.maps.LatLng(MarkersArray[1], MarkersArray[2]);
        var ThisMarker = new google.maps.Marker({position: myLatLng,map: map,shadow: shadow,icon: image,shape: shape,title: MarkersArray[0],zIndex: MarkersArray[3]});	
    	MarkersArray[6] = ThisMarker; 
    	google.maps.event.addListener(ThisMarker, 'click', function() { getInfowindow(this); }	 ); 
      }			
    }
    
    
    function getInfoWindow(which)
    {
        for ( var m = 0; m < MarkersArray.length; ++m )
        {
            var markerInfo = MarkersArray[m];
            if ( markerInfo[6] == which ) 
            {
                var infowindow = new google.maps.InfoWindow({content: markerInfo[4]});
                infoWindow.open( map, which );
                return;
            }
        }
    }
    
    function initialize() {
      var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(32.75542,-117.13433),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
      setMarkers(map, MarkersArray);
    }
    </script>

  • #10
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    any help?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Can you show it live? Surely getting an error but without seeing it live I dunno where.
    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.

  • #12
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Absolutely!!

    http://calpoker.net/test.html


    THANKS AGAIN SO MUCH FOR YOUR HELP.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Okay, first of all, kill the line in red:
    Code:
        var infowindow = new google.maps.InfoWindow({map: map, content: MarkersArray[4]});
        var myLatLng = new google.maps.LatLng(MarkersArray[1], MarkersArray[2]);
    that's not used any more.

    But then look at this and kick yourself:
    Code:
    	google.maps.event.addListener(ThisMarker, 'click', function() { getInfowindow(this); }	 ); 
    ...
    function getInfoWindow(which)
    HINT: JavaScript is CaSe SeNsItIvE.

    Is that the only bug? I can't tell.

    I tried to use that code on my own machine, but I can't get the map to appear, at all. I thought you needed an API Key with google maps, but I don't see one in your code.
    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.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    (And teach you to copy/paste *MY* code. Okay, I'll go kick myself for you. In my defense, I was typing off the top of my head.)
    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.

  • #15
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ok, ok

    however now there seems to be a new problem. it wont fire

    infowindow.open( map, which );

    i re-uploaded

    http://calpoker.net/test.html


    I also added //alert(markerInfo[4]) so you can see that the unique message is there, it just wont show the infowindow


  •  
    Page 1 of 2 12 LastLast

    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
    •