utf-8以外の文字コードで、Google Maps APIを使う
category : Webコーディング ;
Google Mapsを使う場合、HTMLファイルの文字コードをutf-8にしておかないと文字化けしたり、表示されなかったりする。
ファイル内に記述するJavascriptに、charset="utf-8"を設定すれば、HTMLファイル自体は、utf-8以外の文字コードでもOK。「WebサイトにGoogle Mapsを設置する」の記事で書いたHTMLソースをサンプルでのせとく。このサンプルでの文字コードは、shift_jisを使っている。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis"/>
<title>Google Maps Example <script src="http://maps.google.com/maps?file=api&v=2&key=ここに取得したGoogle Maps API keyを入力する" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 450px; height: 300px;"></div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
//座標の設定
var lon = 135.52585244178772; //経度
var lat = 34.687366195371624; //緯度
var moon = new GPoint(lon,lat);
//目標を中心にする
map.centerAndZoom(moon , 3);
//コントローラーを追加する
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//目標を表示する
var marker = new GMarker(moon);
map.addOverlay(marker);
//]]>
</script>
</body>
</html>
または、utf-8のHTMLファイルにGoogle Mapsを設置し、それを別のHTMLファイルからインラインフレームで読み込むという方法もいけるかも。
■動作確認環境
Windows：Internet Explorer 6、Internet Explorer 7、FireFox 2
Mac OS：Safari 3、FireFox 2
■参考サイト
MAP工房での文字コード
http://jjworkshop.com/blog/archives/2007/04/map.html
