スポンサードリンク

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

◆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 サンプル


◆参照先

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">