マッピィ
  1. TOP
  2. Google Maps APIの基本
  3. 地図の表示

地図の表示

地図の表示位置とサイズ

Webページ内で地図を表示させたい場所（任意で指定場所）にdiv要素（id）を記述します。ロード時（Webページ読み込み時）にスクリプトを使ってdiv要素に地図をbody内に埋め込み地図を表示します。

<p>Google Maps APIを使った地図サンプル。</p>
<div id="map_canvas" style="width:500px;height:300px"></div>

div要素のwidth（幅）height（高さ）を変えることで地図のサイズを簡単に変更できます。

<div id="map_canvas" style="width:300px;height:400px"></div>

地図の作成 (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 は、物理的な起伏を示すタイルで、高度や水系（山、河川など）を表示します。

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

オブジェクトを作成します。

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);

中心座標の指定

地図の中心座標を指定するにはMapクラスで用意されている「setCenter」methodを使います。

setCenter(latlng:LatLng)

引数に指定したLatLngクラスのオブジェクトで表される座標に地図の中心座標を設定します。

LatLngクラスは座標位置を表すためのクラスです。LatLngクラスのオブジェクトは次のように作成します。

var obj = new google.maps.LatLng(緯度,経度);

1番目の引数に緯度を、2番目の引数に経度を指定します。緯度は「-90」から「+90」の間、経度は「-180」から「+180」の間で指定します。例えば緯度が"35.658517"、経度が"139.745493"を表す座標は次のように作成できます。

var latlng = new google.maps.LatLng(35.658517, 139.745493);

作成したLatLngクラスのオブジェクトを1番目の引数に指定し「cetCenter」methodを呼び出します。

var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
var latlng = new google.maps.LatLng(35.658517, 139.745493);
map.setCenter(latlng);

地図の中心座標が新しく指定した位置に設定されます。

サンプルコード

サンプル.js

var map;
var tokyo = new google.maps.LatLng
(35.697456,139.702148);
var osaka = new google.maps.LatLng
(34.694203,135.502625);

function initialize() {
  var opts = {
    zoom: 11,
    center: tokyo,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

function setTokyo() {
  map.setCenter(tokyo);
}

function setOsaka() {
  map.setCenter(osaka);
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API 中心座標の指定し移動</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
.button-form{width:100%;margin-top:20px}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー">
</script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>中心座標の移動</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
<div class="button-form">
<form>
<input type="button" id="tokyo" value="東京へ移動" onclick="setTokyo()">
<input type="button" id="osaka" value="大阪へ移動" onclick="setOsaka()">
</form>
</div>
</body>
</html>

表示例　中心座標の移動

中心座標の指定し移動

 地図サンプルイメージ 
 中心座標の指定し移動 

サンプルイメージ地図は地理院タイル （標高タイル）を加工して作成

Google Maps サンプル　>　中心座標の指定し移動

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

ページトップ