Disable Panning and zoom in / out of Google maps?

Hi,
I want to have the google maps on these two pages frozen so that when viewed on either desktop or Mobile devices the google map will display fixed not allowing them to move around. or zoom in and out.

- *URL REMOVED*
- *URL REMOVED*

Support Access open

Thanks
Tom

  • Michelle Shull

    Hi, Tom!

    Our current Google Maps plugin doesn't allow users to disable zoom at this time. You can disable scrolling, I've turned on the Add On that allows you to use this. With this activated, you can allow or disallow scrolling on a map-by-map basis, via the map settings for each map.

    I also notice you've got more than one Google Maps plugin installed. This may cause you an issue later, as each plugin will call the Google Maps API, meaning it will load multiple times on each page. This may cause conflicts in how your maps work, later on, and it's an unnecessary use of limited site resources. If you're just testing, that's fine, but you may want to do your tests with only one plugin active at a time to prevent any unexpected snafus.

    Thanks!

  • Tom

    Hi Michelle,

    Thanks for the reply, im currently embedding the maps directly using the Embed code, as the plugins were causing other display issues. i came across this and as i have no experience with javascript i wanted to see if its firstly possible to use in my case? and how it could be implemented?

    http://trulycode.com/bytes/disable-google-maps-drag-zoom-mobile-iphone/

    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

    var isDraggable = w > 480 ? true : false;
    var mapOptions = {
    draggable: isDraggable,
    scrollwheel: false
    };

    Thanks

    Tom

  • Tom

    Tried this one with @Bojan Radonic while in live chat, but did not work

    copied that into the fucntions.php
    add_action('wp_footer','show_javascript_function');
    function show_javascript_function(){
    ?>

    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var isDraggable = w > 480 ? true : false;
    var mapOptions = {
    draggable: isDraggable,
    scrollwheel: false
    };

    <?php
    }
    however seems not to have affected the google maps on the site -
    *URL REMOVED*
    *URL REMOVED*

    have removed the code for now.

    is there any other things i could try?

    Thanks

    Tom

  • Tom

    I found that if i paste the embed code with this

    style="pointer-events:none;"

    like below then the map disables all mouse behavour, both on desktop and mobile devices which is great. However Now i am stuck with buttons such as the SignIn top right + Directions + Save + Be the first to review + View larger Map + the "+ / -" buttons on the maps which are effectively disabled as they cant be clicked. is it possible to hide them from the map that way there is a clean google map just displaying the map itself and the zoom + panning is disabled?

    Ideally all i need is for it to be disabled only on mobile devices. therefore is it possible to have some kind of code stating if mobile device then disable. and if desktop then just have normal embedded map that is responsive to mouse actions?

    <iframe style="pointer-events:none;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2484.0654875579908!2d-0.17006299867248537!3d51.493665724716045!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48760569fdc6df19%3A0xeeee756374410df1!2s*URL REMOVED*!5e0!3m2!1sen!2s!4v1429176727968" width="600" height="450" frameborder="0" style="border:0"></iframe>

    *URL REMOVED*
    support access open

    Found these resources not sure how to impliment though?
    - https://developers.google.com/maps/documentation/staticmaps/?csw=1
    - http://stackoverflow.com/questions/24768772/prevent-a-google-maps-iframe-from-capturing-the-mouses-scrolling-wheel-behavior
    - http://stackoverflow.com/questions/29146888/disable-scrolling-zoom-in-google-maps-iframe

    screenshot - http://awesomescreenshot.com/0e44tucu57
    Thanks

    Tom

  • Bojan Radonic

    Hey there @Tom,

    There should be a way to disable maps UI, I've found this here https://developers.google.com/maps/documentation/javascript/controls.

    As for having that displayed only on smaller resolutions as well as zooming not working only there that should be possible with jQuery. I'll include our SLS guys in this thread for their valuable opinion on this matter. Please note that, developer response might be slower than usual staff response, so we appreciate your patience on this.

    Best regards,
    Bojan

  • Hoang Ngo

    Hi @Tom,

    I hope you are well today and I'm sorry for the delay.

    Perhaps you can try something like this

    <script type="text/javascript">
            jQuery(function ($) {
                //disable zoom if mobile
                var mapOptions = {
                    scrollwheel: false
                };
                if (detectmob() == true) {
                    mapOptions.zoomControl=false;
                    mapOptions.panControl=false;
                    mapOptions.draggable=false;
                }else{
                    //your options for non-mobile here
                }
    
            })
            function detectmob() {
                if (navigator.userAgent.match(/Android/i)
                    || navigator.userAgent.match(/webOS/i)
                    || navigator.userAgent.match(/iPhone/i)
                    || navigator.userAgent.match(/iPad/i)
                    || navigator.userAgent.match(/iPod/i)
                    || navigator.userAgent.match(/BlackBerry/i)
                    || navigator.userAgent.match(/Windows Phone/i)
                ) {
                    return true;
                }
                else {
                    return false;
                }
            }
        </script>

    The function detectmob will give you more accuracy when checking if the current device is mobile or not, instead of only check the width/height, as you know, newest mobiles nowadays having HD resolution :wink:

    If you have any issues please don't hesitate to let us know so we can assist.

    Best regards,
    Hoang

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.