Google maps Api marker does not work on multiple locations

Question

I have a google map api and I put some multiple locations on my map but unfortunately my location marker does not appear on the map, I don't know if there's a problem on my array or the object that I declare, all I need is to is to put some multiple markers in the two locations and here's the sample code

var map;

function initMap() {
  var manilaMain = {
    info: "<strong>Chipotle on Broadway</strong><br>\
                            5224 N Broadway St<br> Chicago, IL 60640<br>\
Get Directions</a>",
    lat: 14.5995124,
    lng: 120.9842195

  };

  var manilaHospital = {
    info: "<strong>Chipotle on Broadway</strong><br>\
                            5224 N Broadway St<br> Chicago, IL 60640<br>",
    lat: 14.609189,
    lng: 120.966466

  };

  var locations = [
    [manilaMain.lat, manilaMain.lng, manilaMain.info, 0],
    [manilaHospital.lat, manilaHospital.lng, manilaHospital.info, 1],
  ];


  var newCent = new google.maps.LatLng(14.5995124, 120.9842195);

  map = new google.maps.Map(document.getElementById('hplus-map'), {
    center: newCent,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: false,
    scrollwheel: false
  });

  var infowindow = new google.maps.InfoWindow({
    // content: contentString,
    // maxWidth: 600
  });



  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1]),
      map: map

    });


    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));

  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hplus-map">

</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO3K_aCpewx5lqVbthR2YOHXvX5pHMLWU&callback=initMap" async defer></script>

Answer 1

You have a typo in your marker creation code:

marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1]),
  map: map

});

the position google.maps.LatLng object takes two arguments, you are only giving it one. Should be:

  position: new google.maps.LatLng(locations[i][0],locations[i][1]),

code snippet:

html,
body,
#hplus-map {
  height: 100%;
  width: 100%;
}

<div id="hplus-map"></div>
<script>
  var map;

  function initMap() {
    var manilaMain = {
      info: "<strong>Manila Main</strong><br>5224 N Broadway St<br> Chicago, IL 60640<br>Get Directions</a>",
      lat: 14.5995124,
      lng: 120.9842195
    };

    var manilaHospital = {
      info: "<strong>Manila Hospital</strong><br>5224 N Broadway St<br> Chicago, IL 60640<br>",
      lat: 14.609189,
      lng: 120.966466
    };

    var locations = [
      [manilaMain.lat, manilaMain.lng, manilaMain.info, 0],
      [manilaHospital.lat, manilaHospital.lng, manilaHospital.info, 1],
    ];

    var newCent = new google.maps.LatLng(14.5995124, 120.9842195);

    map = new google.maps.Map(document.getElementById('hplus-map'), {
      center: newCent,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      draggable: false,
      scrollwheel: false
    });

    var infowindow = new google.maps.InfoWindow({
      // content: contentString,
      // maxWidth: 600
    });

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][2]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>