ズームレベルの変更時のイベント処理

広告

利用者によって表示されている地図のズームレベルが変更された場合Mapクラスのオブジェクトで「zoom_changed」イベントが発生します。

イベント引数説明
zoom_changedNoneこのイベントは、地図のズームプロパティが変更されると発生します。

このイベントを受信した時に処理を行うには、「addListener」メソッドを使って次のようにイベントリスナを追加します。 

function initialize() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);

  google.maps.event.addListener(map, 'zoom_changed', function() {
    // 実行したい処理
  });
}

これでズームレベルが変更された場合には指定された処理を実行します。

サンプルコード

では実際に試してみます。 

function initialize() {
  var latlng = new google.maps.LatLng(43.582878,144.527893);
  var opts = {
    zoom: 11,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
  dispLevel(map.getZoom());

  google.maps.event.addListener(map, 'zoom_changed', function() {
    dispLevel(map.getZoom());
  });
}

function dispLevel(level) {
  document.getElementById("zoomlevel").innerHTML = "LEVEL:" + level;
}

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code5_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

    <p id="zoomlevel"></p>
  </body>
</html>

ブラウザで上記ページを開くと次のように表示されます。

p5-1

今回はズームレベルが変更されると、新しいズームレベルを地図の左下に表示するようにしてあります。ではナビゲーションコントロールの「－」ボタンを押してズームレベルを1つ広域にして下さい。

p5-2

このようにズームレベルが変更されたイベントを受け取り処理を記述することができます。

( Written by Tatsuo Ikura )