GoogleMapを設置する方法

Ajaxを使用したアプリケーションの代表格でもあるGoogleMapだが、自分のHP上に設置する方法が簡単そうだったので、試してみた。

1.GoogleMapを使用するためのMapsAPIキーを取得する
以下のサイトから、実際に地図を表示させたいHPを設置する予定のディレクトリ、またはドメインを登録し、その画面に対して割り当てられたMapsAPIキーを取得する。

http://code.google.com/intl/ja/apis/maps/signup.html

この際に設置予定のファイル名まで記述すると、設置時に不具合が出るので注意する。


2.自分のHPからGoogleMapAPIに対してリクエストをする

ヘッダーで以下のように記述し、グーグルのJavascriptファイルを読み込むようにする。
<script src="http://maps.google.com/maps?file=api&v=2.s&sensor=false&key=工程1で取得したAPIキー" type="text/javascript" charset="UTF-8">

scriptタグのcharsetオプションでUTF-8を指定しているが、これは文字化け対応をしているため。
マルチバイト文字を使用しなければ基本的に文字化けはしないはずだが、HPのエンコードとともにUTF-8に統一しておいた方が良い。GPS等を使用している場合にはsensorオプションをTrueに設定する必要がある。


3.表示位置を指定する。
GoogleMapを表示したい場所にDIVタグを設置する。またDIVタグに対して任意のIDと、表示したい地図のサイズを指定する。

<DIV id="googlemap" style="width:500px;height:500px;"></DIV>


4.表示内容を設定する
工程3で指定したIDに表示するgooglemapについての設定を行う。
設定はjavascriptで行うのだが、今回は関数を使用しないため、記述をHTMLの最後尾に行うことにした。
（表示位置として設定した場所よりも前に素のjavascriptコードを入れると、エラーになるので注意する。
どうしても外部javascriptやHTMLのヘッダーにコードを追い出したい場合にはBodyタグonloadアクションから実行する関数内に閉じ込めるなど工夫が必要となる）

<script type="text/javascript">
<!--
/* 表示位置の指定をする ・・・【1】*/
var map = new GMap2(document.getElementById("googlemap"));

/* 【1】で指定した地図に対して、デフォルトの中心座標と尺度を設定する・・・【2】 */
/* map.setCenter(new GLatLng(「中心座標の緯度」,「中心座標の経度」),「尺度」); */
map.setCenter(new GLatLng(35.658587,139.745425),15);

/* コントロール用のインターフェイスを設定する・・・【3】 */
/* GLergeMapControlのほかに、 */
map.addControl(new GLargeMapControl());
// -->
</script>

以下に設置例を用意した。
GoogleMap設置例