SYNCER

SYNCER

scrollwheel - ホイール操作でのズーム値の変更

4件

公開日:

scrollwheelはMapクラスのオプションです。ホイール操作でズーム値を変更できるか否かを指定できます。無効にすれば、地図上でホイールを回してもズーム値が変更されません。

指定方法

boolean

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

オブジェクトの指定例

var mapOptions = {
	zoom: 15 ,	// 必須
	center: new google.maps.LatLng( 34.99485610000002, 135.7850463 ) ,	// 必須
	scrollwheel: false ,
};

デモ

falseを指定した方は、地図上でホイール操作をしても無視されます。

falseの場合

trueの場合 (デフォルト)

サンプルコード

HTML

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: 地図の表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript

JavaScript (map.js)

// キャンパスの要素を取得する
var canvas = document.getElementById( 'map-canvas' ) ;

// 地図のオプションを設定する
var mapOptions = {
	zoom: 18 ,	// 必須
	center: new google.maps.LatLng( 34.99485610000002, 135.7850463 ) ,	// 必須
	scrollwheel: false ,
};

// 地図のインスタンスを作成する
var map = new google.maps.Map( canvas, mapOptions ) ;

CSS

CSS (map.css)

/* 地図キャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}