zoom_changedとは?
Mapクラスのzoom_changedは、地図の、ズーム値を変更したタイミングで発火するイベントです。
このページでは、Mapクラスのイベントである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 ;
}