Responsive google maps and disabled scrolling?

The CMS Questions
1

I’m using this snippet: plugins/snippets/map/readme.mdown at master · getkirby-v1/plugins · GitHub

But it seems like the map is locked into a measurement. I would like to make it both responsive and also disable the scroll to avoid getting caught in it when scrolling the page or in touch-screen devices.

Any advice? Thanks a lot!

2

Are you still on Kirby 1? The snippet you mentioned is deprecated and was reported not to work anymore without changes, see this post. Pls. refer to the docs of the new Google Maps API mentioned in that post.

3

Hi there! No i’m on Kirby 2. I did the two-line code change proposed here and had it working quite nicely. I didn’t realize, however that the disabling the zoom on scroll and making it responsive could be related to which method I used to import the map.

I did try to follow the instructions on the The Google Maps Javascript API as well as the geolocation panel field and a Google Maps Kirbytag but was unsuccessful with all 3. I got the Google Maps API working but it seemed to need more manual configuration than I would like to do right now considering the snippet was already working so quickly.

I will continue trying! Thanks for the feedback.

4

To make the snippet responsive, just change to px values in the snippet to percentages in lines 24/25:

elem.style.width  = options.width + '%';
elem.style.height = options.height + '%';

To prevent zooming, add this line after line 38:

 scrollwheel: false,
5

That works perfectly! Thank you for your help!!