まずは表示してみる

まずは簡単なサンプルをもとに、Google Mapsを設置してみましょう。

Google Mapsを使うためにはAPIキーが必要です。ない方は『APIキーを登録する』を参考に APIキーを取得してください。

今回作成する東京タワーの地図(表示する）

設置方法

下の枠の中に表示されているコードをsample1.htmlなどのファイル名で保存します。
コードの中にあるMAPS_API_KEYの部分は、取得したAPIキーに置き換えてください。

保存するときには、必ず「UTF-8」エンコードで保存してください。

保存したら、あなたのホームページにアップロードして、ブラウザからアクセスしてみましょう。
東京タワー周辺の地図が表示されたら、成功です。

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.co.jp/maps?file=api&hl=ja&v=2&key=MAPS_API_KEY" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.658613,139.745525), 17);
      }
    }
    GEvent.addDomListener(window, "load", load);
    GEvent.addDomListener(window, "unload", GUnload);

    //]]>
    </script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

Shift-jisやEUC-JPでGoogle Maps APIを使用したい場合

EUC-JPやShift-JISのページでGoogle Maps APIを使用したい場合には、APIを読み込むときにieパラメータとoeパラメータを指定します。

Shift-JISの例 (Shift_jis は sjisでもOK)

<script src="http://maps.google.co.jp/maps?file=api&v=2&key=MAPS_API_KEY&ie=Shift_JIS&oe=Shift_JIS"  type="text/javascript"></script>

EUC-JPの例

<script src="http://maps.google.co.jp/maps?file=api&v=2&key=MAPS_API_KEY&ie=euc-jp&oe=euc-jp"  type="text/javascript"></script>