Maps API v3 Infowindows with multiple markers

http://stackoverflow.com/questions/24803074

by prateekbansal07

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 = [
        ['43650 GARFIELD RD, 48038, MI', 28.195026272624197, -82.35421326976855, 1, 'Termination'],
        ['400 HOBART ST, 49601, MI', 27.88017123668175, -82.82593833106401, 1, 'Add'],

        ['917 MAIN ST, 49635, MI', 28.276607061776257, -82.71927192844494, 1, 'Good'],
        ['550 MUNSON AVE, 49686, MI', 27.918119627254402, -82.77516551387293, 1, 'Good']

    ];
    
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: new google.maps.LatLng(27.95961473656839, -82.52229300346482),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    
        var infowindow = new google.maps.InfoWindow();
    
        for (var i = 0; i < beaches.length; i++) {
      var icon = "";
        if (beaches[i][4] == "Good") {
            icon = "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
        } else if (beaches[i][4] == "Manual") {
            icon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
        } else if (beaches[i][4] == "Add") {
            icon = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
        } else {
            icon = "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
        }
            var newMarker = new google.maps.Marker({
                position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
                icon:icon,
                map: map,
                title: beaches[i][0]
            });
    
            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();