このウィザードはGoogle Maps APIを使います。
地図の表示、マーカーの位置をカスタマイズするマップコントロールを使って望みのズームレベルまでズームイン・ズームアウトしましょう。
望みの住所、場所を入れてボタンを押します。もしマーカーが少しずれていたらドラッグして調整できます。
情報窓と地図のコントロールをカスタマイズする
マーカーをクリックした時に次の文章を表示する(吹き出し不要の場合は空のままにしてください):
地図が読み込まれたらすぐに情報窓を表示する:
パン・ズームコントロールを表示する:
マップの形式のコントロールを表示する:
地図の幅:
地図の高さ:
既定の地図の形式:
コードを作るMaps API にはあなたのGoogle アカウントとWebサイトのURLに関連付いた
無料のAPIキーが必要です。
Maps APIの利用規約(英語)に同意して使ってください。
APIキーはこちらで作ることができますので、
キーを下のscriptタグの中にある "&key=" パラメーターの後に付け足してください。
(訳注:metaタグでcharset=Shift_JISを設定してあります。UTF-8、EUC-JPなどを使う場合は変更してください。)
<!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=Shift_JIS"/>
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key="
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng;
map.setCenter(center, );
map.setMapType();
map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: px; height: px"></div>
</body>
</html>
携帯用にも使えるGoogle Staticマップはこちら