地図の作成

広告

Google Maps APIは地図を使ったアプリケーションを作成するためのツールですが、その大元になる地図を表すgoogle.maps.Mapクラスの使い方について解説します。

1.google.maps.Mapクラス
2.google.maps.MapOptionsクラス
3.座標などのオプションを再設定する
4.1つのWebページに複数の地図を表示する
5.サンプルコード

google.maps.Mapクラス

地図を作成するにはgoogle.maps.Mapクラスを使います。このクラスのコンストラクタ関数は次のように定義されています。 

Map(mapDiv:Node, opts?:MapOptions)

Description:
Creates a new map inside of the given HTML container, which is typically a DIV
element.

1番目の引数には作成した地図を表示するdiv要素を指定します。2番目の引数には地図の座標やズームレベルなどを設定したgoogle.maps.MapOptionsクラスのオブジェクトを指定します。2番目の引数はオプションです。

1番目の引数に指定するdiv要素は「地図の表示位置とサイズ」で説明した地図を表示するためにWebページ内に記述したdiv要素です。div要素に設定してあるid属性の値が"map_canvas"だった場合、次のように取得することができます。 

var mapDiv = document.getElementById("map_canvas");

よってgoogle.maps.Mapクラスのインスタンスを作成するには次のように記述します。 

var mapDiv = document.getElementById("map_canvas");
var map = new google.maps.Map(mapDiv);

または次のようにまとめて書いて頂いても同じです。 

var map = new google.maps.Map(document.getElementById("map_canvas"));
google.maps.MapOptionsクラス

地図を作成した後に実際に表示するには(1)中心座標(2)地図タイプ(3)ズームレベルの3つは必ず設定する必用があります。Mapクラスのインスタンスを作成した後でメソッドなどを使って設定も可能ですが、Mapクラスのインスタンスを作成する時に2番目の引数に中心座標などの値を設定したgoogle.maps.MapOptionsクラスのオブジェクトを指定することもできます。

2番目の引数には作成する地図に関する設定を記述したオブジェクトリテラルを作成して指定します(オブジェクトリテラルについては「オブジェクトリテラル」を参照して下さい)。指定可能なプロパティは多数定義されていますが今回はその中から中心座標、地図タイプ、ズームレベルを指定するためのプロパティについて確認します。

プロパティタイプ説明
centerLatLngThe initial Map center. Required.
mapTypeIdMapTypeIdThe initial Map mapTypeId. Required.
zoomnumberThe initial Map zoom level. Required.

centerプロパティは地図の中心座標を設定します。座標はLatLngクラスのオブジェクト使います(詳細は別のページで説明します)。

mapTypeIdプロパティは市街地図や航空写真などどのような形式で地図を表示するのかを指定します。MapTypeIdクラスで定義されている定数を使って指定します(詳細は別のページで説明します)。

zoomプロパティは地図のズームレベル(縮尺)を表す数値を指定します。数値が小さいほど広域になり、大きいほど詳細な地図が表示されます。

実際の記述方法は次のようになります。下記では地図のズームレベルを13、地図の中心座標を(35.539001,134.228468)、地図タイプをROADMAPに設定しています。 

var latlng = new google.maps.LatLng(35.539001,134.228468);

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

作成したオブジェクトをMapクラスのインスタンスを作成する時の2番目の引数に指定して下さい。 

var latlng = new google.maps.LatLng(35.539001,134.228468);

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), opts);

これで中心座標、ズームレベル、マップタイプの情報が設定された地図のインスタンスが作成されます。

座標などのオプションを再設定する

Mapクラスのインスタンスを作成する時に2番目の引数を指定しなかった場合や、指定していても後から座標などの設定を変更したくなった場合にはgoogle.maps.Mapクラスで用意されているsetOptionsメソッドを使って設定します。 

setOptions(options:MapOptions)

Description:
  ----
Return:
  None

1番目の引数にはgoogle.maps.MapOptionsクラスのオブジェクトを指定します。例えば次のように記述します。 

var latlng = new google.maps.LatLng(35.539001,134.228468);

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), opts);

var opts2 = {
    mapTypeId: google.maps.MapTypeId.SATELLITE
};

map.setOptions(opts2);

上記ではMapクラスのインスタンスが一度作成されてから別のオプションを作成し地図に設定しています。後から設定したオプションではマップタイプだけが設定されていますので、中心座標とズームレベルに関する設定は前のままです。

1つのWebページに複数の地図を表示する

一つのWebページ内に地図を表示するためのdiv要素を複数記述し、それぞれ別の地図を表示させることもできます。div要素毎に異なるid属性を設定しておき、別々のMapクラスのインスタンスを作成します。 

var mapDiv1 = document.getElementById("map_canvas1");
var mapDiv2 = document.getElementById("map_canvas2");

var opts1 = {
    zoom: 13,
    center: new google.maps.LatLng(35.697456,139.702148);,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var opts2 = {
    zoom: 13,
    center: new google.maps.LatLng(34.694203,135.502625),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map1 = new google.maps.Map(mapDiv1, opts1);
var map2 = new google.maps.Map(mapDiv2, opts2);

同じ要領で2つ以上の地図であっても同時に1つのWebページ内に表示可能です。

サンプルコード

では簡単なサンプルを作成して実際に試してみます。 

function initialize() {
  var latlng1 = new google.maps.LatLng(35.697456,139.702148);
  var latlng2 = new google.maps.LatLng(34.694203,135.502625);

  var opts1 = {
    zoom: 13,
    center: latlng1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var opts2 = {
    zoom: 13,
    center: latlng2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map1 = new google.maps.Map(document.getElementById("map_canvas1"), opts1);
  var map2 = new google.maps.Map(document.getElementById("map_canvas2"), opts2);
}

<!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" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Google Maps サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
    </script>

    <script src="./js/code2_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>自宅の地図です。</p>

    <div id="map_canvas1" style="width:500px; height:200px"></div>
    <div id="map_canvas2" style="width:500px; height:200px; margin-top:10px;"></div>

  </body>
</html>

ブラウザでWebページを開くと次のように表示されます。

p2-1

今回のサンプルでは2つの地図を上下に表示し、1つは東京、1つは大阪の地図を表示してみました。

( Written by Tatsuo Ikura )