How to listen to the enlarged image of Google Maps?

Question

I want to know when the zoom_changed Google Maps event is fired specifically when interacting with the +/- buttons. If I use a regular event listener for zoom_changed, I cannot determine if this is an event created by the user or a zoom caused by something like fitBounds (). Look for the best way to do this.

I tried the following things: none of them work:

1) I looked at the event information on zoom_changed. It seems not.

2) Add mouse and mouse listeners that allow me to set a flag to see if the user is within the borders of the map and check the flag for zoom_changed. This does not work because the map does not consider the zoom buttons as part of the map frame (in other words, hovering of the zoom buttons fires the mouseout event).

3) Add a regular (non-gMap) listener to the zoom buttons. However, I cannot find the final CSS selector that will allow me to capture only buttons.

4) Looked at a function in the gMaps API that allowed me to do something like getZoomElements (), and then I could set the listeners using this.

It is strange that I can clearly do what I want by adding a user control to the map. It seems very strange that they would make me do this, instead of catching on the default zoom settings.

Answer 1

I would just not hook the + / - buttons (or the buttons on your own custom control). The user can zoom on the map with the mouse wheel or double-click on the map. In addition, you will rely on implementation details, not the document API, which is the main no-no .

This really means that the only reliable documented way to detect zooming is to listen to the zoom_changed Map events .

If the event handler cannot determine whether the event occurred from a user action or API call, there are two approaches:

• Set the flag before calling the API function so that you know that you can ignore this change.
• Can you redesign your application in such a way that it doesn’t matter if the zoom changes from the code or the user?

Answer 2

I solved this problem by creating custom zoom buttons for my map.

Here is the code from my project:
Change Removed unnecessary and understandable common code.

zoomControl function:

 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); }); } 

your initialization function:

 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); } 

Hope this helps

Answer 3

 var zoomFlag = "user"; // always assume it 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 } } 

Answer 4

I wanted to do the same. I was hoping to find that a method was built into the Google Maps API, but at least you should be able to save the initial zoom level as a variable when initializing the map. Then compare the result of getZoom () with it to find out if it was an increase or decrease.

For instance:

 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 5

I would suggest using a custom control to zoom in / out, and then use event listeners in the user congregation:

http://goo.gl/u8gKC

You can easily hide the default zoom control:

http://goo.gl/N5HIE

( zoomControl to be specific)