指定の座標へ移動

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

panTo(latLng:LatLng)

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

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

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

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

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);

  map.panTo(new google.maps.LatLng(35.308401,136.131592));
}

サンプルコード

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

var map;

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.680865,139.767036));
}

function toShinbashi() {
  map.panTo(new google.maps.LatLng(35.666397,139.758153));
}

function toShinagawa() {
  map.panTo(new google.maps.LatLng(35.629867,139.74015));
}

<!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/code1_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="tokyo" value="東京" onclick="toTokyo()" />
    <input type="button" id="shinbashi" value="新橋" onclick="toShinbashi()" />
    <input type="button" id="shinagawa" value="品川" onclick="toShinagawa()" />
    </p>
    </form>
  </body>
</html>

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

p1-1

今回は地図下に設置したボタンを押すと、そのボタンに書かれた駅に移動するように設定してあります。では"新橋"と書かれたボタンを押して下さい。

p1-2

言葉では表現しにくいのですが、移動距離が地図の幅と高さの範囲内なのでスムーズに移動しました。では今度は"品川"と書かれたボタンを押して下さい。

p1-3

"新橋"から"品川"への移動も範囲内のためスムーズに移動しました。では今度は"東京"と書かれたボタンを押して下さい。

p1-4

"品川"から"東京"への移動は範囲内を超えたため、地図が切り替わるように新しい地点へ移動しました。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。