Maps API v3 Infowindows with multiple markers

http://stackoverflow.com/questions/24803074

by Sumesh KP

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 = [];
		var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var labelIndex = 0;
    function initialize() {
    
        var beaches = [
            ['Bondi Beach', -33.890542, 151.274856, 1],
            ['Coogee Beach', -33.923036, 151.259052, 1],
            ['Cronulla Beach', -34.028249, 151.157507, 2],
            ['Manly Beach', -33.800101, 151.287478, 2],
            ['Maroubra Beach', -33.950198, 151.259302, 2]
        ];
    
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            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 < beaches.length; i++) {
    
            var newMarker = new google.maps.Marker({
                position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
                label: {text: (++labelIndex).toString(), color: "#ffffff"},                icon: 'https://i.imgur.com/wYKWdGz.jpg',
                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);
        }
    }
    function addMarker(location, map) {
        // Add the marker at the clicked location, and add the next-available label
        // from the array of alphabetical characters.
        var marker = new google.maps.Marker({
          position: location,
          label: labels[labelIndex++ % labels.length],
          map: map
        });
      }
    initialize();