Maps API v3 Infowindows with multiple markers

http://stackoverflow.com/questions/24803074

by hmahida

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map"></div>

CSS

html, body, #map {
     height: 100%;
     width: 100%;
     margin: 0px;
     padding: 0px;
 }

JavaScript

var markers = [];

    function initialize() {
    
        var beaches = [
[  43.89162887, -79.29135367 ],
[  43.89651888, -79.33834227 ],
[  43.89723173, -79.3098148 ],
[  43.89253354, -79.31475263 ],
[  43.89441231, -79.29773319 ],
[  43.88736943, -79.31751593 ],
[  43.88306983, -79.30612535 ],
[  43.90556072, -79.34093601 ],
[  43.88736943, -79.31751593 ],
[  43.90057994, -79.33612655 ],
[  43.88906097, -79.33527924 ],
[  43.90046784, -79.27849262 ],
[  43.88371614, -79.30719793 ]
        ];
    
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(43.8, -79.3),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    
        var infowindow = new google.maps.InfoWindow();
    
        for (var i = 0; i < beaches.length; i++) {
    
            var newMarker = new google.maps.Marker({
                position: new google.maps.LatLng(beaches[i][0], beaches[i][1]),
                map: map,
                
            });
    
            google.maps.event.addListener(newMarker, 'click', (function (newMarker, i) {
                return function () {
                    infowindow.setContent(beaches[i][0]);
                    infowindow.open(map, newMarker);
                }
            })(newMarker, i));
    
            markers.push(newMarker);
        }
    }
    
    initialize();