Google Maps API

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

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

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

<META http-equiv="Content-Type" content="text/html;charset=UTF-8">

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
  <head>
  <!-- charset=UTF-8 は絶対に必要!!ファイルは UTF-8 で保存すること -->
  <META http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>A Prototype Powered by Google Map</title>
  <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() {
  
    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(
//                    '<div id="InfoWindow">'
//                      + point
//                      + '</div>')); // 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>
  </head>

  <!-- IE 6.0 では、<HEAD>～</HEAD> に JavaScript を記述しないとエラーとなってしまう -->
  <body onLoad="init()">
  <div id="map" style="width: 500px; height: 400px"></div>
  </body>
</html>

上のスクリプトの実行サンプルはここ (地図が表示されたらクリックしてみてください)
JavaScript は必ず～の間に書くこと。～の間に書くと IE 6.0 では「操作は中断されました」というエラーとなってしまいます。このエラーでは　GoogleマップとIEの「開けません。操作は中断されました」　が参考になりました。

トラックバック URL: https://perltips.twinkle.cc/trackback/18

Posted on 2005-10-21 by yas |