« やさしいビジネス英語 06/07/22 | メイン | 揺りの季節 - 正法寺 »

GoogleMaps活用するぞ!(8) - そろそろページらしくしてみよう

(カテゴリ:GoogleMaps

ページに地図を埋め込む

そろそろ文字を書き込んだりして、ページらしくしてみましょう。例として、下のようにタグを書いてみました。このタグの中のGoogle Mapsには、以下の機能を付けています。

  • GLargeMapControl(大型のズームと位置移動コントロール)、GScaleControl(地図のスケール)、GMapTypeControl(地図のタイプを切り替えるコントロール)の三つのコントロールを付けています。(赤字の部分)
  • 横の長さ500ピクセル、縦の長さ500ピクセル。
  • 緯度経度を下に表示しています。(紫字の部分)
  • 中心位置はサンフランシスコ、アルカトラズ島。ズームは16段階。

ページらしくするために今回付け加えた部分は、緑色で示しています。


<!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>


008_01.JPG

ありゃりゃ?文字化けしてしまった!

― 実は、冒頭部分の"head"で、"charset=utf-8"と定義していたからなのです。この場合、ページをUTF-8で書かなければ、文字化けします。今回Shift-JISでしか保存できないエディタを使って書いたので、このようなことになってしまったのです。

文字化けを回避するためには、以下の二つの方法が考えられるでしょう。

  1. "head"部分の、"charset"を変更する。たとえば、日本のホームページで最もよく使われている、"charset=Shift-JIS"に書き換える。
  2. サクラエディタなど文字コードセットを設定できるエディタを使って、"utf-8"の文字コードで保存する。

どちらがよいのかは、私は残念ながら判断できる能力がありません。ただし、uft-8は日本語環境のみならずいろいろな言語にも対応する文字コードなので、「大は小を兼ねる」という意味では使った方がベターなのかもしれません。私はMovable Typeの書式と統一するために、必ずutf-8を使っています。

上のページをサクラエディタで開き、「文字コードセット」をutf-8にして改めて保存しました。すると、文字コードが正しく読み取られました。

008_02.JPG