How to capture the click event for a Google Maps zoom control

Google Maps Javascript v3 for a web app running on a phone.

I have a map that calls fitbounds every 10 seconds and sets the zoom accordingly. I want to create code for when a user either drags on the map to show different areas, or clicks on the zoom control to adjust the zoom, my function executes and prevents the map from readjusting the zoom every ten seconds based on the bounds. Then, if the user wants to go back to the original view, with the bounds being reset again every 10 seconds, they just click a button. I can't seem to figure out the right way to capture these events. I can capture the button event easily enough, but I don't know about the other two. Thanks.
LVL 9
BobHavertyComhAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
So...somewhere you are calling a timer function to run map.fitBounds() every 10 seconds. Assuming the variable timer has global scope.
var timer = setInterval(runMapFitBounds(), 10000);

Open in new window

You could add an event handler to capture when the map zoom control is used.
google.maps.event.addListener(map, 'zoom_changed', function()  {  
   clearInterval(timer);
 });

Open in new window

And another for when the map is dragged to recenter.
google.maps.event.addListener(map, 'dragend', function() { 
   clearInterval(timer);
});

Open in new window

Then you would need a function to restart the timer on a button click.
function restartTimer() {
	 timer = setInterval(runMapFitBounds(), 10000);
 }

Open in new window

And a button to trigger it.
<button id="restartTimer" onClick="restartTimer()">Reset Map</button>

Open in new window

0
BobHavertyComhAuthor Commented:
Hi Tom, thanks for the response. That looks right and dragend looks like what I need. But here's the thing. I don't think I can use the zoom changed event because normally my script is using a setinterval function and checking all markers on the page and calling fitbounds which is adjusting the zoom according to the markers it has. What I really need is a click event that says they actually clicked on the zoom control itself, not the event that happens after they click, or else this will get mixed up with what normally happens and possibly even create a recursive sort of situation.
0
Tom BeckCommented:
Here's my simple test on a page with a google map.
google.maps.event.addListener(map, 'zoom_changed', function() {
		  console.log("Zoom Changed");
	  });

Open in new window

The console says "Zoom Changed" whether I click the zoom control on the map or I use the mouse wheel to zoom. It should work in your situation. "zoom_changed" is the only event related to zoom in the API.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BobHavertyComhAuthor Commented:
""zoom_changed" is the only event related to zoom in the API."

Well I'm disappointed that I can't access the click event of the zoom control itself, but if you say that's all I have at my disposal, then at least I know what I'm dealing with. Thanks again.
0
Tom BeckCommented:
I don't see why you would need anything else to capture zoom events. The zoom will change anytime someone clicks the zoom control so it's essentially the same as having a zoom control click handler with the added bonus that it also handles mouse wheel zoom events.

Thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.