Maps API v3 Infowindows with multiple markers

http://stackoverflow.com/questions/24803074

by Eugen Sunic

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

function initialize() {
    
        var location = [
            ['1', -33.890542, 151.274856, 1],
            ['2', -33.923036, 151.259052, 1],
            ['3', -34.028249, 151.157507, 2],
            ['4', -33.800101, 151.287478, 2],
            ['5', -33.950198, 151.259302, 2]
        ];
    
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(-33.88, 151.28),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    
        var infowindow = new google.maps.InfoWindow();
    
        for (var i = 0; i < location.length; i++) {
    
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(location[i][1], location[i][2]),
                map: map,
                title: location[i][0]
            });
    
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(location[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i)); 
        }
    }
    
    initialize();