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

MapOptions

MapOptionsは、地図の設定を調整するためのオブジェクトです。地図を作成する時のMapクラスの第2引数などに利用できます。

プロパティ

プロパティ名説明
backgroundColor

string

スタイルシートと同じように、色を文字列で指定できます。

center

LatLng

値は文字列ではなく、LatLngクラスで指定しなければいけません。このオプションは指定必須です。

clickableIcons

boolean

trueの場合はクリックが有効、falseの場合はクリックが無効になります。

disableDefaultUI

boolean

trueを指定すると、デフォルトのUIの表示を拒否できます。

disableDoubleClickZoom

boolean

trueを指定するとダブルクリックによるズームが無効、falseを指定すると有効になる。

draggable

boolean

trueを指定するとドラッグ操作が有効、falseを指定すると無効になる。

draggableCursor

string

スタイルシートのcursorプロパティと同じ内容で、文字列で指定できます。

draggingCursor

string

スタイルシートのcursorプロパティと同じ内容で、文字列で指定できます。

fullscreenControl

boolean

trueの場合は表示、falseの場合は非表示になる。

fullscreenControlOptions

FullscreenControlOptions

値は専用のオブジェクトで指定します。2017年現在は、表示位置だけを調整できます。

gestureHandling

string

下記のいずれかのキーワードを指定する。

"auto"
初期値。表示しているページがスクロールできる場合はcooperative、スクロールできない場合はgreedyが適用される。
"cooperative"
ドラッグ操作を二本指じゃないとできない。ページのスクロールを邪魔しない趣旨。
"greedy"
旧バージョンの仕様。一本指でドラッグ操作ができる。
"none"
ドラッグ操作と、ピンチイン、ピンチアウトによるズーム変更のどちらもできない。
heading

number

角度を整数で指定する。該当地域のその角度の写真が用意されていない場合は、一番近い角度の写真が表示される。

keyboardShortcuts

boolean

trueの場合は操作可能、falseの場合は操作不可能になる。

mapTypeControl

boolean

trueの場合は表示、falseの場合は非表示になる。

mapTypeControlOptions

MapTypeControlOptions

値は専用のオブジェクトで指定します。2017年現在はmapTypeIds(地図の種類)、position(表示位置)、style(UIのスタイル)、の3つのプロパティを指定できます。

mapTypeId

MapTypeId|string

値は専用の定数、または定数の値である文字列で指定できます。

maxZoom

number

0〜21の整数を指定できます。数値が大きいほど、拡大できます。

minZoom

number

0〜21の整数を指定できます。数値が小さいほど、縮小できます。

noClear

boolean

trueの場合は削除しない、falseの場合は削除する。

panControl

boolean

trueの場合は表示する、falseの場合は表示しない。

panControlOptions

PanControlOptions

専用のオブジェクトを指定する。利用できるのは、表示位置(position)のみ。

rotateControl

boolean

trueの場合は表示する、falseの場合は表示しない。

rotateControlOptions

RotateControlOptions

専用のオブジェクトを指定する。利用できるのは、表示位置(position)のみ。

scaleControl

boolean

trueの場合は表示する、falseの場合は表示しない。

scaleControlOptions

ScaleControlOptions

専用のオブジェクトを指定する。利用できるのは、スタイル(style)のみ。

scrollwheel

boolean

trueなら有効、falseなら無効。

signInControl

boolean

trueなら表示、falseなら非表示。

streetView

StreetViewPanorama

ストリートビューの画面の情報を含むStreetViewPanoramaインスタンス。

streetViewControl

boolean

trueなら表示、falseなら非表示。

streetViewControlOptions

StreetViewControlOptions

専用のオブジェクトを指定する。2017年現在、指定できるのは表示位置(position)のみ。

styles

Array<MapTypeStyle>

スタイルの情報を含むMapTypeStyleオブジェクトを、任意の数だけ配列で指定する。

tilt

number

角度を整数で指定する。指定できるのは0か45のみです。角度に対応していない地域で指定しても、デフォルトの角度が表示されます。

zoom

number

0から21の整数を指定する。大きい数値ほど、拡大される。

zoomControl

boolean

trueなら表示、falseなら非表示。

zoomControlOptions

ZoomControlOptions

専用のオブジェクトを指定します。2017年現在、指定できるのは表示位置(position)のみです。

デモ

MapOptionsオブジェクトを利用して、地図を作成したデモです。各プロパティの値を調整して、どのように反映されるのかを確認してみて下さい。

var options = {
	center: new google.maps.LatLng( 36.38954247, 139.06340473 ) ,
	zoom: 13 ,
	clickableIcons: false ,
	disableDefaultUI: true ,
	disableDoubleClickZoom: true ,
	draggable: false ,
	draggableCursor: "url(./cursor.png), auto" ,
	draggingCursor: "url(./cursor.png), auto" ,
	fullscreenControl: true ,
	gestureHandling: true ,
	heading: 270 ,
	keyboardShortcuts: false ,
	mapTypeControl: false ,
	mapTypeId: google.maps.MapTypeId.SATELLITE ,
	maxZoom: 20 ,
	minZoom: 10 ,
	rotateControl: false ,
	scaleControl: true ,
	scrollwheel: false ,
	streetViewControl: false ,
	tilt: 0 ,
	zoomControl: false ,
} ;

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

サンプルコード

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

// Map
var options = {
	center: new google.maps.LatLng( 36.38954247, 139.06340473 ) ,
	zoom: 13 ,
	clickableIcons: false ,
	disableDefaultUI: true ,
	disableDoubleClickZoom: true ,
	draggable: false ,
//	draggableCursor: "help" ,
//	draggingCursor: "move" ,
	fullscreenControl: true ,
	gestureHandling: true ,
	heading: 270 ,
	keyboardShortcuts: false ,
	mapTypeControl: false ,
//	mapTypeId: google.maps.MapTypeId.SATELLITE ,
	maxZoom: 20 ,
	minZoom: 10 ,
	rotateControl: false ,
	scaleControl: true ,
	scrollwheel: false ,
	streetViewControl: false ,
	tilt: 0 ,
	zoomControl: false ,
} ;

var map = new google.maps.Map( mapDiv, options ) ;
	</script>
</body>
</html>

デモページを開く

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2015年9月1日 (火)
コンテンツを公開しました。