TypeError：google.maps.Markers不是构造函数

Question

我打算使用json数据创建marker cluster与info window。
但我得到google.maps.Markers is not a constructor error.Though标记簇不显示

这是我的代码：

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'}); 

} 

小提琴：？？https://jsfiddle.net/ram6gpz1/1/

为什么我得到这个错误我做错了什么任何建议？

Answer 1

在这里，你有一个解决方案​​

$(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>

更新的解决方案 这里走的是解决方案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>

此外，我已经更新了一下位置，看看那个。 为了找到群集，您需要缩小。

希望这会解决您的问题。

Answer 2

你犯了一个小错字。你有new google.maps.Markers，当它应该是new google.maps.Marker（注意最后缺少“s”）。