ページに地図を埋め込む
そろそろ文字を書き込んだりして、ページらしくしてみましょう。例として、下のようにタグを書いてみました。このタグの中のGoogle Mapsには、以下の機能を付けています。
- GLargeMapControl（大型のズームと位置移動コントロール）、GScaleControl（地図のスケール）、GMapTypeControl（地図のタイプを切り替えるコントロール）の三つのコントロールを付けています。（赤字の部分）
- 横の長さ500ピクセル、縦の長さ500ピクセル。
- 緯度経度を下に表示しています。（紫字の部分）
- 中心位置はサンフランシスコ、アルカトラズ島。ズームは１６段階。
ページらしくするために今回付け加えた部分は、緑色で示しています。
|
<!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.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
map.setCenter(new GLatLng(37.82698040443649, -122.4230146408081), 16);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<table bgcolor="#8d878f" cellspacing="5"><tr><td>
<table bgcolor="#c8b4cb"><tr><td width="700">
<div align="center"><font size="5" color="blue">GoogleMapで世界旅行をしようではないか。</font></div><p>
<table><tr><td width="100"></td><td>
― つかいかた ―<br>
<font size="2">
・ドラッグすれば、地図がグリグリ移動します。<br>
・ダブルクリックすれば、クリックした地点に地図の中心点が移動します。<br>
・左上のコントロールで、ズームと移動ができます。<br>
・右上の「マップ」を選択すれば地図に、「サテライト」を選択すれば衛星写真に切り替わります。<p>
<div id="map" style="width: 500px; height: 500px"></div>
<div id="message"></div>
<br>
<font size="1">*ネッシー、イェティ、UMA、野人、サスカッチ、飛行中のICBM、エルヴィス・プレスリーなどを発見した場合には、あなたの判断で当局に届けるかどうか決めてください。</font>
<br><br><br><br><br>
</td<td width="100"></td></tr>
</table>
</td></tr></table>
</td></tr></table>
</body>
</html>
|
|
ありゃりゃ？文字化けしてしまった！
― 実は、冒頭部分の"head"で、"charset=utf-8"と定義していたからなのです。この場合、ページをUTF-8で書かなければ、文字化けします。今回Shift-JISでしか保存できないエディタを使って書いたので、このようなことになってしまったのです。
文字化けを回避するためには、以下の二つの方法が考えられるでしょう。
- "head"部分の、"charset"を変更する。たとえば、日本のホームページで最もよく使われている、"charset=Shift-JIS"に書き換える。
- サクラエディタなど文字コードセットを設定できるエディタを使って、"utf-8"の文字コードで保存する。
どちらがよいのかは、私は残念ながら判断できる能力がありません。ただし、uft-8は日本語環境のみならずいろいろな言語にも対応する文字コードなので、「大は小を兼ねる」という意味では使った方がベターなのかもしれません。私はMovable Typeの書式と統一するために、必ずutf-8を使っています。
上のページをサクラエディタで開き、「文字コードセット」をutf-8にして改めて保存しました。すると、文字コードが正しく読み取られました。
