map is not responsive

[pshudgins]

Hello, love the product, but it doesn’t appear to be responsive on my site. I have it set to 100% in the settings, but when I view it on mobile, I can see very little of the map, and very few markers. How can I fix this? Thank you.

Home

[Perry]

Hi there

Thanks for getting in touch, and thank you for your kind words 🙂

Can you please link me to the page in question?

Kind regards
– Perry

[Perry]

I beg your pardon,

I skimmed over the link in your post.

I had a look just now on my Samsung A5 using Chrome and the map looked exactly how I would expect. It fills the screen and the markers are clearly visible.

Please see my attachment.

If this isn’t the case on your device, please let me know what device and browser you are using and we’ll run some simulations if possible.

Please let me know?

Kind regards
– Perry

Attachments:

You must be logged in to view attached files.

[pshudgins]

Is there no way to view all of the USA, like on the desktop? I want visitors to be able to see all of the markers, not just a certain section of the country. Thanks

[Perry]

Hi there

One possibility would be to add some Javascript to programatically adjust the zoom based on some condition – for instance the device being in portrait orientation.

You could do this through a 3rd party custom JS plugin (I can recommend Simple Custom CSS & JS)

If you need me to make up the code for you I’d be happy to provide that.

Please let me know?

Kind regards
– Perry

[pshudgins]

Yes, please – would love the code, thanks.

[Perry]

Hi there,

Please use the following:

(function($) {

	$(document).ready(function(event) {
	
		if($(window).width() < $(window).height())
		{
			for(var map_id in MYMAP)
			{
				// You can change 2 to a value of your choice
				MYMAP[map_id].map.setZoom( 2 );
			}
		}
	
	});

})(jQuery);

If that has no effect please let me know, it may be necessary to delay that slightly depending on the load order. Please choose to add that in the footer if you use Simple Custom CSS & JS.

Let me know if that works for you?

Kind regards
– Perry

[pshudgins]

Thanks, I added it in, but it doesn’t seem to have an affect… looks like the code does load before the map code, so I”m not sure if that’s the issue? http://www.caddienow.com is the URL with the map. Thank you for any additional ideas

[Perry]

Hi there,

Try adding a delay on it like so

(function($) {

	$(document).ready(function(event) {
		setTimeout(function() {
			if($(window).width() < $(window).height())
			{
				for(var map_id in MYMAP)
				{
					// You can change 2 to a value of your choice
					MYMAP[map_id].map.setZoom( 2 );
				}
			}
		}, 500);
	});

})(jQuery);

Does that help?

Kind regards
– Perry

[pshudgins]

Hmmm… no, that didn’t seem to help. I’m pasting it in exactly as you have it… I’m not supposed to change anything, correct?

You can test here: http://www.caddienow.com

[pshudgins]

Hi, checking in again to see if you have any additional ideas. Please let me know, thanks.

[Perry]

Hi there,

There is a syntax error in the code on your site that’s been introduced at some point between the forum and pasting the code in,

Please change &lt; to a lesser-than sign (<) If you're still experiencing issues, would it be possible for you to provide me with temporary login details? Kind regards - Perry

[pshudgins]

Thank you! That did the trick! Really appreciate the assistance.

[Perry]

This reply has been marked as private.

[Author]

Posts