• 小
  • 中
  • 大

地図の作成 (Mapクラス)

地図を表す上でもっとも重要なMapクラスのオブジェクトを作成します。コンストラクタ関数は以下のように定義されています。

Map(mapDiv:Node,opts?:MapOptions)
指定された HTML コンテナ(一般的には DIV要素)の中に新規に地図を作成します。

1番目の引数で地図を表示するdiv要素を指定し、2番目の引数でオプションとして地図の座標やズームレベルなどを指定します。

1番目の引数に指定するdiv要素は地図を表示するためにHTMLページbody内に記述したdiv要素です。div要素にid属性の値を設定してMapクラスのオブジェクトを作成します。
var map = new google.maps.Map(document.getElementById("map_canvas"));

上記ではid属性に"map_canvas"を指定しdiv要素を対象とするMapsクラスのオブジェクトを作成します。

2番目の引数はオプションで省略も可能ですが、地図を表示するには[1]中心座標[2]地図タイプ[3]ズームレベルの3つを指定する必要があります。MapOptionsオブジェクトを指定しない場合には、各々値をmethodを使って設定します。

MapOptionsオブジェクト

地図を表示するには3つの値(中心座標、地図タイプ、ズームレベル)をMapクラスのコンストラクタの2番目の引数で指定すると簡単です。 Mapクラスで用意されているmethodを使って指定することもできますが、2番目の引数で指定するほうが手間はかかりません。

2番目の引数には作成する地図に関する設定を記述したオブジェクトリテラルを作成して指定します。指定可能なプロパティは多数定義されていますが、最低限必要なプロパティについて下記表を参考にして下さい。(中心座標、地図タイプ、ズームレベル)

プロパティタイプ説明
centerLatLng地図の初期の中心
mapTypeIdMapTypeId地図の初期の mapTypeId
zoomnumber地図の初期のズーム レベル

地図の中心座標を指定するには「center」プロパティに対して値を指定します。座標はLatLngクラスのオブジェクト使います。

地図タイプは市街地図や航空写真など、どのような形式で地図を表示するのかを指定します。MapTypeId クラスで定義されている値(※)定数を使って指定します。

※サポートされているタイプ

・ROADMAP は、Google マップの通常のデフォルトである 2D タイルを表示します。

・SATELLITE は写真タイルを表示します。

・HYBRID は、写真タイルと主要な機能(道路、地名)のタイル レイヤを組み合わせて表示します。

・TERRAIN は、物理的な起伏を示すタイルで、高度や水系(山、河川など)を表示します。

表示例 HYBRID
表示例 ROADMAP
表示例 SATELLITE
表示例 TERRAIN

ズームレベルは地図の縮尺で、数値が小さいほど広域になり、大きいほど詳細な地図が表示されます。

オブジェクトを作成します。
var latlng = new google.maps.LatLng(35.709984,139.810703);
var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Mapクラスのオブジェクトを作成する時に2番目の引数に指定します。
var latlng = new google.maps.LatLng(35.709984,139.810703);
var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"),opts);


MapOptionsオブジェクトの再設定

Mapクラスのオブジェクトを作成する時にMapOptionsオブジェクトを指定しましたが、Mapクラスのオブジェクトを作成した後で、再度別のMapOptionsオブジェクトを設定することも可能です。

Mapクラスで用意されている「setOptions」 methodを使います。

setOptions(options:MapOptions)

引数に再設定したいMapOptionsオブジェクトを指定します。
var latlng = new google.maps.LatLng(35.709984,139.810703);
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);