zoom_changed - Mapクラスのイベント

zoom_changed - Mapクラスのイベント

このページでは、Mapクラスのイベントであるzoom_changedの説明をしています。

zoom_changedとは?

Mapクラスのzoom_changedは、地図の、ズーム値を変更したタイミングで発火するイベントです。

サンプルデモ

zoom_changedのイベントを設定した例です。地図の、ズーム値を変更してみて下さい。イベントが発生するごとに、地図の下にあるテキストの回数が増えます。

イベント発生回数: 0

サンプルプログラム

map.js

// グローバル変数の定義
var map = null ;		// 地図のインスタンス

// 地図の出力
function initialize()
{
	/* 変数の定義 */ 
	var canvas , latlng , mapOptions ;

	/* キャンパスの要素[<div id="map-canvas"></div>]を取得する */
	canvas = document.getElementById( 'map-canvas' );

	/* 中心座標を、LatLngクラスで用意する */
	latlng = new google.maps.LatLng( 34.6686468,135.7845667 );

	/* Mapクラスのオプションを設定する */
	mapOptions = {
		zoom: 18 ,				//ズーム値
		center: latlng ,		//中心座標 [LatLngクラスで指定]
	} ;

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

	/* イベントの作成 */
	google.maps.event.addListener( map , 'zoom_changed' , function()
	{
		// イベント回数を表示するエレメント
		var elm = document.getElementById( 'event-num' ) ;

		// イベントが発生した回数を増やす
		elm.innerHTML = Number( elm.innerHTML ) + 1 ;
	} ) ;
}

/* ページのロード後に関数[initialize()]を実行する */
google.maps.event.addDomListener( window , 'load' , initialize ) ;

map.html

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps JavaScript APIのサンプルデモ</title>
		<link rel="stylesheet" href="./map.css">
	</head>
<body>

	<!-- 地図のキャンパス -->
	<div class="map-embed">
		<div id="map-canvas"></div>
	</div>
	
	<!-- イベントの発生回数 -->
	<p>イベント発生回数: <span id="event-num">0</span></p>

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

</body>
</html>

map.css

/* 地図のキャンパスを囲む要素 */
.map-embed
{
	position: relative ;
	top: 0 ;
	left: 0 ;

	margin: 2em auto 0 ;
	padding: 0 0 67.5% ;

	width: 100% ;
	height: 0 ;

	background: #f2f2f2 ;
}

div._embed-5625
{
	padding: 0 0 56.25% ;
}

/* 地図のキャンパス */
.map-embed > div
{
	position: absolute ;
	top: 0 ;
	left: 0 ;

	width: 100% ;
	height: 100% ;

	margin: 0 ;
	padding: 0 ;
}

/* 表示崩れを防ぐ */
.map-embed img
{
	max-width: none ;
}

ダウンロード

zoom_changedのイベントをお手軽に試せるように、サンプルプログラム一式を配布しています。

ファイル一覧

SYNCER003250216
map.js Download
map.html Download
map.css Download

ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。

Download Zip