初出：2006年10月26日 19:10

気がつくと今月は一回しか更新していなかった。書きたいネタはいくつかあるんだけど、どれも今すぐまとめておかないといけない内容かって自問自答すると、そうでもない。いわゆる「ブログ日記サイト」をやっている人たちって、ある意味スゴイなあと思うわけです。そこに書いた数行の文章、それって本当に書きたかったものなんですか?　まるで排泄作業のようにも思えるんだけどね。

思いきり閑話休題。最近やたらとGoogleな話題が多いですが、今回は極めつけ。これでひとまずGoogleシリーズは終了かな。今回はGoogle Mapをサイトに組み込む方法をまとめます。まずはサンプルをどうぞ。

まあ、こんな感じで組み込めるわけです。当然ページ上でグリグリ動かせるし、航空写真との合成なんかもできます。

さて、その方法ですが、何はともあれGoogleアカウントを取得。いちいちアカウントを作るのは面倒って考えもありますけど、GMailやGoogle Talk、FireFoxユーザならGoogle Browser Syncなどにも共通で、使えるので持っていて損はないです。でもこう書くとGoogleアカウントって.Macアカウントと大差ないな。

ではGoogle Mapを組み込むのになんでアカウントが必要かというと、Google Mapを自分のサイトで利用するにはGoogle Map APIというものを使うんですが、それにはまずGoogleから認証キーを発行してもらう必要があるんです。

すると、やたらと長いキーが即座に発行されます。

次にGoogle Map APIコードレベルで実際に使っていくわけですが、世の中にはいろんなサイトで便利ツールが用意してくれているので、それを使わない手はない。その中で、今回使ったのは「Google Maps簡単作成ツール：GMapCreator」。Firefoxで動作します。

画面上に「初期画面」「コントロール」「表示」というのがあるので、左から順に設定していきます。初期画面では、先ほど発行されたGoogle認証キーを入力し、地図のサイズを指定します。

コントロールでは、地図上で指定できるいろんな機能を使うか、使わないか選択できます。訳分からんかったら、全部入りでいいでしょう。

「表示」にある「中心座標の表示」は、地図の下のほうに、その時点の中心座標を表示させるエリアが出てくるんですが、これを使うとどう便利になるのか、うーん、よく分かりません。

これらを設定したら、実際に地図でどこを表示させるか決めていきますが、これは簡単。いつものGoogle Mapの要領でサイズを変えたり、マウスでグリグリ動かして場所を選びます。…で、完成したら「コード生成」ボタンを押すと、下の方にHTMLコードがごっそりできます。

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Generator" content="GMapCreator,http://www.geekpage.jp/">
    <title>Google Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9PBSm3IUMROKU6kvIwug2hSedycSDsTaC_Vc3Vwoh9coDspO2RTiii7n4BoMmzCGNjRyaqg50hzXng"
        type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    function onLoad() {
      map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(35.639754964001355,139.67077732086182),16);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GOverviewMapControl());
      map.setMapType(G_NORMAL_MAP);
    }
    //]]>
    </script>
  </head>
  <body onload="onLoad()" style="margin:0px; padding:0px;">
    <div id="map" style="width:340px; height:400px; margin:0px; padding:0px;"></div>
    <div style="font-size:10px;text-align:right;"><a href="http://www.geekpage.jp/">GMapCreator</a></div>
  </body>
</html>

これをそのままHTMLファイルとして保存すれば、とりあえずWebページになります。もちろん装飾とかしたいですよね?　その場合は以前はなるべくいじらず、<body onload="onLoad()" style="margin:0px; padding:0px;">については、onload="onLoad()" は手を付けちゃダメ。marginとpaddingは適当に数字を入れてページの余白を作るのはOK。

あー、疲れた。実はこの後に、上の地図でもやっている経路情報についての作り方もまとめようかと思っていますが、これはまた次のネタということで。いちおう、経路マップはこちらが便利です。