文字コードの設定

＋Sponsored Links

Google Maps APIを使用する場合、Google側で用意されたJavaScriptのコードを読み込んで利用します。

<script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
        type="text/javascript"></script>

読み込むコードは文字コードとしてUTF-8を使って記述されています。その為、このコードを読み込むWebページ自身の文字コードもUTF-8にされることをお勧めします。

Webページの文字コードがUTF-8の場合には次のように記述します。

<!DOCTYPE html "-//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=(key)&sensor=false"
            type="text/javascript"></script>

    (以下略)

  </head>

  (以下略)

</html>

ただ、既に他の文字コードで作成したページにGoogle Maps APIのコードを追加する場合や、UTF-8を使用できない事情がある場合などでページの文字コードがUTF-8以外を使用しなければいけない場合もあります。その時はGoogleからコードを読み込む部分を次のように変更して下さい。

<script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
        type="text/javascript" charset="utf-8"></script>

読み込むコードの文字コードを指定することで、UTF-8以外で記述されたページに読み込む場合でも問題なく利用できるようになります。ではShift_JISで記述されたページにGoogle Maps APIを使ったコードを記述する場合の例を見てみます。

<!DOCTYPE html "-//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=Shift_JIS"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>

    (以下略)

  </head>

  (以下略)

</html>

Shift_JIS以外の文字コードの場合も同様です。

サンプル

では実際に試してみます。下記のページは文字コードとしてShift_JISを使っています。

map1_1.html

<!DOCTYPE html "-//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=Shift_JIS"/>
    <title>サンプル：文字コードの設定</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(35.449064,139.630394), 13);
      }
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>
  </body>
</html>

※ (key)はご自身のキーに置き換えて下さい。

ではブラウザで上記のURLを見てみます。

p1-1

＋Sponsored Links