« 毛球寶兒2006/07/19 | メイン | 寛永十六年の墓誌銘 - 黒谷 »

GoogleMaps活用するぞ!(5) - 簡単な地図ページを作ってみよう

(カテゴリ:GoogleMaps

前回の例を、再出します。ただし、余計なコメントの行は省略しています。

<!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=xxxxxxxxxxxxxxxxxxxxxxxxxxx"
type="text/javascript"></script>

<script type="text/javascript">

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(35.007643, +135.778227), 13);

}

}

</script>

</head>

<body onload="load()" onunload="GUnload()">

<div id="map" style="width: 500px; height: 300px"></div>

</body>

</html>

これを使ってGoogle Mapsの地図ページを立ち上げる手順は、以下のとおりです。(ここから後は、全て自己責任で行なってください。)

(1)htmlページを新規作成します。
(2)上のタグをコピーして貼り付けます。
(3)APIKeyを指定する箇所('xxxxxxxxxxxxxxxxxxxx'と表記している部分)に、あなたが受け取ったAPI Keyを埋め込みます。
(4)保存して、あなたが登録したディレクトリ=フォルダにアップします。

うまくいけば、下のような地図が現れるはずです。(クリックすると元の大きさの画面が出てきます)

005_01.JPG

おっと!カリフォルニア州パロアルトではなくて、日本の京都の地図が出てきました。

実は、上のタグの赤で表示した、

map.setCenter(new GLatLng(35.007643, +135.778227), 13);

の数字を変えておいたのです。この行はJavascriptですが、余計な詮索はとりあえずやめておきましょう。基本はGoogle Mapsを使ったページを作ってみることなので、私はJavascriptの研究をするつもりはありませんから。とにかく、この行の意味するところは直前の行で定義された"map"という変数(var)に対して、その中心点を決定する目的の行のはずです。紫色の数値が、緯度を現しています。つまり、北緯35.007643度です。青色の数値が、経度を現しています。東経はプラス、西経はマイナスで表します。つまり、東経135.778227度です。さらに言えば、緑色の数値は、拡大ズームの大きさを現しています。この数値(整数)を大きく設定したり小さく設定することによって、画面にまず表れる地図の拡大ズームが決定されます。


京都の例を出しましたが、他の地点の例もいくつか挙げておきます。一度書き換えて確認してください。

緯度経度地図の中心点
35.660373+139.729260東京・六本木ヒルズ
33.589044+130.399775福岡・西鉄福岡天神駅
53.380410-2.889232リバプール・メンローヴアヴェニュー(ジョン・レノンの生地付近)