Google Maps API shows only one infowindow - loop issue

Question

All of the pins drop where they should be. However all the pins share the same info box. Having a hard time figuring the proper to way to create the map to show all the pins from the json feed and show a custom infowindow.

        $.ajax({
            url: '/search?cct=US&&cty='+searchloc+'&add=&mobilefeed=true',
            dataType: 'json',
            success: function(data, status){


                var infowindow; 

                var count = 1;

                function newinfo(marker,locationname,thumb,address,itemid){

                 var contentString = '<a href="search_listing.html?propid='+itemid+'&proptitle='+locationname+'" class="item-link" ><div id="infocontent"><img src="'+thumb+'" width="75px" style="float:left;margin-right:10px;">'+

                          '<b>'+locationname+'</b>'+
                          '<br>'+address+''+

                          '</div></a>';


                         infowindow = new google.maps.InfoWindow({
                                content: contentString
                            });


                 google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map,marker);
                    });
                };

                $.each(data, function(i,item){ 

                    if (count==1){
                         var center = new google.maps.LatLng(item.lat, item.long);
                        // using global variable:
                        map.panTo(center);
                    }
                    var locationname = item.title;
                    var imagethumb = '/listing/'+item.id+'/?mobilefeedview=true&img=true';



                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(item.lat, item.long),
                    title: locationname,
                    map: map
                    });

                    newinfo(marker,locationname,imagethumb,item.address,item.id);

                    count = count + 1;

                });



            },
            error: function(){
                alert('There was an error loading the data. 928');
            }



        });



    var searchmapOptions = {
        center: new google.maps.LatLng(32.7150771, -117.1642001),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


var map = new google.maps.Map(document.getElementById("searchmap"), searchmapOptions);

Can you provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue? Related question: [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Apr 11 '15 at 19:59

score 1 · Answer 1 · answered Apr 11 '15 at 22:55

When the marker is clicked, you have called newinfo for each data point, and the variable infowindow contains the value for the last marker. If you store the infowindow as custom data in the marker, then you will find the correct one.

marker.infowindow = new google.maps.InfoWindow({
  content: contentString
});

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

Google Maps API shows only one infowindow - loop issue

1 Answers1