Map: gestureHandling

2015/09/01

gestureHandlingはMapクラスのオプションです。スマートフォンなどにおけるタッチ操作を制御できます。具体的には、ドラッグ操作による地図の位置変更とピンチイン、ピンチアウトによるズーム操作が対象です。

値

string

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

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

var opts = {
	gestureHandling: "none" ,
} ;

デモ

各キーワードの動作確認をしてみて下さい。

auto

初期値。このページは高さがありスクロールできるので、"cooperative"が適用されます。

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

var opts = {
	center: new google.maps.LatLng( 35, 139 ) ,
	zoom: 11 ,
	gestureHandling: "auto" ,
} ;

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

cooperative

ドラッグ操作による地図の位置変更は二本指じゃないとできません。これにより、ページのスクロールで地図に引っかかることがなくなります。

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

var opts = {
	center: new google.maps.LatLng( 35, 139 ) ,
	zoom: 11 ,
	gestureHandling: "cooperative" ,
} ;

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

greedy

一本指で操作できます。ページスクロール中に地図に引っかかってしまうデメリットもあります。

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

var opts = {
	center: new google.maps.LatLng( 35, 139 ) ,
	zoom: 11 ,
	gestureHandling: "greedy" ,
} ;

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

none

ドラッグ操作と、ピンチイン、ピンチアウトによるズーム操作が無効になります。

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

var opts = {
	center: new google.maps.LatLng( 35, 139 ) ,
	zoom: 11 ,
	gestureHandling: "none" ,
} ;

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 opts = {
	center: new google.maps.LatLng( 35, 139 ) ,
	zoom: 11 ,
	gestureHandling: "none" ,
} ;

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

デモページを開く