• 小
  • 中
  • 大

矩形領域 位置へ移動

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

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

引数には矩形領域を表す為に使用するLatLngBoundsクラスのオブジェクトを指定します。LatLngBoundsクラスは左下と右上の座標をそれぞれ持つクラスで次のようにオブジェクト作成します。
southWest = new google.maps.LatLng(-31.203405,125.244141);
northEast = new google.maps.LatLng(-25.363882,131.044922);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);

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

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

次のように記述します。
function initialize() {
var latlng = new google.maps.LatLng(35.688588,139.71069);
var opts = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
map.panBy(100, -50);
var southWest = new google.maps.LatLng(35.675888,139.7448576);
var northEast = new google.maps.LatLng(35.6894875,139.6917064);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.panToBounds(bounds);

}

サンプルコード

サンプル.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 southWest = new google.maps.LatLng(-44.087585,109.335938);
var northEast = new google.maps.LatLng(-4.565474,157.851563);
var bounds = new google.maps.LatLngBounds(southWest, northEast);
map.panToBounds(bounds);
}

function toEuropa() {
var southWest = new google.maps.LatLng(31.653381,-19.6875);
var northEast = new google.maps.LatLng(74.019543,48.164063);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.panToBounds(bounds);
}

function toSAmerica() {
var southWest= new google.maps.LatLng(-58.447733,-96.328125);
var northEast = new google.maps.LatLng(17.308688,-29.882812);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.panToBounds(bounds);
}

サンプル.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 v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.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>


表示例 矩形領域 位置へ移動する


Google Maps サンプル > 矩形領域 位置へ移動