TypeError：google.maps.Markersはコンストラクタではありません

Question

jsonデータを使用してinfo windowを使用してmarker clusterを作成したいと思います。

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/

は、なぜ私はこのエラーを取得しています私が間違って何をしたかの任意の提案
しかし

これが表示されていないgoogle.maps.Markers is not a constructor error.Thoughマーカークラスタを取得していますが、私のコードです？

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.Marker（末尾に "s"がないことに気付く）のときはnew google.maps.Markersです。