Google maps

Stagger Lee
1818 Posts
Stagger Lee posted this 09 August 2015

I like your solution for Google maps. No extra code at all, and all possible options Google gives are there to set.

Today with Bootstrap people more and more use Gmaps somewhere in the middle (often Homepage) with 100% full background width.

And this rule by Google to have enabled mouse scroll zoom ruins experience and distract when scrolling whole website.

This code in attachment (for WP) is GPL. Can you take a look and see if you can use something for Themler ?

https://github.com/diazemiliano/mapScrollPrevent
http://diazemiliano.github.io/mapScrollPrevent/

I like your solution for Google maps. No extra code at all, and all possible options Google gives are there to set. Today with Bootstrap people more and more use Gmaps somewhere in the middle (often Homepage) with 100% full background width. And this rule by Google to have enabled mouse scroll zoom ruins experience and distract when scrolling whole website. This code in attachment (for WP) is GPL. Can you take a look and see if you can use something for Themler ? [https://github.com/diazemiliano/mapScrollPrevent][1] [http://diazemiliano.github.io/mapScrollPrevent/][2] [1]: https://github.com/diazemiliano/mapScrollPrevent [2]: http://diazemiliano.github.io/mapScrollPrevent/
wordpress scroll gmap google-map zoom
mapScrollPrevent-master.zip
Vote to pay developers attention to this features or issue.
5 Comments
Order By: Standard | Newest
Stagger Lee
1818 Posts
Stagger Lee posted this 09 August 2015

I installed this plugin and works very smoothly. Nice.
Take a look a it, you could offer something very special via Themler.

Exist no solution for that problem. "Best" solution is removing permalink from maps via JS. But then, you can put just simple map image and link to Gmap server. Nothing on it is clickable with this JS solution.
There is one very simple pure CSS solution too. Results are the same, you cannot click on anything on map.

I installed this plugin and works very smoothly. Nice. Take a look a it, you could offer something very special via Themler. Exist no solution for that problem. "Best" solution is removing permalink from maps via JS. But then, you can put just simple map image and link to Gmap server. Nothing on it is clickable with this JS solution. There is one very simple pure CSS solution too. Results are the same, you cannot click on anything on map.
Stagger Lee
1818 Posts
Stagger Lee posted this 04 October 2015

They did it with Bootstrap only. Dont know how.
Map zooming works, but not with mouse scroll button.

http://www.bootply.com/5zTY0X9HOU

http://www.bootply.com/dTWJU2zj5x

They did it with Bootstrap only. Dont know how. Map zooming works, but not with mouse scroll button. http://www.bootply.com/5zTY0X9HOU http://www.bootply.com/dTWJU2zj5x
shaulhadar
447 Posts
shaulhadar posted this 04 October 2015

This is a great ui addition :) I vote for it

This is a great ui addition :) I vote for it
Stagger Lee
1818 Posts
Stagger Lee posted this 04 October 2015

Seems as this WordPress plugin is not needed. Have to test code from those examples. Believe need to insert Gmap link, or embed code, directly in some control.

I noticed one other nasty problem with this plugin but cannot remember now exactly what. It makes it not suitable as a candidat for solving this problem. Probably easy to fix but I refuse to touch core files of plugins.

But vote for some solution at all. Votes are OK and welcome.

Seems as this WordPress plugin is not needed. Have to test code from those examples. Believe need to insert Gmap link, or embed code, directly in some control. I noticed one other nasty problem with this plugin but cannot remember now exactly what. It makes it not suitable as a candidat for solving this problem. Probably easy to fix but I refuse to touch core files of plugins. But vote for some solution at all. Votes are OK and welcome.
Stagger Lee
1818 Posts
Stagger Lee posted this 13 December 2015 

<script>
    jQuery(function($) {
        $('iframe.embed-responsive-item').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('.bd-googlemap-1').on('click', function () {
            $('iframe.embed-responsive-item').removeClass('scrolloff'); // set the pointer events true on click
        });
        $("iframe.embed-responsive-item").mouseleave(function () {
            $('iframe.embed-responsive-item').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
        });
    });
</script>
<style>
.scrolloff {
        pointer-events: none;
    }
</style>

Settings tab - Additional HTML or some HTML control besides Map block. Change classes if needed.

<script> jQuery(function($) { $('iframe.embed-responsive-item').addClass('scrolloff'); // set the pointer events to none on doc ready $('.bd-googlemap-1').on('click', function () { $('iframe.embed-responsive-item').removeClass('scrolloff'); // set the pointer events true on click }); $("iframe.embed-responsive-item").mouseleave(function () { $('iframe.embed-responsive-item').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area }); }); </script> <style> .scrolloff { pointer-events: none; } </style> Settings tab - Additional HTML or some HTML control besides Map block. Change classes if needed.
You must log in or register to leave comments