2013-10-29

Google Maps API :zoom, center を適当な値に設定する

◆mapOptions を定義するスクリプト

var layout = new gmLayout(mapId, arrLatLng);
 var mapOptions = {
     zoom: layout.zoom,
     center: layout.center,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
gmLayout は最適化した zoom (lauout.zoom) と 最適化したcenter (layout.center)を求めるコンストラクタ
緯度経度の値の入った配列 arrLatLang に基づき、google.maps.Map の mapOptions の zoom と center を適当な値に決める。

◆コンストラクタ gmLayout

function gmLayout(mapId, arrLatLng){

 var arrLat = new Array() ;
 var arrLng = new Array() ;
 for ( i = 0; i < arrLatLng.length; i++ ) {
  arrLat[i] = arrLatLng[i].lat();
  arrLng[i] = arrLatLng[i].lng();
 }

 var maxLat = Math.max.apply(null,arrLat);
 var maxLng = Math.max.apply(null,arrLng);
 var minLat = Math.min.apply(null,arrLat);
 var minLng = Math.min.apply(null,arrLng);

 var ctrLat = (maxLat+minLat)/2;
 var ctrLng = (maxLng+minLng)/2;

 var rangeLat = maxLat-minLat;
 var rangeLng = maxLng-minLng;
 var zoomLat = Math.floor( Math.log(340/rangeLat*$('#'+mapId).height()/256) / Math.log(2) );
 var zoomLng = Math.floor( Math.log(340/rangeLng*$('#'+mapId).width()/256) / Math.log(2) );

 this.zoom = Math.min ( zoomLat, zoomLng );
 this.center = new google.maps.LatLng(ctrLat,ctrLng);

}
10-13行目:Math.max.apply(null,配列), Math.min.apply(null,配列) は配列の中から最大値、最小値を求める関数。
20-21行目:340°(360°ではない)が 256×2zoom に対応していることを利用している〔リンク〕


応用例(GpxClipper:gpxファイルを加工するウェブアプリ)


関連ページ
参考にしたページ

2013-11-10 改定


以上