ホーム > 技術情報

グーグルマップ(Google Maps API)

Google Maps API
ビットマイスターのこちらのページに使用されている地図は、Google Mapsを利用して作られています。
備忘録的にキー(Maps API key)の取得からカスタマイズ方法までを書いておきたいと思います。

1.キー(Maps API key)の取得
まずは地図を使う条件として、Maps API keyを取得する。

(1)Google Maps APIのページにアクセス。
http://www.google.com/apis/maps/
gmap1.gif
『Sign up for a Google Maps API key』リンクをクリック。
※グーグルのアカウントを持っていないと、アカウント取得ページに移るので、必要事項を記入して取得。


(2)規約&Google Maps APIサインアップページにて、地図を表示するサイトのURLを登録。
gmap2.gif
以下に注意事項などもかかれている。
・エンドユーザーが自由にアクセスできるサイトで使用すること。
・1日5万ページビュー以上のページに使う場合は、使用許可を取る。
・APIは定期的にアップグレードするので、それにあわせて使用しているサイトでも更新してほしい。
・マップやロゴの改変をしてはいけない。
・グーグルは将来的にマップに広告を表示する権利があり、それらを改変してはいけない。

Maps API key
・規約に同意するにチェックをする。
・My Web Site URL:http://~ URLを入力
・Generate API Keyボタンを押す。


(3)Maps API key取得完了
gmap3.gif
Thank you for signing up for a Google Maps API key. Your key is:
・キーが表示されるので書き留めておくか、ファイルに保存しておく。

This key is good for all URLs in this directory:
・登録したURLを確認。
※http://www.example.com/maps/のように、ディレクトリを指定した場合は、ディレクトリ以下で使用可能となる。

Here is an example web page to get you started on your way to mapping glory:
・サンプルコードが表示されるので、こちらも保存しておく。


2.地図の設置
ページを作る前に確認しておかなければいけない点。
・XHTML形式、文字エンコードはUTF-8
・既存のページ(Shift_JIS、EUC-JPなど)に貼り付けたい場合は、別途UTF-8でページを作成して、インラインフレームで読み込むという方法がある。

(1)表示場所
http://maps.google.co.jp/
グーグルマップのページにアクセスする。
gmap4.gif

最大限に拡大された状態で、地図上の目的の場所をダブルクリック。
(クリックした場所が中央に来るように調整される。)

地図の右上に『印刷 メール このページのリンク』と表示されている部分の『このページのリンク』をクリックすると、URLにパラメーター(緯度、経度)が表示されるのでメモしておく。
http://maps.google.co.jp/?ll=35.636058,139.640146&spn=0.005677,0.008047
( ll=35.636058,139.640146 )
( ll=緯度,軽度 )

Google Maps API Documentation
http://www.google.com/apis/maps/documentation/
このページに記載されているサンプルを確かめながら、パラメーターなどを設定して作成していく。

カスタム設定をいくつか説明すると、
//縮尺拡大版
map.addControl(new GLargeMapControl());

//マップの左下部分にKm表示
map.addControl(new GScaleControl());

//マップ、サテライト、ドュアル切り替え
map.addControl(new GMapTypeControl());