Javascript

【Javascript】Google Maps v2を設置する(2)

Javascript関連情報

更新日：2006年08月30日

Google Maps v2を設置する(2)

高橋登史朗

今回は、文字コードなどの違いをクリアして、自分のブログやホームページにGoogle Mapsを貼込むテクニックです。

Google Maps v2を設置する(2)

前回は、 Google Mapsのv1からv2へ移行する際の注意点の基本的な部分を解説しました。

今回は、もう少し簡単な話をしてみます。v2に限るものではないのですが、自分のブログやホームページにGoogle Mapsを貼込むテクニックです。

ブログへ設置できない

Goggle Maps APIを利用した地図を作ること自体は、特別に難しいことを望むのでなければ簡単です。

Google Maps 設置までの流れなどを読みつつ、 APIのキーを申し込んだ時に自動生成されるソースをコピーしてサーバーへ置くだけで動作するからです。そんなシンプルな地図でも、ぐりぐり動作してくれます。

ところが、地図を作って、自分のブログに貼ろうとしたらうまくいかなかった、という話をよくみかけます。

そういったコードを調べてみると、原因の大半は、文字コードとドキュメントタイプがGoogle Mapsと異なっているということにありました。

そこで、今回は、その対策についての話題です。

文字コードが異なる

まず、文字コードの問題は、Google Mapsへ送り込まれる文字コードがutf-8なのに対して、日本のホームページやブログの文字コードは、Shift_JISやEUC-JPで書かれている場合が多いので、うまく表示されない、というということです。

これを解決するには、APIをリクエストするscript要素のcharset属性の値をutf-8にする方法があります。

下記サンプルソースのように、script要素へcharset="utf-8"と書いてしまうわけです。これで、読み込む先のブログやホームページの文字コードが何であろうと、読み込まれるスクリプトはutf-8と判断されますので安全になります。

  <!-- ページの文字コード -->
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

  <!-- Google Maps APIの読み込み と文字コードの明示-->
  <script src="http://maps.google.com/maps?file=api&v=2.61&key=自分のキー" 
         charset="utf-8"
          type="text/javascript"></script>

ドキュメントタイプが異なる

Google Mapsのソースの1行目には、次のようにドキュメントタイプが書かれています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Strictと書いてあるように、Google Mapsのドキュメントタイプは、厳密なタイプのXHTMLです。これは、厳格な仕様を適用することで、表示のブレを少なくするための配慮といえます。

しかし、ブログやホームページでは、いろいろなドキュメントタイプが使われているのが現実です。つまり、そのようなGoogle Mapsのドキュメントタイプと異なるページにGoogle Mapsを貼込めば、ドキュメントタイプによってJavaScriptの動作は異なる場合がありますから、混乱する可能性があります。

そして、ブログなどでは、その部分は自動出力になっており、ユーザーは変更できないケースが少なくありません。

iframeを利用して設置する

そこで、これらの問題を解決する方法があります。iframeを利用する方法です。

iframeはページ内のインラインへフレームを作成し、そこへ別の文書を読み込む要素ですので、別のドキュメントタイプが読み込まれても問題はありません。また、ブログ本体とは異なるページを用意するわけですから、Gooogle Mapsの文字コードutf-8に揃えることもできるわけです。

(ただし、iframeは、ドキュメントタイプによっては使用できないことになっていて、XHTML 1.0 Strict、XHTML 1.1のページでは使えませんので、貼込む側のページのドキュメントタイプに注意は必要です。ドキュメントタイプの宣言されていないHTMLあるいは、FramesetやTransitionalなどなら使えますが、一般的なブログなどでは、Strictなどはほとんど使われていないようですので、普通は大丈夫でしょう。)

具体的には、たとえば、次のようなiframeタグで読み込みます。

→サンプル

  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <iframe  width        ="400" 
          height       ="300" 
          scrolling    ="no" 
          marginwidth  ="0" 
          marginheight ="0" 
          frameborder  ="0"
          src="./map.htm"></iframe>

このケースでは、Shift_JISのページへ幅400px、高さ300pxのiframeを作成し、そこへ次のようなソースの地図を読み込んでいます。つまり、地図とifarmeのサイズが同じで、ボーダーなどもありませんから、きっちりと幅400px、高さ300pxの地図がiframeのあるページへ表示されるわけです。

  <div id="map" style="width:400px;height:300px"></div>
  <script type="text/javascript">
  //<![CDATA[

    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.6587258,139.7454178), 17);
    map.addControl(new GOverviewMapControl());
  
  //]]>
  </script>

【関連リンク】
v2のドキュメントは下記にあります。
Google Maps API Version 2 Documentation

v2へのアップデートについての公式な注意書きは下記にあります。
Google Maps API Version 2 Upgrade Guide

v2に対応するリファレンスの、拙訳とサンプルが、下記にあります(拙著『入門Ajax』の追加サポートページです)。
Version 2 Class Reference (意訳とサンプル)

Google Mapsの設置方法自体はv1とほとんど変りませんのでは、下記の記事などもご参照下さい。
Google Maps 設置までの流れ

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！