◆Googe Maps API V3の使い方/kmlファイルからアイコンやレイヤーを読み込んで表示させる方法
kmlファイルからのデータを読み込んでマーカーやレイヤーを表示させるとデフォルトでは、KMLレイヤーの内容が地図の中心になり、自動的にbounding box にズームされるようになってしまいます。(前回の記事参照)
そこで、初期指定の座標やズームを有効にするために、ルート検索(Directions Renderer)でも使用したpreserveViewport を使います。
前回記事のscript
var ctaLayer = new google.maps.KmlLayer('http://nao.chips.jp/kaigai/kml/Bangkok_rail.kml'); ctaLayer.setMap(map);
を、次のように変更すればOK。
var ctaLayer = new google.maps.KmlLayer( 'http://nao.chips.jp/kaigai/kml/Bangkok_rail.kml', { suppressInfoWindows: false,//インフォウインドウtrue or false map: map_stv, preserveViewport: true//これをtrueにすると初期座標・ズームが有効になります。 }); ctaLayer.setMap(map_stv);
バンコクの新国際空港を初期中心座標に指定し、ズームも変更してみました。
<script> function initialize() { var bangkok = new google.maps.LatLng(13.684018,100.74789); var mapOptions = { zoom: 11, center: bangkok, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var ctaLayer = new google.maps.KmlLayer( 'http://nao.chips.jp/kaigai/kml/Bangkok_rail.kml', { suppressInfoWindows: false, map: map, preserveViewport: true }); ctaLayer.setMap(map); } google.setOnLoadCallback(initialize); </script>
◆Google Maps JavaScript API V3 サンプル
◆参照先
関連記事一覧
スポンサードリンク
2 Comments.