地図を指定した緯度経度の座標へ中心を移動します。
地図の下にある「富士山へ移動」をクリックすると富士山へ移動します。
現在表示されているマップの中に移動先の表示領域が少しでも含まれている場合
地図はアニメーションでスーッと移動します。
含まれていない場合はパッと移動します。
ちょっと分かりにくいのですが、
サンプルでは最初はスーッと富士山に移動しますが、
左中央辺りにある「八王子」を左に移動して見えない状態にして
「富士山へ移動」ボタンをクリックすると
富士山へパッと移動します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title> google maps api v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
var map = document.getElementById("map_canvas");
var latlng = new google.maps.LatLng(35.689980, 139.700225);
var mapOptions = {
zoom: 9,
center: latlng
};
var gmap = new google.maps.Map(map, mapOptions);
var moveButton = document.getElementById("move_button");
google.maps.event.addDomListener(moveButton, "click", function () {
gmap.panTo({ lat: 35.362456, lng: 138.775202 });
// 下記の様に設定しても同じです。
//var pos = new google.maps.LatLng(35.362456, 138.730202);
//gmap.panTo(pos);
});
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 400px; height: 400px"> </div>
<span id="move_button" style="cursor:pointer;"> [ 富士山へ移動 ]</span>
</body>
</html>
0 件のコメント:
コメントを投稿