Google Maps API JS All Points open same infoWindow on click

Question

I've been tinkering around with this all day and just can't seem to figure it out. When I render my map, everytime I click on a point, it opens the windowInfo of the last location added. I've verified each xml element is returning it's proper name,location,lat/lng etc. Any help would be appreciated.

<code>
        <script type="text/javascript" src="//maps.googleapis.com/maps/api/js"></script>
        <script>
            $(document).ready(function () {
                $("#map").css({
                    height: 300,
                    width: 400
                });
                var myLatLng = new google.maps.LatLng(33.985236, -117.715781);
                MYMAP.init('#map', myLatLng, 8);

                //alert("0: "+MYMAP.map.getZoom());

                MYMAP.placeMarkers('/admin/company/project/googlexml');

                //alert("2: "+MYMAP.map.getZoom())


            });


            var wh = $(document).height();
            //$('#frame').height(wh - 125);

            google.maps.visualRefresh = true;
            var locations = 0;

            var MYMAP = {
                map: null,
                bounds: null
            }




            MYMAP.init = function (selector, latLng, zoom) {
                var myOptions = {
                    zoom: zoom,
                    center: latLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                this.map = new google.maps.Map($(selector)[0], myOptions);
                this.bounds = new google.maps.LatLngBounds();

                //alert("0: "+MYMAP.map.getZoom());

                window.setTimeout(function () {
                    //alert("10: "+MYMAP.map.getZoom());
                    if (MYMAP.map.getZoom() > 13) {
                        MYMAP.map.setZoom(13)
                    }
                }, 500);

            }

            MYMAP.placeMarkers = function (filename) {
                $.post(filename, function (xml) {
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    for (var i = 0; i < markers.length; i++) {
                        var name = markers[i].getAttribute("name");
                        var address = markers[i].getAttribute("address");
                        //var image = '/images/someimage.png';
                        var lat = markers[i].getAttribute("lat");
                        var lng = markers[i].getAttribute("lng");
                        var point = new google.maps.LatLng(
                                parseFloat(lat),
                                parseFloat(lng)
                                );

                        //alert("data :" + name + " Address " + address + " lat/lng " + lat + ":" + lng);

                        locations++;

                        // extend the bounds to include the new point

                        MYMAP.bounds.extend(point);

                        var marker = new google.maps.Marker({
                            position: point,
                            map: MYMAP.map,
                            //icon: image,
                            clickable: true
                        });

                        marker.info = new google.maps.InfoWindow({
                            content: '<strong>' + name + '</strong><br />' + address
                        });

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


                        MYMAP.map.fitBounds(MYMAP.bounds);

                        //alert("1: " + MYMAP.map.getZoom());
                    }
                }, 'xml');
            }
</code>

Answer 1

Use "this" in your listener for the click event, "marker" still contains the last value it had in the loop:

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