multiple markers with infowindows

Question

I want to add multiple markers and infowindows that activated with a click. I am having trouble to present the relevant infowindow of the marker, after a click the same infowindow open for all markers.

The information comes from a for loop this is the code

 function GetMarkerSuccess(results) {
        results = $.parseJSON(results.d);
        markers = [];
        infowindows = [];

        for (var i = 0; i < results.length; i++) {
            var myLatLng = { lat: results[i].Latitude, lng: results[i].Longitude };

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon:'images/car.png'
            });
            var infowindow = new google.maps.InfoWindow({
            content: "<div style='text-align:right'><h3>" + results[i].Date.substring(0, 10) + "</h3><p> התחלה: " + results[i].Starttime + " סיום: " + results[i].Endtime + "</p><p> &#8362  מחיר:" + results[i].Price + "</p></div>"
            });
            markers.push(marker);
            infowindows.push(infowindow);
            listenMarker(marker);
            function listenMarker(marker) {

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

        }
    }

Possible duplicate of [Google Maps API Multiple Markers with Infowindows](http://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows) — Jared Smith, Apr 06 '16 at 16:50

score 1 · Accepted Answer · answered Apr 06 '16 at 17:04

     function GetMarkerSuccess(results) {
            results = $.parseJSON(results.d);
            markers = [];
            infowindows = [];

            for (var i = 0; i < results.length; i++) {
                var myLatLng = { lat: results[i].Latitude, lng: results[i].Longitude };

                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon:'images/car.png'
                });
                var infowindow = new google.maps.InfoWindow({
                content: "<div style='text-align:right'><h3>" + results[i].Date.substring(0, 10) + "</h3><p> התחלה: " + results[i].Starttime + " סיום: " + results[i].Endtime + "</p><p> &#8362  מחיר:" + results[i].Price + "</p></div>"
                });
                markers.push(marker);
                infowindows.push(infowindow);
                listenMarker(marker);
                function listenMarker(marker) {
               google.maps.event.addListener(marker,'click',     (function(marker,content,infowindow){ 
                    return function() {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                };
                })(marker,content,infowindow));
                }
            }
        }

multiple markers with infowindows

1 Answers1