Google Maps APIを使用してKMLの中心点を取得する方法

Question

KMLファイルの中央の点を取得し、マップ設定の変数に格納しようとしていますが、「キャッチしないTypeError：読み込めませんプロパティ '未定義（...）のgetCenter'。 getDefautViewportは未定義に戻ってきています。なぜ私はその理由がわかりません。これまでの私のコード：

var map; 
    function initMap() { 

     map = new google.maps.Map(document.getElementById('map'), { 
     center: getCenter, 
     zoom: 10 
     } 
     }); 

     var layer1 = new google.maps.KmlLayer({ 
     url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml', 
     preserveViewport: true, 
     map: map 
     }); 

     var getCenter = layer1.getDefaultViewport().getCenter(); 

    } 

Answer 1

あなたはマップがKMLを中心にしたい場合は、あなたがセンターを設定する必要はありません、preserveViewport: falseを設定します。

マップに追加されるまで、KmlLayerのデフォルトのビューポートを取得することはできず、マップが作成されるまでマップに追加することはできません。あなたはそれを作成するときに、マップの中央のプロパティを設定しないでください。そして、KmlLayerのdefaultviewportため

map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10 
}); 

を待つ利用できるようにするには、地図の中心を設定します。

google.maps.event.addListener(layer1, 'defaultviewport_changed', function() { 
    var getCenter = layer1.getDefaultViewport().getCenter(); 
    map.setCenter(getCenter); 
    }); 

proof of concept fiddle

コードスニペット：

var map; 
 

 
function initMap() { 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10 
 
    }); 
 

 
    var layer1 = new google.maps.KmlLayer({ 
 
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml', 
 
    preserveViewport: true, 
 
    map: map 
 
    }); 
 
    google.maps.event.addListener(layer1, 'defaultviewport_changed', function() { 
 
    var getCenter = layer1.getDefaultViewport().getCenter(); 
 
    map.setCenter(getCenter); 
 
    console.log(getCenter.toUrlValue(6)); 
 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>