SYNCERのロゴ
アイキャッチ画像

Map

Mapクラスは地図を表示するためのクラスです。Google Maps JavaScript APIにおいて、最も基本となるクラスです。

構文

Map( mapDiv:Element, opts?:MapOptions )

パラメータ

mapDiv

Element

地図を表示するHTML要素を指定する。この要素にはスタイルシートなどを利用して横幅と高さを設定しておくこと。

opts

MapOptions

地図のオプションとなるオブジェクト。最低限、centerとzoomは指定しなければいけない。

返り値

Map

Mapクラスのインスタンス。このインスタンスにメソッドを実行したりイベントを設定して地図を操作できる。

デモ

地図を出力する例です。centerとzoom以外は省略できます。

// <div id="map-canvas"></div>
var mapDiv = document.getElementById( "map-canvas" ) ;

var opts = {
	center: new google.maps.LatLng( 35.7100, 139.8107 ) ,
	zoom: 11 ,
} ;

var map = new google.maps.Map( mapDiv, opts ) ;

サンプルコード

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.7100, 139.8107 ) ,
	zoom: 11 ,
} ) ;
	</script>
</body>
</html>

デモページを開く

オプション

MapOptionsに指定できるプロパティの一覧です。

名前説明
backgroundColorキャンパスの背景色を指定する。
center初期の位置座標を指定する。
clickableIconsPOIアイコンのクリックを調整する。
disableDefaultUIデフォルトのコントローラの表示を調整する。
disableDoubleClickZoomダブルクリックによるズーム値変更を調整する。
draggableドラッグ操作での地図の移動を調整する。
draggableCursorドラッグ可能な場所にホバーした時のマウスカーソルの形状を指定する。
draggingCursorドラッグ操作中のマウスカーソルの形状を指定する。
fullscreenControlフルスクリーン・コントローラの表示を調整する。
fullscreenControlOptionsフルスクリーン・コントローラのスタイルを調整する。
gestureHandlingタッチ操作の挙動を調整する。
heading航空写真にした時の東西南北の角度を指定する。
keyboardShortcutsキーボード操作を調整する。
mapTypeControlマップタイプ・コントローラの表示を調整する。
mapTypeControlOptionsマップタイプ・コントローラのスタイルを調整する。
mapTypeId初期の地図の種類を指定する。
maxZoomズームで、拡大の最大値を指定する。
minZoomズームで、縮小の最小値を指定する。
noClear地図キャンパスに指定したHTML要素の、子孫要素を削除するか否かを指定する。
panControlパン・コントローラの表示を調整する。
panControlOptionsパン・コントローラのスタイルを調整する。
rotateControl回転コントローラの表示を調整する。
rotateControlOptions回転コントローラのスタイルを調整する。
scaleControlスケール・コントローラの表示を調整する。
scaleControlOptionsスケール・コントローラのスタイルを調整する。
scrollwheelホイール操作によるズーム値の変更を調整する。
signInControlサインイン・ボタンの表示を調整する。
streetView独自のストリートビューを関連付ける。
streetViewControlストリートビュー・コントローラ(ペグマン人形)の表示を調整する。
streetViewControlOptionsストリートビュー・コントローラ(ペグマン人形)の表示をスタイルする。
styles地図のスタイルをカスタマイズする。
tilt航空写真にした時の傾きの角度を指定する。
zoom初期のズーム値を指定する。
zoomControlズーム・コントローラの表示を調整する。
zoomControlOptionsズーム・コントローラのスタイルを調整する。

メソッド

名前説明
fitBounds()指定した境界がちょうどよく見える位置座標とズーム値に変更する。
getBounds()地図の現在のビューポートの境界を取得する。
getCenter()地図の現在の中心の位置座標を取得する。
getClickableIcons()POIアイコンをクリックできるか否かを確認する。
getDiv()キャンパスとして利用しているHTML要素を取得する。
getHeading()東西南北の角度を取得する。
getMapTypeId()現在の地図の種類を取得する。
getStreetView()ストリートビューを取得する。
getTilt()傾きの角度を取得する。
getZoom()ズーム値を取得する。
panBy()地図の位置座標を相対的に移動する。
panTo()地図の位置座標を絶対的に移動する。
panToBounds()ビューポートを指定した境界に移動する。
setCenter()位置座標をセットする。
setClickableIcons()POIアイコンのクリック設定を変更する。
setHeading()東西南北の角度をセットする。
setMapTypeId()地図の種類をセットする。
setOptions()地図のオプションをセットする。
setStreetView()ストリートビューをセットする。
setTilt()傾きの角度をセットする。
setZoom()ズーム値をセットする。

イベント

名前説明
bounds_changedビューポートに変化があった時に発火するイベント。
center_changed地図の位置座標に変化があった時に発火するイベント。
click地図をクリックした時に発火するイベント。
dblclick地図をダブルクリックした時に発火するイベント。
drag地図をドラッグ操作した時に発火するイベント。
dragend地図のドラッグ操作を終了した時に発火するイベント。
dragstart地図のドラッグ操作を開始した時に発火するイベント。
heading_changed地図の東西南北の角度を変更した時に発火するイベント。
idle地図がアイドル状態になった時に発火するイベント。
maptypeid_changed地図の種類を変更した時に発火するイベント。
mousemove地図上でマウスカーソルを動かした時に発火するイベント。
mouseout地図の外にマウスカーソルを出した時に発火するイベント。
mouseover地図の上にマウスカーソルを乗せた時に発火するイベント。
projection_changedプロジェクションが変化した時に発火するイベント。
resizeトリガーで、リサイズによるリフレッシュを行なった時に発火するイベント。
rightclick地図を右クリックした時に発火するイベント。
tilesloaded地図のタイルの読み込みが完了した時に発火するイベント。
tilt_changed地図の傾きの角度を変更した時に発火するイベント。
zoom_changedズーム値を変更した時に発火するイベント。
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2015年9月1日 (火)
コンテンツを公開しました。