Add Info window in Google Maps JavaScript API

Question

I would like to ask about how to add an info window to a marker in Google Maps. The condition is, I have to create a program with multiple markers on a map. But how I can give a specified info window to each marker?

This is my code for now:

var markers = [];
    var map;
    var labels = 'ABCD';
    var labelIndex = 0;

    function initialize() {
      map = new google.maps.Map(
        document.getElementById("map"), {
          center: new google.maps.LatLng(40.7127837, -74.0059413),
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      // New York, NY, USA (40.7127837, -74.0059413)
      // Newark, NJ, USA (40.735657, -74.1723667)
      // Jersey City, NJ, USA (40.72815749999999, -74.07764170000002)
      // Bayonne, NJ, USA (40.6687141, -74.11430910000001)

      addMarker({
        lat: 40.7127837,
        lng: -74.0059413
      }, "red");
      addMarker({
        lat: 40.735657,
        lng: -74.1723667
      }, "green");
      addMarker({
        lat: 40.7281575,
        lng: -74.0776417
      }, "yellow");
      addMarker({
        lat: 40.6687141,
        lng: -74.1143091
      }, "orange");
    }
    google.maps.event.addDomListener(window, "load", initialize);


    function addMarker(location, color) {
      var marker = new google.maps.Marker({
        position: location,
        label: labels[labelIndex++ % labels.length],
        icon: {
          url: 'http://maps.google.com/mapfiles/ms/icons/' + color + '.png',
          labelOrigin: new google.maps.Point(15, 10)
        },
        map: map
      });
      markers.push(marker);
    }     

Can someone give me a solution on how to resolve my problem?

Answer 1

You could do it like this:

var markers = [];
var map;
var labels = 'ABCD';
var labelIndex = 0;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(40.7127837, -74.0059413),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  // New York, NY, USA (40.7127837, -74.0059413)
  // Newark, NJ, USA (40.735657, -74.1723667)
  // Jersey City, NJ, USA (40.72815749999999, -74.07764170000002)
  // Bayonne, NJ, USA (40.6687141, -74.11430910000001)

  addMarker({
    lat: 40.7127837,
    lng: -74.0059413
  }, "red", "New York is awesome!");
  addMarker({
    lat: 40.735657,
    lng: -74.1723667
  }, "green", "Newark is also cool!");
  addMarker({
    lat: 40.7281575,
    lng: -74.0776417
  }, "yellow", "Do not forget Jersey City!");
  addMarker({
    lat: 40.6687141,
    lng: -74.1143091
  }, "orange", "And not to mention Bayonne, too!");
}
google.maps.event.addDomListener(window, "load", initialize);

function addMarker(location, color, content) {
  var infowindow = new google.maps.InfoWindow({
    content: content
  });

  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    icon: {
      url: 'http://maps.google.com/mapfiles/ms/icons/' + color + '.png',
      labelOrigin: new google.maps.Point(15, 10)
    },
    map: map
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  markers.push(marker);
}