Google Maps API はじめの一歩 |
- 日時： 2009/06/27 04:48
- 名前： SoRA
- こんにちは、SoRAです。
Google Maps APIの初歩的な内容（Webページに地図を表示する）をまとめてみました。
お見苦しい点があるかとは思いますが、以下に記述します。ご質問等がありましたらお願いいたします。
【準備】
1) 以下のページでGoogle Maps APIを使用するためのキーを取得する。
※地図を表示するページのURLが必要となります。新規に作成する場合はあらかじめ決めておいてください。
http://www.google.co.jp/apis/maps/signup.html
【ページ作成のポイント】
最低限押さえるべきポイントは以下の5つです。
1) 文字コードはUTF-8とする。
UTF-8以外の場合はブラウザが「エラー:'GMap'は宣言されていません」などのエラーを返して地図が表示されなくなることがあります。
2) <head>〜</head>の間に以下のようにscriptタグを記述する。
<script src="http://maps.google.com/maps?file=api&v=2.x&hl=ja&key=【Google Maps APIキー文字列】" type="text/javascript" charset="utf-8"></script>
→これにより、Google Maps APIの機能が利用可能となります。
3) 地図表示領域をdivタグを用いてページ内に定義する。
このとき、style属性を用いて地図表示サイズも定義する。
例) <div id="maparea" style="width:320px; height:240px"></div>
4) <body>タグにonload属性、onunload属性を定義して、ページを開いたとき／閉じたときまたは他のページへ移動するとき に実行する関数を指定する。
例) <body onload="mapload()" onunload="GUnload()">
onloadに指定する関数は自分で作成します。（後述）
アンロード時は必ずGUnload()を呼び出すようにします。これはGoogle Maps APIの提供関数で、Google Mapの表示に使用されたメモリを開放するものです。
→忘れると、地図画面を繰り返し表示するにつれてブラウザの動作が重くなってしまいます！
5) bodyタグのonload属性に指定したJavaScript関数を記述する。
最低限必要な処理はGMap2オブジェクトの生成と中心点指定(setCenter())の2つです。
例)
function mapload() { // ←onload属性に指定した関数名
if (GBrowserIsCompatible()) { // ←Google Map表示可能なブラウザの場合のみ実行
var map = new GMap2(document.getElementById("maparea")); // ←地図表示領域のIDをgetElementById()の引数に指定
map.setCenter(new GLatLng(35.6895008872291, 139.69174683094), 13); // ←setCevter()の第1引数はGLatLngオブジェクトで緯度、経度を指定。第2引数は縮尺
// その他、コントロールの追加やマーカー表示など、必要に応じて記述
}
}
なお、Google Maps API関数についての詳細は以下のページを参照してください。
http://code.google.com/intl/ja/apis/maps/documentation/reference.html
 |
|
Re: Google Maps API はじめの一歩