初期化位置を指定する

Google MAPS APIを使った単純な例では、setCenterというメソッドを使って初期化位置を指定していましたが、ここではsetCenterに関してもう少し詳しい説明をしたいと思います。 (Google Maps API version 1では、centerAndZoomというメソッドでしたが、version 2になってsetCenterに変わりました。)

setCenterを使ったサンプル

以下のサンプルはGoogle MAPS APIを使ったページのソースです。 強調してある部分が前述した例との違いです。


<!DOCTYPE html PUBLIC "-//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>
    <title>Google Maps JavaScript API Example - simple</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
        type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="map" style="width:450px; height:400px"></div>
    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(36.033333, 139.15), 11);
    }

    //]]>
    </script>
  </body>

</html>

setCenterの一つ目の引数は位置を表しています。 位置を表すには「new GLatLng(緯度, 経度)」を行います。 (本当は必ずしもnewをする必要はありまえせんがとりあえずはおまじないだと思ってください) 経度は東が+(プラス)、西が−(マイナス)の値になります。 緯度は北が+で南が−の値になります。 上記サンプルでは埼玉県を示しています。

緯度と経度の数値を取得するためのスクリプトを用意したので、もしよろしければご利用下さい。

setCenterの二つ目の引数はズーム度(縮尺/倍率)です。 数値が大きいほどズームアップされた詳細な地図になります。 数値が小さくなるとズームアウトされた概要地図になります。 (Google Maps API version 1では、値が小さいほどズームアウトされていましたが、version 2からは逆になりました。 これは、以後のバージョンアップでより詳細な地図を提供できるようにするための措置だと思われます。)

表示例

表示例です。



あきみち

Linuxネットワークプログラミングの本を書きました
Linuxネットワークプログラミング

Google Maps API
プログラミング



カスタム検索




はてなRSSに追加
Subscribe with livedoor Reader
Subscribe with Bloglines
Add to goo

外部サイト

プレコ王国
ディスカス魂
金魚タイムズ
YouTubeチャネル
Twitter
mixi(ほぼ未使用)


フィードメーター - Geekなぺーじ にほんブログ村 IT技術ブログへ
Copyright (C) Geekなページ.
All rights reserved. 無断転載や無断コピーなど、私的利用の範囲を逸脱した利用はおやめ下さい.