指定した矩形領域が表示される位置へ移動

現在表示されている位置から指定した矩形領域が地図内に表示されるような位置へ移動する方法を確認します。Mapクラスで用意されている「panToBounds」メソッドを使います。

panToBounds(latLngBounds:LatLngBounds)

与えられた LatLngBounds を表示するために必要な最小量だけ、地図を移動します。地図
上のどこに境界が置かれるかは保証されませんが、可能な限り境界が表示されるようにな
ります。境界は、地図上に存在するマップ タイプとナビゲーション コントロールにバイ
ンドされた領域内に配置されます。境界が地図よりも大きい場合、地図は境界の北西の隅
を含むように移動します。地図の位置の変更範囲が地図の幅と高さの両方よりも小さい場
合、遷移はスムーズにアニメーション表示されます。

引数には矩形領域を表す為に使用するLatLngBoundsクラスのオブジェクトを指定します。LatLngBoundsクラスは左下と右上の座標をそれぞれ持つクラスで次のようにオブジェクト作成します。

var ll_sw = new google.maps.LatLng(35.308401,136.131592);
var ll_ne = new google.maps.LatLng(35.308401,136.131592);
var latLngBounds = new google.maps.LatLngBounds(ll_sw, ll_ne);

この右下と左上を対角の頂点とする矩形領域が地図内に表示されるように移動することになります。

もしも地図の大きさよりも指定した矩形領域の大きさが大きい場合は矩形領域の北西の隅(左上)が地図内に入るように移動します。

また移動する場合、横方向の移動が地図の幅よりも小さく、縦方向の移動が地図の高さよりも小さい場合には、スムーズにアニメーション表示で移動します。移動が地図の幅や高さよりも大きい場合には地図が切り替わるように移動します。

実際には次のように記述します。

function initialize() {
  var latlng = new google.maps.LatLng(35.308401,136.131592);
  var opts = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);

  var ll_sw = new google.maps.LatLng(35.308401,136.131592);
  var ll_ne = new google.maps.LatLng(35.308401,136.131592);
  var latLngBounds = new google.maps.LatLngBounds(ll_sw, ll_ne);

  map.panToBounds(latLngBounds);
}

サンプルコード

では実際に試してみます。

code2_1.js

var map;

function initialize() {
  var latlng = new google.maps.LatLng(36.049932,138.086128);
  var opts = {
    zoom: 2,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

function toAustralia() {
  var ll_sw = new google.maps.LatLng(-44.087585,109.335938);
  var ll_ne = new google.maps.LatLng(-4.565474,157.851563);
  var latLngBounds = new google.maps.LatLngBounds(ll_sw, ll_ne);

  map.panToBounds(latLngBounds);
}

function toEuropa() {
  var ll_sw = new google.maps.LatLng(31.653381,-19.6875);
  var ll_ne = new google.maps.LatLng(74.019543,48.164063);
  var latLngBounds = new google.maps.LatLngBounds(ll_sw, ll_ne);

  map.panToBounds(latLngBounds);
}

function toSAmerica() {
  var ll_sw = new google.maps.LatLng(-58.447733,-96.328125);
  var ll_ne = new google.maps.LatLng(17.308688,-29.882812);
  var latLngBounds = new google.maps.LatLngBounds(ll_sw, ll_ne);

  map.panToBounds(latLngBounds);
}

map2_1.html

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code2_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

    <form>
    <p>
    <input type="button" id="australia" value="オーストラリア" onclick="toAustralia()" />
    <input type="button" id="europa" value="ヨーロッパ" onclick="toEuropa()" />
    <input type="button" id="samerica" value="南アメリカ" onclick="toSAmerica()" />
    </p>
    </form>
  </body>
</html>

ブラウザで上記ページを開くと次のように表示されます。

p2-1