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', 33.779860204812344, -118.18629338916364, 1, 'Termination'],
        ['400 HOBART ST, 49601, MI', 34.06942067684757, -118.03625014627308, 1, 'Manual'],
['1105 6th St, 49684, MI',33.77535303253663, -118.17281464443155,1, 'Add'],
        ['917 MAIN ST, 49635, MI', 33.9151507399874, -118.3616693444282, 1, 'Good'],
        ['550 MUNSON AVE, 49686, MI', 44.75662575804743, -85.57777200208002, 1, 'Good']

    ];
    
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: new google.maps.LatLng(33.916647686584, -118.35121596883468),
            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();