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>