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', 38.63438321072431, -90.30986633108164, 1, 'Termination'],
        ['400 HOBART ST, 49601, MI', 38.7391873243563, -90.62128195806599, 1, 'Manual'],
['1105 6th St, 49684, MI',38.812787056851555, -90.34771514457064,1, 'Add'],
        ['917 MAIN ST, 49635, MI', 38.75079582144781, -90.43568751573669, 1, 'Good']

    ];
    
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: new google.maps.LatLng(38.75079582144781, -90.43568751573669),
            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.png1"
        } else if (beaches[i][4] == "Manual") {
            icon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png1"
        } else if (beaches[i][4] == "Add") {
            icon = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png1"
        } else {
            icon = "http://maps.google.com/mapfiles/ms/icons/red-dot.png1"
        }
            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();