Google Local（Google Maps）のAPIを初めて使う(dinop.com)

はじめに

　Google Local（Google Maps）の地図データを自由に利用するためのAPIが公開されてからだいぶ時間が経つ。認知度はだいぶ高いが実際に利用しているサイトを目にすることは少ない。私も興味はあったがとりあえず"使いたい"とは思わなかったので放置状態だった。
　しかし最近GPSを入手したこともあり（最近と言っても2年ぐらい前だが）、なんとなくホームページのコンテンツに地図情報をつけたいと考え始めてきた。ということで遅ればせながらGoogle Maps のAPIを調べてみることにした。

Google Maps API Keyの取得

　Google MapsのAPIを利用するためにはAPI Keyの取得が必要です。
　取得はGoogle内のこのページからできます。
http://www.google.com/apis/maps/signup.html

　取得の際にはホームページのURLを入力する必要があります。このURLは不適切なものを入力するとAPIが利用できません。
　例えばhttp://www.dinop.com/google/test.htmlというURLで利用したい場合．．．
・「http://www.dinop.com/google/test.html」と入力すると使えない
・「http://www.dinop.com/google/」と入力すると使える
・「http://www.dinop.com/」と入力すると使えない
というようになります。

　取得は何度でもできるので、間違えていた場合は取得しなおします。

　API Keyはこのようなランダムな文字列です。

ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA

当然のことながらこのAPI Keyは入力したURLごとに異なります。

サンプルコードを使う

　API Keyの取得画面にはAPI Keyと同時にすぐに利用できるようにサンプルコードが表示されています。

<!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">
    <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
    
    //]]>
    </script>
  </body>
</html>

　サンプルコードは本来そのまますぐに利用できるはずのものですが、イマイチ使えないことがあるので 1行だけ追加しておきます。それが赤字の部分です。
　太字の部分はAPI Keyです（人それぞれ異なる値です）。

　このサンプルコードをWEBサーバーにアップロードすれば使えるようになります。
　実際に動いているのがこのページです。

　下はサンプルコードをそのままフレームで利用したものです。マウスでドラッグすれば地図を動かすこともでき、普通にGoogle Mapsの機能をそのまま持っています。

dinop.com