中心座標の指定

広告

地図を表示するためにはマップタイプやズームレベルの他に中心座標を指定する必用があります。Mapクラスのオブジェクトを作成する時にオプションとして指定したり後からオプションを設定する方法を前のページにてご紹介しましたが、ここでは中心座標を設定するためのsetCenterメソッドの使い方について解説します。

1.setCenterメソッド
2.サンプルコード

setCenterメソッド

地図の中心座標を指定するにはgoogle.maps.Mapクラスで用意されている「setCenter」メソッドを使います。 

setCenter(latlng:LatLng)

Description:
  ----
Return Value:
  None

1番目の引数には設定する中心座標を表すgoogle.maps.LatLngクラスのオブジェクトを設定します。

LatLngクラスは座標位置を表すためのクラスです。詳細は別のページでご説明しますがLatLngクラスのインスタンスは次のように作成します。 

var latlng = new google.maps.LatLng(緯度, 経度);

1番目の引数に緯度を、2番目の引数に経度を指定します。緯度は「-90」から「+90」の間、経度は「-180」から「+180」の間で指定して下さい。例えば緯度が"35.658517"、経度が"139.745493"を表す座標は次のように作成できます。 

var latlng = new google.maps.LatLng(35.658517, 139.745493);

作成したLatLngクラスのインスタンスを1番目の引数に指定し「setCenter」メソッドを呼び出します。 

var map = new google.maps.Map(document.getElementById("map_canvas"), opts);

var latlng = new google.maps.LatLng(35.658517, 139.745493);
map.setCenter(latlng);

地図の中心座標が新しく指定した位置に設定されます。

サンプルコード

では簡単なサンプルを作成して実際に試してみます。 

var map;
var tokyo = new google.maps.LatLng(35.689614,139.691585);
var osaka = new google.maps.LatLng(34.686272,135.519649);

function initialize() {

  var opts = {
    zoom: 16,
    center: tokyo,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

function setTokyo() {
  map.setCenter(tokyo);
}

function setOsaka() {
  map.setCenter(osaka);
}

<!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" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Google Maps サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
    </script>

    <script src="./js/code3_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>自宅の地図です。</p>

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

    <form>
    <p>
    <input type="button" id="tokyo" value="東京" onclick="setTokyo()" />
    <input type="button" id="osaka" value="大阪" onclick="setOsaka()" />
    </p>
    </form>
  </body>
</html>

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

p3-1

今回は地図の下に地図の中心座標を変更するためのボタンを表示しました。「東京」ボタンをクリックすると東京都庁の座標が地図の中心に設定され、「大阪」ボタンをクリックすると大阪府庁の座標が地図の中心に設定されます。

p3-2

p3-3

このように中心座標だけを設定したい場合にはsetOptionsメソッドの他にsetCenterメソッドでも設定することができます。

( Written by Tatsuo Ikura )