kmlファイルからデータを読み込んだアイコン及びレイヤーの初期表示座標を指定する

スポンサードリンク

kmlファイルからデータを読み込んだアイコン及びレイヤーの初期表示座標を指定する

Posted by 管理人 on 2012年7月29日 Leave a comment (2) Go to comments

◆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>