Google MAPS JavaScript APIの単純な例

ここでは、Google MAPS JavaScript APIを使った単純な例を説明したいと思います。

サンプル

以下のサンプルはGoogle MAPS JavaScript APIを使ったページのソースです。 地図の表示だけを行うという単純なものです。


<!DOCTYPE html>
<html>
  <head>

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map { height: 100% }
    </style>

    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
        type="text/javascript" charset="UTF-8"></script>

    <script type="text/javascript">
    //<![CDATA[

    var map;
    
    // 初期化。bodyのonloadでinit()を指定することで呼び出してます
    function init() {

      // (1) Google Mapで利用する初期設定用の変数
      var latlng = new google.maps.LatLng(39, 138);
      var opts = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
      };

      // (2) Mapオブジェクトの生成
      // getElementById("map")の"map"は、body内の<div id="map">より
      map = new google.maps.Map(document.getElementById("map"), opts);
    }

    //]]>
    </script>
  </head>

  <body onload="init()">
    <div id="map"></div>
  </body>

</html>

以下、コードの解説です。

styleタグでのcss設定

上記サンプルでは、head内にstyleタグを利用してcssの設定を行っています。 このようにcssを必ず入れなければならないわけではありませんが、height(高さ)の設定を行わないと、高さが0となってしまい何も表示されない場合があるので、入れています。

cssそのものの設定は別途他のサイトを参考にして下さい。

表示されるGoogle Mapの初期値を設定する

サンプルプログラムの(2)部分で、google.maps.Map()コンストラクタを利用してMapクラスのオブジェクトを生成しています。 google.maps.Map()コンストラクタの第一引数は、Google Mapを表示するHTMLコンテナ(通常はDIV要素)です。

google.maps.Map()コンストラクタの第二引数は、各種設定項目が含まれるオブジェクトを渡します。 第二引数は必須ではないので、省略することも可能です。

サンプルプログラムでは、(1)の部分で、google.maps.Map()コンストラクタに渡す第二引数部分を作成しています。


      // (1) Google Mapで利用する初期設定用の変数
      var latlng = new google.maps.LatLng(39, 138);
      var opts = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
      };

zoomは、地図のズームを表現しています。 最小値0は世界地図全体を表示します。 値が大きいほどズームが大きくなります。

mapTypeIdは、地図の種類を表します。 このサンプルでは市街地図を表示するROADMAPを利用しています。 以下のMapTypeIdが用意されています。

HYBRID衛星写真/航空写真と道路地図のハイブリッド
ROADMAP市街地図
SATELLITE衛星写真や航空写真
TERRAIN地形や樹木などの地形的特徴を持つ地図

centerは、地図の中心座標を設定するための項目です。 centerには、LatLngクラスのオブジェクトを設定します。 LatLngクラスのオブジェクトは、google.maps.LatLng()コンストラクタで生成します。

scriptタグで行っている処理の説明

version 2までは「API key」というものの取得が必要でしたが、Version 3からは不必要になりました。 代わりに、sensorに対して「true」もしくは「false」を入れることが必須となりました。 sensorは、ユーザの位置情報をGPSなど(WiFiの基地局情報から取得する場合もあります)の装置から取得してGoogleのサーバへ送信するかどうかを設定するための変数で、「true」にすると位置情報を扱えるようになります。 このサンプルでは、位置情報を扱わないので「false」としてあります。

「charset="UTF-8"」の部分は文字コードとしてUTF-8を利用していることを宣言しています。 Google MAPS JavaScript APIを利用するWebページは、必ずUTF-8で記述するようにしましょう。 ただ、どうしてもSJIS、EUC、JISなど、UTF-8ではない文字コードでWeb本文を書きたい場合には、Google MAPS JavaScript APIを利用する部分をUTF-8で別ページファイルで作成し、iframeを利用して読み込むのが良いでしょう。 下記iframeサンプルの「ファイル名.html」というファイルに、上記Google MAPS JavaScript APIサンプルのようなHTMLを作れば大丈夫だと思われます。


<iframe src="ファイル名.html"></iframe>

表示例

iframe経由の表示例です。


次のステップ

地図の種類を切り替える

地図の中心を移動する

地図上にふきだしを表示

地図がクリックされたときの処理

Markerを設置する

Markerのクリック処理