はじめに
Google Maps(Google Local)のAPIを利用する方法を簡単に紹介しています。今回 は地図の中で日本語を使う方法について」です。Google Maps APIはUTF-8でないと利用することができません。日本語を利用するた めにはUTF-8形式で保存する必要があります。
UTF-8というのはユニコードというものの形式の1つで、英語と日本語、ハングル文字 にアラビア文字...といくつもの言語を同時に利用することができる形式です。
スクリプトの変更
前回に作成したコードをちょっとだけ変更します。
<!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">
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
{
var objPoint = new GPoint(nLatitude,nLongitude);
var objMarker = new GMarker(objPoint);
GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
objMap.addOverlay(objMarker);
}
AddGMarker(map,135.3659722,34.72072222,"甲子園駅");
//]]>
</script>
</body>
</html>
赤字が変更部分です。太字の部分はAPI Keyです(人それぞれ異なる値です)。
ダメな例
実際に動かすと甲子園駅の位置に赤い目印があります。クリックするとコメントが表示されますが、 文字化けしていて読めません。UTF-8形式で保存されていないからです。UTF-8形式で保存
UTF-8形式で保存するにはメモ帳を利用できます(Windows XPなど最近のPCのみ。Windows 98など 古い場合はダメです)。メモ帳でソースコードを開き、「ファイル」メニューの「名前を付けて保存」を選択します。

保存画面で下部にある「文字コード」から「UTF-8」を選択して保存します。これだけでUTF-8形 式で保存されます。








