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ファイルを加工するウェブアプリ）


関連ページ

• Google Maps API：gpxファイルを描画&編集する

参考にしたページ

• 【Javascript】配列の値の中から、最大値、最小値を求める
• 真ん中のタイルを１枚選ぶ：グーグルマップのしくみを探る（５）

2013-11-10 改定


以上