アクセスマップをGIF画像で表示していたのですが少し古臭い。
そこでやはり今はGoogleMapかなと。
Google Maps APIを使ってサイトに地図を表示させることが比較的簡単にできるようです。
実際どのようにやったか忘れないようにメモっときます。
1.マップを置く場所のURLを確認（キー取得時に必要）
2.Googleアカウントの取得
3.APIキーの取得
4.サンプルページに自分用のキーを入れ、試しにアップ
5.表示されてればとりあえずはOKなので、さらに細かくカスタマイズ
詳しくは「Google Maps API」などで検索すればたくさんヒットするのでそっちを参照。
GoogleMapを表示するには文字コードをUTF-8にしなければならない。これが少し面倒なことになった。
埋め込むページはヘッダー、フッター、左側メニューなどPHPincludeで呼び出しており、別ファイルになっていてSHIFT-JISで保存している。
もちろんブラウザで見ると呼び出したファイルだけ文字化けしていることになる。
仕方がないのでこのマップページだけはインクルードしないで直接書くことにした。
しかし、やはりスムーズにはいかないもんです。
FirefoxやOperaだと成功したかのように見えるが、IEで見るとCSSをうまく読み込んでくれていないような感じでレイアウトが大幅に崩れている。
原因を探るのにマップ部分のソースをごっそり削除。他ページと同じ構成にし、文字コードのみをUTF-8にして保存。
これでもレイアウトは崩れているので、文字コードをSHIFT-JISに変更して再確認すると正常にもどった。
んー。ということは、この環境でUTF-8だと何かがマズイらしい？
その辺の追求は時間があるときにでも...。
まぁ原因はわかったので回避策を考えよう。
で、よくよく調べてみると簡単な回避策があったではないですか。
ページ全体の文字コードはSHIFT-JISにしておき、
Google Maps APIの基本的なライブラリを呼び出すJavaScript部分をUTF-8にしてやればいいらしい。
つまり
<script src="http://maps.google.com/maps?file=api&v=2&key=*****" type="text/javascript"></script>
↓↓↓
<script src="http://maps.google.com/maps?file=api&v=2&key=*****" type="text/javascript" charset="utf-8"></script>
こうしてやることで回避できるらしい。
これならページ全体を変えることもなければinclude部分もそのままでいける。
はじめから知ってれば何の苦労もないですが、今回も結構悩みました。
スポンサーリンク
