Google Maps APIの始め方

2005/9/14 23:10

Google Maps APIを利用すると、「全国ロケ地図」「KaGMapラボ　路線検索マップ」「ぐぐるなびマップ(β版)」などのように、誰でもGoogleマップを利用したサイトを自由に作ることができます。しかし、Google Maps APIの公式ページは英語版のため、取っ付きにくいかもしれません。そこで、Google Maps APIの導入までの手順を簡単に解説したいと思います。

API利用のためにすることは、サインアップだけです。

Google Maps APIの”Sign up for a Google Maps API key”をクリックします。

ページ下部のチェックボックスにチェックを入れ、My Web Site URL:という欄に、APIを利用するページを置くディレクトリまでのURLを入力します。

　例えば http://www.blog.livedoor.jp/cosmoworld/map.html というページでAPIを利用するならば、 http://www.blog.livedoor.jp/cosmoworld/ と入力します。

Generate API Keyボタンをクリックすると、そのURL専用のキーが生成されます。

　なお、ここでGoogleのアカウントを持っていない(もしくはログインしていない)場合は、Googleアカウントへのログイン画面が出ますので、そこでログインするなり、新規登録をするなりしてください。ログインできれば、キーが生成されます。

サインアップは以上で終了です。

キーが生成されたページには、”Here is an example web page to get you started on your way to mapping glory:”と書かれた下に、スクリプトのサンプルが表示されます。とりあえずこのスクリプトをコピーして、ファイルに貼り付けてウェブサイトにアップしてみましょう。アップしたページにアクセスし、きちんと地図が表示されれば成功です。

【サンプルスクリプトの解説】

　<div id=”map” style=”width: 500px; height: 400px”></div> …(1)

このdivタグの場所に地図が表示されます。

　var map = new GMap(document.getElementById(“map”));

GMapオブジェクトを生成しています。document.getElementById(“map”)で、ページ内のタグの中でid=”map”が指定されているタグを抽出しています。すなわち、(1)のdivタグが該当します。

　map.addControl(new GSmallMapControl());

addControlはGMapオブジェクトのメソッドです。new GSmallMapControl()で生成される地図移動操作をするオブジェクト(小型版)を、地図に追加しています。大型版を追加したいときは、GLargeMapControl()を利用します。

　map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

centerAndZoomもGMapオブジェクトのメソッドです。東経-122.1419、北緯37.4419位置を示すGPointオブジェクトと、ズームレベルを引数に取ります。これで、指定された地点の地図が指定されたズームレベルで表示されます。

参照:Google Maps API Documentation