How to block scroll-zoom in the google map API

Site URL: https://www.ginfo.fr/

Hi everybody !

my squarespace site is progressing well, but I'm trying to block the zoom in the google map API when the page scrolls with the mouse.

But, if the visitor wishes to zoom, he can by clicking on the + button 

Do you have an idea ?

Thank you so much

Same problem here. Very annoying issue for any site visitors.

You can put an overlay on the map, but leave some of it open so the controls can be used. This will leave a strip on the right side of the map, above the controls, where someone could get caught in the map's zoom feature. Also, because those controls are not fixed to an exact position on the map, the distance between the overlay and the controls will vary slightly.

At any rate, here's some code you can use. You can play with the "width" percentage to cover more or less of the map.

.map-block:before {
  content:"";
  position: absolute;
  width: 95%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0);
  z-index: 1;
  }
@media (max-width: 640px) {
  .map-block:before {
  	width: 88%;
  }
}

I hope this helps