地図ページの作成例

グーグルマップの挿入

グーグルマップを使って、地図を挿入したページを作ってみましょう。

地図のURLと座標の取得

「富士山」「黒川温泉」「宗谷岬」「琵琶湖」の４つの地図を表示するため、準備としてグーグルマップでそれらを調べます。
グーグルマップで検索を行い、メール用のリンクとして提供される座標を取得します。

検索を行い、目的地が表示されたら地図の大きさや位置を調節します。プリンタアイコンの横に鎖のアイコンがありますので、そこをクリックするとURLとタグが表示されます。
「このリンクをメールに貼り付けて地図を共有できます」という部分にはリンク用のURLが、「HTMLを貼り付けてサイトに地図を埋め込みます」と書かれた部分には<iframe>タグがあります。
ブログやホームページにそのまま貼り付けるなら、<iframe>をコピーします。まずはその中身を見てみましょう。

コピーをすると下記のようなタグが取得できます。HTMLに貼り付けると次のようになります。

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=%E5%AF%8C%E5%A3%AB%E5%B1%B1&aq=&sll=35.362876,138.731575&sspn=0.007393,0.016512&g=%E5%AF%8C%E5%A3%AB%E5%B1%B1&brcurrent=3,0x601be3729342ee21:0x7304e8e48f9f6eaa,0&ie=UTF8&hq=&hnear=%E5%AF%8C%E5%A3%AB%E5%B1%B1&ll=35.362876,138.731575&spn=0.236584,0.528374&t=m&z=12&output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&source=embed&hl=ja&geocode=&q=%E5%AF%8C%E5%A3%AB%E5%B1%B1&aq=&sll=35.362876,138.731575&sspn=0.007393,0.016512&g=%E5%AF%8C%E5%A3%AB%E5%B1%B1&brcurrent=3,0x601be3729342ee21:0x7304e8e48f9f6eaa,0&ie=UTF8&hq=&hnear=%E5%AF%8C%E5%A3%AB%E5%B1%B1&ll=35.362876,138.731575&spn=0.236584,0.528374&t=m&z=12" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

大きな地図で見る

実はこのままでは非常に見にくいため、タグ内のURLから必要最小限の部分だけ取り出しましょう。
地図の表示に必要な情報はURLの中にいくつかのパラメータで指示されています。

最も重要なのが地図の中心座標です。「ll=35.362876,138.731575」の部分が緯度と経度を表しています。「ll」がない場合は「sll」から座標を取ります。
地図の大きさは「z」で表記されています。「z=12」の部分です。

これらのパラメータから必要最小限のURLを作ります。各パラメータは「&」でつなぎます。最後に「output=embed」を付けると、フレーム用に地図だけを表示します。

http://maps.google.co.jp/maps?ll=35.362876,138.731575&z=12&output=embed

これを<iframe>タグに入れてみましょう。属性も幅、高さ、URLだけに簡略化します。

Aマーカーもなくなっていますが、もしマーカーが必要であれば、URLは「http://maps.google.co.jp/maps?q=loc:35.362876,138.731575&iwloc=J&z=12&output=embed」とします。

他の場所も、緯度と経度が判れば、その部分を入れ替えれば同様に表示できます。

パラメータllが見つからない場合

緯度経度のパラメータllが見つからない場合。sllが見つかるかもしれませんが、これを使っても地図がずれてしまいます。その場合は、地図の目的地で右クリックして「ここを地図の中心にする」または「ズームインして詳細を表示」を選ぶと正しく中心が定まります。それから大きさを調節してURLを取得してください。
検索後にAマーカーが出ている場合は、マーカーをクリックして情報ウインドウを開き、「その他」をクリックすると「ここズーム」を選べます。

知っておくと便利なこと

・地図の中心を決めたいときは、その場所で右クリックをして「ここを地図の中心にする」を選ぶ。
・衛星写真を表示させたいときは「t=k」、衛星写真＋地図なら「t=h」、地形図なら「t=p」というパラメータを入れる。標準の地図は「t=m」を省略しています。

完成版のソース

実例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>趣味のページ</title>
<style type="text/css">
h1 {
	font-size: 18px;
	font-weight: bold;
	color: #993300;
	background-color: #FF9933;
	border-style: solid;
	width: 300px;
	padding: 5px;
	border-left-width: 10px;
	border-color: #993300;
}
th {
	color: #FF9933;
	background-color: #993300;
	font-size: 14px;
}
td {
	width: 300px;
	vertical-align: top;
}
</style>
</head>

<body>
<h1>趣味のページ</h1>
<hr>

<p>旅行で訪れた場所を地図で紹介します。</p>

<table border="2" cellspacing="2" cellpadding="2">
	<tr>
		<th colspan="2">富士山</th>
		<th colspan="2">黒川温泉</th>
	</tr>
	<tr>
		<td>　富士山は、静岡県（富士宮市、裾野市、富士市、御殿場市、駿東郡小山町）と山梨県（富士吉田市、南都留郡鳴沢村）に跨る活火山である。<br>標高3,776mの日本最高峰（剣ヶ峰）であるとともに、日本三名山（三霊山）、日本百名山、日本の地質百選に選定されている。富士箱根伊豆国立公園に指定されている。1952年（昭和27年）に特別名勝に指定された。</td>
		<td><iframe width="300" height="200" src="http://maps.google.co.jp/maps?ll=35.362876,138.731575&t=m&z=12&output=embed"></iframe></td>
		<td>　黒川温泉は、熊本県阿蘇郡南小国町にある温泉である。阿蘇山の北に位置し、南小国温泉郷の一つを構成する。広義の阿蘇温泉郷に含む場合もある。<br>
		全国屈指の人気温泉地として知られ、2009年版ミシュラン・グリーンガイド・ジャポンで、温泉地としては異例の二つ星で掲載された。なお「黒川温泉」の名称は2006年に地域団体商標として商標登録（地域ブランド）されている。</td>
		<td><iframe width="300" height="200" src="http://maps.google.co.jp/maps?ll=33.076889,131.140473&t=k&z=14&output=embed"></iframe></td>
	</tr>
	<tr>
		<th colspan="2">宗谷岬</th>
		<th colspan="2">琵琶湖</th>
	</tr>
	<tr>
		<td>　宗谷岬は、北海道稚内市にある岬である。<br>
		「岬」とは称するものの、単に海岸線がカーブしているだけであり、尖った地形ではない。一般人が行くことのできる範囲における日本最北端の地であるため、「日本最北端の地」と記された石碑が建てられており、この石碑を目指してやってくる観光客は数多い。</td>
		<td><iframe width="300" height="200" src="http://maps.google.co.jp/maps?ll=45.522345,141.936321&t=h&z=14&output=embed"></iframe></td>
		<td>　琵琶湖は、滋賀県にある湖。日本で最大の面積と貯水量を誇る。湖沼水質保全特別措置法指定湖沼。ラムサール条約登録湿地。<br>
		河川法上は一級水系「淀川水系」に属する一級河川であり、同法上の名称は「一級河川琵琶湖」である。</td>
		<td><iframe width="300" height="200" src="http://maps.google.co.jp/maps?ll=35.254591,136.054688&t=p&z=8&output=embed"></iframe></td>
	</tr>
</table>

<p>解説文はwikipediaより引用させていただきました。</p>

<hr>
<p align="center"><a href="index.html">戻る</a></p>
</body>
</html>

今回は見本としてwikipediaより説明文を引用しましたが、旅行記の場合は自身の体験談を記述しましょう。

戻る