Google Maps JavaScript API v2
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
APIキーを取得
2008/5/5
- 「Googleアカウント」取得
-
「Google マップ API」にアクセス
利用方法の「Google マップ APIキーを登録する」リンクをクリック。
-
マップ API を申し込む
利用規約に同意しますにチェックを入れ、Googleマップを設置するサイトのURLを入力したら、APIキー作成ボタンをクリック。
-
APIキー取得
Googleアカウントが開いたら、Googleアカウントで取得したIDとパスワードで、ログインします。 ログイン後、以下のように取得した「APIキー」とサンプルコードが表示されます。
APIキーを忘れても、登録したURLにつきユニークなAPIキーが発行されているので、再度APIキー登録の手順をふめば、以前取得したAPIキーを確認することができます。
サンプルを見る
<!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"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if(GBrowserIsCompatible()){ var map=new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>
Googleマップ設置の際の注意点
2008/5/5
ページの文字コードに注意
ページの文字コードが「utf-8」以外の場合、IEでスクリプトエラーが発生します。 そのため「Shift_JIS」など他の文字コードの場合は、Googleマップの外部JavaScriptファイルを読み込んでいるscript要素のcharset属性に「utf-8」を指定してください。
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw"
type="text/javascript" charset="utf-8"></script>
他人のAPIキーを使ってはいけない
パラメータ「key」には、自分で取得したAPIキーを指定しましょう。
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw"
type="text/javascript"></script>