GoogleMapAPIを使う ↑
GoogleMapAPIの取得 ↑
- gmapで遊ぶ前にAPIkeyを取得する。http://www.google.com/apis/maps/から。
- 2006.8.8現在はAPIバージョン2らしい。IEでもきちんと表示される。（とりあえず表示は。。）
地図の表示 ↑
<!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=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.2**** , 137.0****), 15);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
- ここで、
key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
は、自分が取得したAPIキーをいれておく。
map.setCenter(new GLatLng(35.2**** , 137.0****), 15);
には、地図の中心の座標を入れる。WGS84（世界測地系）で入力。度以下は小数で表示。ちなみに、座標のあとの15という数字は地図の拡大率。数字が大きいほど地図が細かくなる。これはAPIバージョン１と違うところ。
- さらに、
<div id="map" style="width: 500px; height: 500px"></div>
は、表示される地図の大きさを入れておく。
- これだけをcharset=utf-8というのだから、ちゃんとUTF-8でファイルを作ってサーバーに送り込めば完了。
コントロールの追加 ↑
- 地図表示だけではなんともならないので、コントロールを追加する。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.2**** , 137.0****), 15);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
上の２行は変わらず、三行目のmap.addControl(new GLargeMapControl());で、パン・ズームコントロールが追加される。また、四行目のmap.addControl(new GMapTypeControl());で、地図切り替えコントロールが追加される。
