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>