Web-shed

Solar powered web

Google maps toggle zoom with css

In development there’s often more than one way to skin a cat. When finding solutions for front end questions I like to explore different avenues, javascript, jQuery, framework, pure css maybe? In this case I’ll run through how I tackled the annoying problem of google maps zooming when scrolling though a web page. Disclaimer: This might not be the ideal approach to use in most scenarios but it is interesting to explore pure css (javascript free) fixes/solutions/hacks. And, yes, I know this could be achieved with a couple of lines of javascript but… that wouldn’t be worth sharing, would it?

Before

See the Pen JbVYbx by davey (@daveybrown) on CodePen.

How to

  1. Add a wrap element around the map iframe with position relative.
  2. Add a checkbox input element and label element into the wrap before the iframe.
  3. onclick="" is required on the label for ios devices.
  4. Hide the checkbox with zero opacity.
  5. Position the label in front of the map, this prevents scrolling from causing the map to scroll.
  6. Use pseudo element :checked to position the map in front of the label overlay (the map z index is increased), enabling map zoom.
  7. Again, use pseudo element :checked to position the overlay to full screen using position fixed.
  8. The full screen overlay can now be clicked to un-check the checkbox and disable map zoom.
  9. Play around, click the map once to enable zoom.
  10. Next, click away from the map once to disable zoom.

After

See the Pen yVryMr by davey (@daveybrown) on CodePen.