Google Maps API Zoom5 Control

In 2015 Google decided to get rid of the classic slider-style zoom control and replace it with just plus and minus buttons. This makes sense on phones where screen space is scarce and you can do big scale changes with a pinch motion. However on desktops with lots of screen space but no touch screen, it's not so good. You can use your mouse's scroll wheel - everyone has a scroll wheel these days, right? - but that is imprecise and still slow.

As a partial replacement for the slider, here is a new control that zooms five steps at once. Try it out in this sample map:

Using the Zoom5 Control

The control is written to be mostly independent of other files, so you can easily drop it into any Google Maps API v3 map. Start by loading the code into your HTML file:

<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.maps_g3.zoom5.jsm" type="text/javascript"></script>
    

If you want to copy the code to your own site that's fine - trade-off between depending on me vs. getting any bugfixes.

Step two, add the control to your map. Pass in the same mapOptions you used to create the map.

acme.maps_g3.zoom5.Add( map, mapOptions );
    

That's all there is to it.

ACME Labs / JavaScript Utilities / Zoom Control