• 小
  • 中
  • 大

指定の座標へ移動

現在地図に表示されている位置から、指定した座標へ移動する方法を確認します。Mapクラスで用意されている「panTo」methodを使います

panTo(latLng:LatLng) 戻り値:None
地図の中心を指定された LatLng に変更します。
変更範囲が地図の幅と高さの両方よりも
小さい場合、遷移はスムーズにアニメーション表示されます。

引数に移動後の座標を表すLatLngクラスのオブジェクトを指定します。

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

実際には次のように記述します。
function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
map.panTo(new google.maps.LatLng(35.958704,139.795408));
}

サンプルコード

サンプル.js


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

function toTokyo() {
map.panTo(new google.maps.LatLng(35.681382,139.766084));
}
function toShinjyuku() {
map.panTo(new google.maps.LatLng(35.690921,139.700258));
}

function toIkebukuro() {
map.panTo(new google.maps.LatLng(35.728926,139.71038));
}

サンプル.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="tokyo" value="東京駅"
onclick="toTokyo()" />
<input type="button" id="toShinjyuku" value="新宿駅"
onclick="toIkebukuro()" />
<input type="button" id="shinagawa" value="池袋駅"
onclick="toShinagawa()" />
</p></form>
</body>
</html>


表示例 指定の座標へ地図を移動する


Google Maps サンプル > 指定の座標へ移動