Google Maps API - okoba23 @ ウィキ

Google Maps API

document

• Google Maps API Version 2 Documentation

まずは

■API Keyの取得。
  このKEYを取得しないと始まりません。
  Googleアカウント（無料）さえ持っていれば使用可能。
  初心者なら問題ないけど、PV（PageView)が50万PV/dayを超える場合には、
  enterprise契約が必要。これで一儲けたくらんでる方は、契約を。

• Sign upページはこちら（英語）

Maps APIを使う

■貼り付ける。
  Googleアカウントと無料HPさえ持っていれば、即使用可能。
  上記Sign upページで即効KEYも、貼り付けるscriptも
  入手可能です。
  所要時間5秒。。。

• ただ貼り付けただけのN.Y.

解説

■タグ
 - javascriptに追記
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
 key=発行される自分のKEY" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 function load() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(37.4419, -122.1419), 13);
   }
 }
 //]]>
 </script>
 
 - htmlに追記
 <div id="map" style="width: 500px; height: 400px"></div>
 
 ----------------------------------------------------------- 
 実際に発行するpageにも書いてありますが、javascriptについては
 head部に記載し、div要素をbody部に記載する事で表示します。
 
 -div属性： width 高さ  height 横幅
 -src属性： 自分に発行されたKEY
 -map.setCenterメソッド：地図の中心点の経度と緯度を指定

ポイントの移動

 function load() {
 if (GBrowserIsCompatible()) {
   var map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(37.4419, -122.1419), 13);
   window.setTimeout(function() {
   map.panTo(new GLatLng(37.4569, -122.1569));
   }, 5000);
 }
 
 -----------------------------------------------------------
 window.setTimeoutメソッド内でポイント移動の記述を追加。
 map.panToメソッド：ポイントの移動記述と、time値を設定
                    GLatLngでmap.setCenterメソッドと同じように座標を設定。
                    最後のカラムで次ポイント移動の時間を設定(ms)

• map movement&animation

control追加

 map.addControl(new GSmallMapControl());
 map.addControl(new GMapTypeControl());
 
 -----------------------------------------------------------
 GSmallMapControl:拡大・縮小
 GMapTypeControl:地図・写真・地図＆写真の3type

• add control

経度・緯度表示

 - javascriptに追記
 GEvent.addListener(map, "moveend", function() {
   var center = map.getCenter();
   document.getElementById("message").innerHTML = center.toString();
 });
 
 - htmlに追記
 <div id="message"></div>
 
 -----------------------------------------------------------  
 経度・緯度の表示ができる。これで、defaultの位置設定で使える。
 map.setCenterで設定。

• view latitude&longitude

メッセージ表示

 - javascriptに追記
 map.openInfoWindow(map.getCenter(),
                  document.createTextNode("Hello, world"));
 
 -----------------------------------------------------------
 指定されたポイントでメッセージを表示。
 map.getCenterメソッドでポイントを受け取る。

• view message window