TypeError: google.maps.Markers is not a constructor

Question

I am tyring to create marker cluster with info window using json data.
But am getting google.maps.Markers is not a constructor error.Though marker cluster are not displaying

This is my code:

var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: {"lat": 39.317779, "lng": -101.459656},
            mapTypeId: 'roadmap',
          });
          map.setTilt(45);

          for(var i=0;i<locations.length;i++){
            var data=locations[i];
            var mylatlng=new google.maps.LatLng(locations.lat,locations.lng);
            var markers = new google.maps.Markers({
              position:mylatlng,
              map:map

            });
            (function(marker,data){
              google.maps.event.addListener(marker,'click',function(e){
                infowindow.setContent(data.code +
                          '<br/>' + data.PIN +
                          '<br/><b>STOCKNO:</b> ' + data.No +
                          '<br/><b>STATUS:</b> ' + data.Status);
                infowindow.open(map, marker);
              })
            })(marker,data);
            }

          var markerCluster = new MarkerClusterer(map, markers,
                  {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

}

fiddle: https://jsfiddle.net/ram6gpz1/1/

Why I am getting this error?what I did wrong?any suggestion?

Answer 1

Here you go with a solution https://jsfiddle.net/ram6gpz1/7/

$(document).ready(function(){
  initialization() 
});

function initialization() {
        
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {"lat": 39.317779, "lng": -101.459656},
    mapTypeId: 'roadmap',
  });
  map.setTilt(45);

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

    attachSecretMessage(marker, i);

  }

  function attachSecretMessage(marker, i) {
    var data = locations[i];

      secretMessage = `${data.code} 
        <br/>${data.PIN} 
        <br/><b>STOCKNO:</b>${data.No}
        <br/><b>STATUS:</b>${data.Status}`;

      var infowindow = new google.maps.InfoWindow({
        content: secretMessage
      });

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

}

         
var locations = [{
 "No": 67000052704,
 "PIN": "JF2FH327573",
 "Status": "Not Available",
 "lat": 32.8781453358752,
 "lng": -97.3715011598119,
 "code": "Gate6"
},
{
 "No": 6700064837,
 "PIN": "WBA53050",
 "Status": "Available",
 "lat": 34.0026085052726,
 "lng": -83.7873632217882,
 "code": "Gate2"
},
{
 "No": 2000544837,
 "PIN": "WBA53EVW530",
 "Status": "Available",
 "lat": 34.0026085052726,
 "lng": -83.7873632217882,
 "code": "Gate1"
}];

<div id="map"></div>

Updated solution Here is the solution https://jsfiddle.net/ram6gpz1/9/

 $(document).ready(function(){
        initialization() 
});

function initialization() {
        
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {"lat": 39.317779, "lng": -101.459656},
    mapTypeId: 'roadmap',
  });
  map.setTilt(45);
  var infoWin = new google.maps.InfoWindow();
  var markers = locations.map(function(location, i) {

    var marker = new google.maps.Marker({
      position: {lat: location.lat, lng: location.lng}
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
      infoWin.setContent(`${location.code} 
      <br/>${location.PIN} 
      <br/><b>STOCKNO:</b>${location.No}
      <br/><b>STATUS:</b>${location.Status}`);
      infoWin.open(map, marker);
    })

    return marker;
  });


  var markerCluster = new MarkerClusterer(map, markers,
          {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

}

         
var locations = [{
  "No": 67000052704,
  "PIN": "JF2FH327573",
  "Status": "Not Available",
  "lat": 32.8781453358752,
  "lng": -97.3715011598119,
  "code": "Gate6"
},
{
  "No": 6700064837,
  "PIN": "WBA53050",
  "Status": "Available",
  "lat": -19.9286,
  "lng": -43.93888,
  "code": "Gate2"
},
{
  "No": 2000544837,
  "PIN": "WBA53EVW530",
  "Status": "Available",
  "lat": -19.85758,
  "lng": -43.9668,
  "code": "Gate1"
}];

#map{
  height:500px;
  width:500px;
}

<div id="map"></div>

Also, I've updated the location a bit, have a look at that. For finding the cluster you need to zoom out.

Hope this will solve your problem.

Answer 2

You've made a small typo. You have new google.maps.Markers when it should be new google.maps.Marker (notice the lack of "s" at the end).