Google MapsのAPI JS - MarkerClusterer - 未定義

Question

のプロパティを読み取ることができません「maxZoom」私はオプションでGoogleマップのオブジェクトを持っている：私は実行することにより、ズームレベルを変更したいマップを初期化した後

今

$(document).ready(function() { 
    var mapOptions = { 
     zoom: 4, 
     minZoom: 3, 
     maxZoom: 12, 
     center: new google.maps.LatLng(39.484973, -0.364126), 
     mapTypeControl: false, 
     streetViewControl: false 
    }; 

    var mapElement = document.getElementById('#map'); 

    map = new google.maps.Map(mapElement, mapOptions); 

    markers = [...]; 
    markerCluster = new MarkerClusterer(map, markers, { 
     averageCenter: true, 
     styles: [{ 
      url: '/cluster.png', 
      width: 64, 
      height: 64, 
      textColor: 'white', 
      backgroundPosition: 'center' 
     }] 
    }); 

    ... 
} 

：

var location = ... 

map.setCenter(location); // works fine 
map.setZoom(7);`, 

が、私は、コンソールでエラーが発生します。

Uncaught TypeError: Cannot read property 'maxZoom' of undefined 
at Ag.<anonymous> (markerclusterer.js:163) 
at Object._.z.trigger (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:99) 
at Hb (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:38) 
at Ag._.k.set (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:101) 
at Ag.setZoom (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:56) 
at OfferMap.setBounds (offers_offer-map_1.js:1) 
at HTMLDocument.<anonymous> (offers_trainee-offers_3.js:1) 
at i (jquery.min.js:2) 
at Object.fireWith [as resolveWith] (jquery.min.js:2) 
at Function.ready (jquery.min.js:2) 

誰もがいずれかを持っています何が起こっているのか？

UPDATE

問題は以下のコメントで述べた@geocodezipとしてのでMarkerClustererであるため、ここで私はロードスクリプトは次のとおりです。

<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 

Answer 1

さて、私はそれを解決しました！どうやら、@geocodezipが質問の下で言及したように、それはmasterclusterer問題であり、私のインポートされたライブラリは古いです。ダウンロードしなければならなかったnewer。完璧に動作します。

this.markerCluster = new MarkerClusterer(this.map, this.markers, { 
    maxZoom: 12, 
    averageCenter: true, 
    styles: [{ 
     url: this.clusterIcon, 
     width: 64, 
     height: 64, 
     textColor: 'white', 
     backgroundPosition: 'center' 
    }] 
}); 

将来の訪問者のための明確な問題、更新タイトルと質問の際：

もMarkerClustererオプションでmaxZoomを設定することを忘れないでください。

Answer 2

あなたは作ることwindow.onloadでこの機能をラップする必要がありますDOMがロードされていることを確認してください。 map.setZoom(7);

Fiddleデモ

でズームを更新するための

window.onload = function() { 

    var mapOptions = { 
     zoom: 4, 
     minZoom: 3, 
     maxZoom: 12, 
     center: new google.maps.LatLng(39.484973, -0.364126), 
     mapTypeControl: false, 
     streetViewControl: false 
    }; 

    var mapElement = document.getElementById('#map'); 

    map = new google.maps.Map(mapElement, mapOptions); 
} 

Answer 3

グローバルmapを設定しようと呼び出しupdate機能JS

var map; 
function initMap() { 
var mapOptions = { 
    zoom: 4, 
    minZoom: 3, 
    maxZoom: 12, 
    center: new google.maps.LatLng(39.484973, -0.364126), 
    mapTypeControl: false, 
    streetViewControl: false 
}; 

var mapElement = document.getElementById('map'); 

map = new google.maps.Map(mapElement, mapOptions); 
} 
function updateMap(){ 
map.setZoom(7); 
} 

HTML

<button onclick="updateMap()"> 
set zoom 
</button> 
<div id="map"></div> 

はフィドルを更新：

Fiddle