Zoom level on mobile

[dynafish]

Hi

Thanks for a fantastic plugin 🙂

If pssible I would like a different zoom level on mobile and desktop. I did find a possible fix here:

Map in not responsive at all

but this dates from 2018, and when I look at core.js I see:

// NB: Redundant as of 8.1

so I’m guessing that this fix is not now relevant…? Do you have an alternative I could use? Could I put code into a page template?

I did try the “Fit map bounds to markers” setting, but as this puts the markers right at the very edge of the screen, it’s not a good solution for us. Would it be possible to pad the map to enable the extreme markers to be set in from the bounds?

[Steven]

Hi @dynafish,

Thank you so much for getting in touch, we really appreciate your time.

Just to confirm, you would like to apply different zoom levels depending on whether the visitor is on mobile or desktop?

If so, the following snippet should help to achieve this:

jQuery(function($){
	if( /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
		jQuery(document.body).on("init.wpgmza", function (event) {	
			var mobileZoom = 13;

			WPGMZA.maps[0].setZoom(mobileZoom);
		});
	}
});

Kindly set your map zoom to the desired zoom for desktop and then apply the above custom JS to the custom JS field via Maps -> Settings -> Advanced Settings -> Custom JS.

Simply adjust the mobileZoom = 13; to a level between 1 and 21.

Kindly let me know if this helps?

I look forward to hearing back from you.

Kindest Regards,
Steven de Beer

[dynafish]

Hi Steven

Excellent, that works a treat, thank you 🙂

David

[Steven]

Hi David,

Thank you so much for getting back to me.

I am glad to hear this has helped. 🙂

Please do let me know if you have any other issues or questions as I am always eager to assist.

If you ever have two minutes spare, please consider reviewing the plugin on https://wordpress.org/support/plugin/wp-google-maps/reviews/#new-post it would mean the world to me! (If possible, could I ask you to mention both your name and mine in the review for administrative purposes, this would be a tremendous help!)

Do have a fantastic week further!

Kindest Regards,
Steven De Beer

[telleid]

Hello, hope it’s okay to resurrect an old post. I’m having a similar issue (want two different zoom levels on desktop and mobile) and was hoping this code snippet was a solution. Unfortunately it no longer seems to work. Is there an updated option?

“Fit map bounds to markers” also doesn’t work, as it splits a marker group (in the Pacific) which should be shown together and puts them on opposite sides of the globe.

[Matthew]

Hi @telleid,

Thank you for getting in touch with us, we do appreciate your time.

I am happy to assist you with the respective code thus I believe the previous code may not be working due to timing, thus please may you try the below code and confirm if this helps:

jQuery(function($){
    $(document).on('markersplaced.wpgmza', function(){
        var isMobileDevice = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        if(isMobileDevice){
            let mobileZoom = 13;
            WPGMZA.maps[0].setZoom(mobileZoom);
        }
    })
})

I hope this helps?

Kindest Regards,
Matthew

[telleid]

Hi Matthew,

Thank you so much, that did work! I really appreciate it.

One more question along the same lines — is it possible to change the zoom level based on the window width? I notice that although the zoom we set for desktop works at the larger widths of our theme, it fails (ie pins are outside the visible bounds) around 800px, which is just beyond the mobile width (and maybe missed anyway since it looks like the code is checking device type?).

Totally understand if this is not possible.

Thank you again!
Diliaur

[Matthew]

Hi Diliaur,

Thank you for your response.

I am most happy to hear that the code works and it is a pleasure.

With regards to your question, yes this is possible thus please see the updated code below:

jQuery(function($){
    $(document).on('markersplaced.wpgmza', function(){
        var isMobileDevice = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        
        if(isMobileDevice){
            let mobileZoom = 13;
            WPGMZA.maps[0].setZoom(mobileZoom);
        } else {
            if(window.innerWidth < 800){
                let zoom = 12;
                WPGMZA.maps[0].setZoom(zoom);
            }
        }
    })
})

The above updated code will first check if it is a mobile device, and if so it will set to zoom to ’13’.

If the device is not a mobile device, it will then check if the window width is less than ‘800px’ and will set the zoom to ’12’ if true.

I hope this helps?

Kindest Regards,
Matthew

[telleid]

Matthew,

Thank you SO much! This is perfect 🙂 Tested and it works with no hiccups. Really appreciate it.

Best,
Diliaur

[Matthew]

Hi Diliaur,

Thank you for getting back to me and most valued time, I tremendously appreciate it!

I am most happy to hear that, and it was my great pleasure assisting you with this.

Please may you kindly consider reviewing our plugin at https://wordpress.org/support/plugin/wp-google-maps/reviews/#new-post?

It would really mean the world to me! And if possible, please could I kindly ask you to mention both your name and mine in the review for administrative purposes as this would be a tremendous help?

Should you ever require any further assistance, I am more than happy to help.

Have a fantastic day further!

Kindest Regards,
Matthew

[Author]

Posts