事前準備（GoogleMapサービス開始申込）
Google Mapを自分のホームページで使用するにあたり、Google Maps APIのキーが必要になります。
ここでは、キーの取得方法を記述いたします。
1. Googleアカウントを取得する。
Googleアカウント作成ページで、Googleアカウントを作成してください。
アカウント作成に関しての詳細は割愛いたします。
2. Google Maps APIキーを取得する。
以下の手順に沿って、APIキーを取得します。
GoogleMapsサインアップページにアクセスし、「利用規約を読んだ上でこれに同意します」にチェックして、「利用者のウェブサイトの URL:」に自分のホームページのURLを入力し、「APIキーの生成」ボタンを押します。
これにより、APIキー発行ページに遷移します。
ここで付与されたAPIキーは大事ですのでメモしておいてください。
まぁ、忘れたとしても、サインアップページで再度同じ手順を行えば確認できますが…
3. 準備完了！
以上の手順で使用準備完了です。
下にあるHTMLをホームページにアップして、GoogleMapが表示されることを確認してください。
渋谷周辺の地図が表示されるはずです。
ただし、以下の2点に注意してください。
�．侫．ぅ襪諒源�コードはUTF-8限定です。
他の文字コードだと、真白になります。
�∪峪�の部分は、先ほど取得した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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ここに取得したAPIキーを記述してください。" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.664694, 139.700016), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
-誰かのホームページ-