perryrylance

Hi @fabien79

Please see here. If you press “Code” then “Download ZIP” you can use this plugin to force WP Google Maps to load the API from the .com domain.

Does that work for you?

Kind regards
– Perry

Hi @barryrooke

Thank you for getting in touch, sorry to hear the plugin is anything less than completely satisfactory in terms of appearance.

We tried to visit the site you linked us to, however we’re seeing 502 - Bad gateway on that page.

Are you able to advise us on how to view that page?

Kind regards
– Perry

Hi @fabien79

Thank you for getting in touch.

You’re using the Chinese locale (zh_CN), if you switch to zh_HK then your site will not attempt to load the .cn files.

If you need us to provide code to force that, we can do so.

Does that help?

Kind regards
– Perry

Hi @avviano

Thank you for getting in touch.

This can be achieved with reasonable ease by using CSS. If you could kindly provide a link to your map page, and let us know at what screen size you would like the alignment to change, we would be quite glad to provide the CSS for you.

Does that help?

Kind regards
– Perry

Hi @damlau4

Thank you for getting in touch.

This is an issue with our Pro add-on, which is unfortunately not something we can offer support with on this forum as it’s against www.ads-software.com’s forum policy.

Please may I ask you to open a ticket through our support desk, where we would be glad to help.

Kind regards
– Perry

Hi @marcoherzog

Thank you for getting in touch.

This is an issue with our Pro add-on, which is unfortunately not something we can offer support with on this forum as it’s against www.ads-software.com’s forum policy.

Please may I ask you to open a ticket through our support desk, where we would be glad to help.

Kind regards
– Perry

Hi @timmy321

In normal circumstances,

body.page-id-4 #wpgmza_map, body.page-id-4 .wpgmza_map { display:none !important; }

will work, however that code needs to be actually written to the page for it to be applied. If adding that to our plugin or CSS hero has no effect, it’s because your site isn’t outputting the code, this could be due to various reasons, usually it’s due to caching.

.page-id-4 .ol-unselectable canvas{
display: none;
}

This code would only hide the map tiles, not any of the controls. I wouldn’t recommend using this personally.

If you want to hide the not found message on the front page, I’d really recommend that you use CSS rather than JS – we can provide JS if you’re still having issues getting CSS to work. If you are able to get CSS working:

body.page-id-4 .wpgmza-no-results { display: none !important; }

This CSS will prevent the message from appearing at all on the home page.

Please can you try that through whichever method you’re using to add CSS reliably?

Kind regards
– Perry

Hi @timmy321

2) The Pro version mentions that there is an option to sort markers by categories (i.e distance, title, rating), could these be custom categories? As I eventually would like to filter different types of gyms (i.e. crossfit gym, strongman gyms, bodybuilding gyms, health clubs etc.)

Also, if I purchase the pro version, does that mean I can’t seek help from this forum? I’ve seen a few forums where people are told they cannot ask questions as they’ve paid for the plugin.

We cannot help you with the premium add-ons here, at all. It’s against www.ads-software.com’s forum policies. That means we cannot offer tech support, sales or answer any other kind of questions about anything, strictly other than the plugin. You’re quite welcomed to reach out to us through our support desk or on our support forums.

There seems to be a noticeable lag between loading the homepage with the map outline and the map disappearing? I’ve tried it on a few different browsers.

The JavaScript which controls the visibility of the map runs as soon as it possibly can. If you need that hidden any sooner, ideally you’d use CSS to control that. Have you considered trying an alternative Custom CSS plugin to see if that works?

Kind regards
– Perry

Hi Claude

Thank you for getting in touch.

You need to add your site to the list of allowed HTTP referrers in your
Google Maps API dashboard.

Please see our documentation on setting your key up for a walk-through of the process from start to finish.

Does that help?

Kind regards
– Perry

Hi @timmy321

For some reason that CSS is still being ignored. Perhaps your host implements some kind of caching. We’re unsure at this stage as clearly it’s not your theme or a 3rd party plugin.

Please update that to the following

jQuery(function($) {

	if(!window.WPGMZA)
		return;

	$("body.page-id-4 #wpgmza_map, body.page-id-4 .wpgmza_map, body.page-id-4 .wpgmza-no-results").remove();

	$("body.page-id-4 input.wpgmza-search").off("click");
	$("body.page-id-4 input.wpgmza-search").on("click", function(event) {
	
		var address		= $("input.wpgmza-address").val();
		var radius		= $("select.wpgmza-radius").val();
		
		window.location.href = 
			"/gym-locator?address=" 
			+ encodeURIComponent(address) 
			+ "&radius=" 
			+ encodeURIComponent(radius);
	
	});
	
	var address, radius;
	
	WPGMZA.getQueryParamValue = function(name) {
		var regex = new RegExp(name + "=([^&#]*)");
		var m;
		
		if(!(m = window.location.href.match(regex)))
			return null;
		
		return decodeURIComponent(m[1]);
	};
	
	if((address = WPGMZA.getQueryParamValue("address")) && (radius = WPGMZA.getQueryParamValue("radius")))
	{
		$("input.wpgmza-address").val(address);
		$("select.wpgmza-radius").val(radius);
		
		$(window).on("load", function(event) {
			$("input.wpgmza-search").click();
		});
	}

});

This should work well for you, this code will also remove the “No results” message.

Does that work as expected?

Kind regards
– Perry

Hi Timmy

The address being incorrectly formatted is actually an oversight in our core code, which we’ll patch, thank you for bringing that to our attention. Please again replace that JavaScript with

jQuery(function($) {

	if(!window.WPGMZA)
		return;

	$("body.page-id-4 input.wpgmza-search").off("click");
	$("body.page-id-4 input.wpgmza-search").on("click", function(event) {
	
		var address		= $("input.wpgmza-address").val();
		var radius		= $("select.wpgmza-radius").val();
		
		window.location.href = 
			"/gym-locator?address=" 
			+ encodeURIComponent(address) 
			+ "&radius=" 
			+ encodeURIComponent(radius);
	
	});
	
	var address, radius;
	
	WPGMZA.getQueryParamValue = function(name) {
		var regex = new RegExp(name + "=([^&#]*)");
		var m;
		
		if(!(m = window.location.href.match(regex)))
			return null;
		
		return decodeURIComponent(m[1]);
	};
	
	if((address = WPGMZA.getQueryParamValue("address")) && (radius = WPGMZA.getQueryParamValue("radius")))
	{
		$("input.wpgmza-address").val(address);
		$("select.wpgmza-radius").val(radius);
		
		$(window).on("load", function(event) {
			$("input.wpgmza-search").click();
		});
	}

});

We can’t really comment on what Elementor may or may not be doing as we’re not familiar with the ins and outs of their code,

What I’d recommend is disabling everything except WP Google Maps (including switching back to the default theme) and then establishing if the CSS is working in that state.

From there you can start re-enabling things one by one until we find out what is causing that CSS to be dropped.

Once we’ve figured that out then from there we can advise on potential solutions for that.

I do hope that helps!

Kind regards
– Perry

Hi @timmy321

From our end, the JavaScript is now working perfectly – typing in an address, eg Bristol, on the home page and clicking search will take me to the Gym Locator page with Bristol in the centre of the map at the radius we selected.

Please can you confirm that is working as expected at your end?

I’m not sure why that CSS isn’t being rendered at this stage, we can see it if we read the plugins settings in this pages source code, however for some reason it’s just not being rendered into the page itself.

Could you try disabling CSS Hero temporarily?

Kind regards
– Perry

Hi Tim

No worries, not at all, I promise this will work, it just needs tweaking ??

Please remove all the Custom JS and replace it with this new code:

jQuery(function($) {

	if(!window.WPGMZA)
		return;

	$("body.page-id-4 input.wpgmza-search").off("click");
	$("body.page-id-4 input.wpgmza-search").on("click", function(event) {
	
		var address		= $("input.wpgmza-address").val();
		var radius		= $("select.wpgmza-radius").val();
		
		window.location.href = 
			"/gym-locator?address=" 
			+ encodeURIComponent(address) 
			+ "&radius=" 
			+ encodeURIComponent(radius);
	
	});
	
	var address, radius;
	
	if((address = WPGMZA.getQueryParamValue("address")) && (radius = WPGMZA.getQueryParamValue("radius")))
	{
		$("input.wpgmza-address").val(address);
		$("select.wpgmza-radius").val(radius);
		
		$(window).on("load", function(event) {
			$("input.wpgmza-search").click();
		});
	}

});

I can see you’ve entered the Custom CSS however it isn’t rendered on the page at all, are you using any kind of caching plugin which you might need to clear?

Kind regards
– Perry

Hi @timmy321

Thank you for that, I do beg your pardon – I made a small mistake there,

Please can you change the line

if(address = WPGMZA.getQueryParamValue("address") && radius = WPGMZA.getQueryParamValue("radius"))

to

if((address = WPGMZA.getQueryParamValue("address")) && (radius = WPGMZA.getQueryParamValue("radius")))

If you replace that line then the code should work as expected. Your theme and Elementor shouldn’t have any effect on this at all.

Kind regards
– Perry

Hi @timmy321

Please firstly go to Maps -> Settings -> Advanced and under the Custom CSS field, please paste the following:

body.page-id-4 #wpgmza_map,
	body.page-id-4 .wpgmza_map
{
	display: none !important;
}

On the same page, please then paste the following into Custom JS:

jQuery(function($) {

	if(!window.WPGMZA)
		return;

	$("body.page-id-4 input.wpgmza-search").off("click");
	$("body.page-id-4 input.wpgmza-search").on("click", function(event) {
	
		var address		= $("input.wpgmza-address").val();
		var radius		= $("select.wpgmza-radius").val();
		
		window.location.href = 
			"/gym-locator?address=" 
			+ encodeURIComponent(address) 
			+ "&radius=" 
			+ encodeURIComponent(radius);
	
	});
	
	var address, radius;
	
	if(address = WPGMZA.getQueryParamValue("address") && radius = WPGMZA.getQueryParamValue("radius"))
	{
		$("input.wpgmza-address").val(address);
		$("select.wpgmza-radius").val(radius);
		
		$("input.wpgmza-search").click();
	}

});

Please confirm that works as expected?

Kind regards
– Perry