Maps API v3 Infowindows with multiple markers

http://stackoverflow.com/questions/24803074

by justin_barber_arvig

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 = [
            ['Bondi Beach', 44.605236, -95.329451, 1],
            ['Coogee Beach',44.616902, -95.417510, 1],
            ['Cronulla Beach', 44.973596, -93.255329, 2],
            ['Manly Beach', 44.539404, -95.116943, 2],
            ['Maroubra Beach', 44.652735, -95.538350, 2]
        ];
    
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(44.605236, -95.329451),
            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][1], beaches[i][2]),
                map: map,
                title: beaches[i][0],
                icon: {
                  url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
                }
            });
    
            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();