Google Maps API

Google Maps API を勉強してみた。サンプルプログラムを見ただけでなんとなく使い方がわかるくらい、非常に簡単に使えるという印象である。その割りに見た目 GUI 的にすごいことをやってそうに見えるモノである。

以下は、スクリプト中のコメントにあるように

  1. クリックしたとろにマーカーを置き
  2. そのマーカーを地図の中心に移動させると共に
  3. 吹き出しに緯度経度を表示する

というものである。注意点としては、日本語対応のために <HEAD>〜</HEAD> で

と宣言しておくのを忘れないことである。ファイルは当然 UTF-8 で保存する。

A Prototype Powered by Google Map <script src="https://maps.google.com/maps?file=api&v=1&key=ここには Google Map API で登録・取得したキーが入る" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ // このスクリプトはクリックしたとろにマーカーを置き // そのマーカーを地図の中心に移動させると共に // 吹き出しに緯度経度を表示する var map; var marker; // クリックしたときのマーカー。後で使うのでここで宣言 var point; // クリックしたときの緯度経度。後で使うのでここで宣言 function init() { <pre>map = new GMap(document.getElementById("map")); // 地図オブジェクトを生成 map.addControl(new GLargeMapControl()); // 拡大縮小のボタン map.addControl(new GMapTypeControl()); // 地図と衛星の切り替え map.centerAndZoom(new GPoint(-122.0325, 37.3228), 4); // クパチーノを表示 
GEvent.addListener(map, 'click',  // click のイベントリスナ登録
  function(o, p) {
    if(o) {           // 吹き出しをユーザーが閉じてしまったときに必要

      marker.openInfoWindowHtml('<div id="InfoWindow">'
                    + point
                    + '</div>');  // 直接 HTML を書く場合
// marker.openInfoWindow(document.createTextNode( // '
' // + point // + '
')); // DOM を使う場合 
    }

    if (p) {           // クリックしたとき緯度経度 p が API から渡される
      marker = new GMarker(p);
      point = p;
      map.clearOverlays();
      map.recenterOrPanToLatLng(point);
      map.addOverlay(marker);
      marker.openInfoWindowHtml('<div id="InfoWindow">緯度経度:<br />'
                    + point + '</div>');
    } // end if
  }  // end function
); // end Event

GEvent.addListener(map, 'moveend',   // イベントリスナ登録

  function() {           // 地図が移動し終わったときに呼び出される
    // ここにコードを記述
  }  // end function
); // end Event
} //]]> </script> <!-- IE 6.0 では、<HEAD>～ に JavaScript を記述しないとエラーとなってしまう --> <body onLoad="init()"> <div id="map" style="width: 500px; height: 400px">

Comments