Googleマップでユーザー生成ズームを聞くにはどうすればよいですか？

Question

Googleマップのzoom_changedイベントが+/-ズームボタンとユーザーのやりとりによって具体的に発生する時期を知りたい。私がzoom_changedの一般的なイベントリスナーを使用している場合、ユーザーが生成したイベントか、fitBounds（）のようなものによるズームの変更かどうかはわかりません。これを行う最善の方法を探しています。

私が動作するようには思えいずれも次のこと、試してみた：

1）zoom_changedのイベント情報を探しました。誰もいないようです。

2）mouseoverとmouseoutのリスナーを追加して、ユーザーが地図の境界にいるかどうかを確認するフラグを設定し、zoom_changedでフラグをチェックします。これはマップがマップフレームの一部としてズームボタンを考慮しないためです（つまり、ズームボタンの上にマウスを移動するとmouseoutイベントがトリガーされます）。

3）通常の（gMapでない）リスナーをズームボタンに追加します。しかし、私はボタンをつかむことができる決定的なCSSセレクターを見つけることができません。

4）gMaps APIのgetZoomElements（）のような機能を探して、それを使ってリスナーを設定することができました。

マップにカスタムコントロールを追加すると、奇妙なことは明らかにできます。彼らがデフォルトのズームコントロールにフックを持たせるのではなく、私にそれを強制することは非常に奇妙なようです。

Answer 1

+/-ボタン（またはそれに関連する独自のカスタムコントロールのボタン）にフックするだけではありません。ユーザーは、マウスホイールを使用して地図のズームを変更したり、地図をダブルクリックしたりすることができます。さらに、ドキュメント化されたAPIではなく、実装の詳細に頼っています。は、メジャー番号なしです。

これは本当にズームの変化を検出するための唯一の信頼性の高い、文書方法はMapのzoom_changed eventに耳を傾けることであることを意味します。

あなたのイベントハンドラは、イベントがユーザーの操作やAPIの呼び出しから来たかどうかを判断できない場合は、二つのアプローチがあります：あなたはこれを無視することができます知っているように、

• は、API関数を呼び出す前にフラグを設定します変化する。
• ズームの変更がコードやユーザーから行われたかどうかは関係ありません。

  http://goo.gl/u8gKC

  あなたは簡単にデフォルトのズームコントロールを非表示にすることができます：

  私は/アウトズーム用のカスタムコントロールを使用して、カスタムcongrolにイベントリスナーを使用することをお勧めし

Answer 2

http://goo.gl/N5HIE

（zoomControl）

Answer 3

私は同じことをやろうとしていました。私は、Google Maps APIに組み込まれた方法があることを知りたいと思っていましたが、地図を初期化するときに最低限、ズームレベルを変数として保存する必要があります。次に、getZoom（）の結果と比較して、ズームインかズームアウトかを確認します。例えば

：

map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 11 }); 
var previous_zoom = 11; 

google.maps.event.addListener(map,'zoom_changed',function(){ 
    if(map.getZoom() > previous_zoom) { 
    alert('You just zoomed in.'); 
    } 
    previous_zoom = map.getZoom(); 
} 

Answer 4

私は私の地図のためのカスタムズームボタンを作成することで、この問題を解決しました。
編集：削除しまし不要と自己説明共通コード

あなたzoomControl機能：

function zoomControl(map, div) { 

    var controlDiv = div, 
     control = this; 

    // Set styles to your own pa DIV 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the zoom in div. 
    var zoomIncrease = document.createElement('div'); 
    zoomIncrease.title = 'Click to zoom in'; 
    // etc. 

    // Set CSS for the zoom in interior. 
    var zoomIncreaseText = document.createElement('div'); 
    // Use custom image 
    zoomIncreaseText.innerHTML = '<strong><img src="./images/plusBut.png" width="30px" height="30px"/></strong>'; 
    zoomIncrease.appendChild(zoomIncreaseText); 

    // Set CSS for the zoom out div, in asimilar way 
    var zoomDecreaseText = document.createElement('div'); 
    // .. Code .. Similar to above 

    // Set CSS for the zoom out interior. 
    // .. Code .. 

    // Setup the click event listener for Zoom Increase: 
    google.maps.event.addDomListener(zoomIncrease, 'click', function() { 
     zoom = MainMap.getZoom(); 
     MainMap.setZoom(zoom+1); 
     // Other Code parts 
    }); 

    // Setup the click event listener for Zoom decrease: 
    google.maps.event.addDomListener(zoomDecrease, 'click', function() { 
     zoom = MainMap.getZoom(); 
     MainMap.setZoom(zoom-1); 
    }); 
} 

あなたの初期化関数：ここ

は私のプロジェクトからのコードがある

function initializeMap() { 

    var latlng = new google.maps.LatLng(38.6, -98); 
    var options = { 
     zoom : 5, 
     center : latlng, 
     mapTypeId : google.maps.MapTypeId.ROADMAP, 
     // Other Options 
    }; 
    MainMap = new google.maps.Map(document.getElementById("google-map-canvas"), 
      options); 

    // The main part - Create your own Custom Zoom Buttons 
    // Create the DIV to hold the control and call the zoomControl() 
    var zoomControlDiv = document.createElement('div'), 
     zoomLevelControl = new zoomControl(MainMap, zoomControlDiv); 

    zoomControlDiv.index = 1; 
    MainMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(zoomControlDiv); 
} 

希望すると助かります

Answer 5

var zoomFlag = "user"; // always assume it's user unless otherwise 

// some method changing the zoom through API 
zoomFlag = "api"; 
map.setZoom(map.getZoom() - 1); 
zoomFlag = "user"; 

// google maps event handler 
zoom_changed: function() { 
    if (zoomFlag === "user") { 
    // user zoom 
    } 
}