Google Maps API

　この機能を使う事によって、ページに高機能なままでGooglemapを埋め込む事が出来る。WordpressのGooglemapsの機能はこれを使ったプラグインだ。

少々、古い情報です。現在API3.0からは、APIキーは不要なようです。
また書きます。

APIキーの取得

　まず最初に、GoolemapからAPIキー（無料）を取得しなければならない。下記のページにアクセス（英語なんですけど・・・）して、

http://code.google.com/apis/maps/index.html

I have read and agree・・・にチェックを入れて、自分のwebサイトのアドレスを入れる。APIキーはサイトごとの発行になっているようである。人の事イエんですがagreementをもっとよく読んだ方がいいとは思いますよ。

ところで、APIの取得にはGoogleのアカウントが必要なんですが、これもメイルアドレスだけ入力すれば取得できます。先ほどのページをクリックしていきメッセージに従えばいいと思います。

　うまくいけば、すぐにGoogleからAPIキーがメイルで送られてきます。そしたら、もう使えます。

APIキーは長いので、どこかにコピペして保存しておいた方がいいです。

サイトへの埋め込み方法

　埋め込みはJavaScript覚え書きです。仕組みは今ひとつよくわかってないので恐縮なのですが、表示が変わるたびにページがリロードされているみたいです（ようするに全部が書き換えられる）。

宣言

　まず、ページのヘッダ＜head＞部にこのキーを使いますよってのを記述します。下記。Pukiwikiの都合で記号に全角を使っていますので、ご注意。

<script src="http://maps.google.com/maps？file=api＆v=2＆key=取得したAPIキー" type="text/javascript" charseet="utf-8"></script>

charset=”utf-8”というのを書かないと、IEでエラーをはかれてしまうみたいです。私はマックしかないんで確かめられませんけど。

Bodyに直接埋め込む(最も簡単な方法)

　下記のようにbodyに記載する事でいけます。

<div id="map" style="width: 400px; height: 400px;"></div>
 <script type="text/javascript">
 //<![CDATA[
     var map = new GMap2(document.getElementById("map"));
     map.setCenter(new GLatLng(36.147786,138.015919), 12);
 //]]>
 </script>

まず、1行目で、divレイヤーをID='map'で宣言し領域を確保
2行目で、mapをid=で宣言。
3行目で、地図の中心と倍率を指定します。mapのインスタンスとして、map.setCenter(GLatLng(緯度 , 経度) , 倍率);　と指定するだけです。

これだけで地図は表示できます。でも、これでは面白く有りません。次に倍率などのコントロールを入れてみます。map.setCenterの後に続けて下記記載します。

   map.addControl(new GSmallMapControl());　
   map.addControl(new GMapTypeControl());

1行目は、倍率などのコントロールを左に表示します。SmallのところをLargeとするとメモリのついた大きなコントロールになります。
2行目は、地図のタイプを左上に表示します。

これでほとんど、やりたい事は出来ていると思います。でも、これだけではいまいちです。なので、マーカーを表示します。

        var point = new GLatLng(36.152465,138.00828);
        map.addOverlay(new GMarker(point));

さらに、マーカーをクリックしたら吹き出しが飛び出るようにします。

   GEvent.addListener(map, 'click', function(overlay, point) {
   if (overlay) {
     overlay.openInfoWindow(
         document.createTextNode("薬師平ホテル（入浴可）"));
    }
 });

マーカーを増やしたい場合は、変数宣言のpointをpoint2とかして追加し、addOverlayも追加します。

以下に、実施例を示します。

 <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=api-key-hogehogehoge"
            type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 400px; height: 280px;"></div>
    <script type="text/javascript">
    //<![CDATA[
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(36.147786,138.015919), 14);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var point = new GLatLng(36.152465,138.00828);
		map.addOverlay(new GMarker(point));
		GEvent.addListener(map, 'click', function(overlay, point) {
        if (overlay) {
          overlay.openInfoWindow(
               document.createTextNode("薬師平ホテル（入浴可）"));
        }
      });   
    //]]>
    </script>
  </body>
 </html>

このように実行されます。pukiwikiのiframeプラグインで表示しています。

Dirthighway wiki

目次

Google Maps API

APIキーの取得

サイトへの埋め込み方法

宣言

Bodyに直接埋め込む(最も簡単な方法)