Support » Plugin: WP Google Maps » Link Store search to homepage button

  • Resolved timmy321

    (@timmy321)


    Hi there,

    I’m new to website building so please bear with me.

    I would like to link the store search options in my gym locator page ( http://findgyms.co.uk/gym-locator/ ) to the button on my homepage:

    http://findgyms.co.uk/

    I’ve done a lot of googling and still can’t figure out how to do it or what the right questions to be asking are.

    Basically I would like the user to be able to put their post code/zip code or location into the button on the homepage and that link to the store location results page. (I haven’t put any markers in yet though)

    I’ve seen this on a number of websites so I imagine it is possible, I just don’t know how.

    Could anyone please help?

    Many thanks in advance,

    Tim

    The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 31 total)
  • Thread Starter timmy321

    (@timmy321)

    Ah yes, I posted that as you replied πŸ™‚

    Yep, The JS Code does redirect however that error message comes up when searching a location.

    I tried deactivating CSS Hero and nothing changed πŸ™

    This has really got me stumped.. I know the button that I’ve placed the map shortcode in is an elementor made button – i’m using the free version of elementor that doesn’t allow custom css to be put in through their web builder app. Could that somehow be preventing any further css put through wordpress or maps settings from working?

    Cheers,

    Tim

    Thread Starter timmy321

    (@timmy321)

    Well, this is strange.. Again, I do apologise.. that error message only pops up when I search am I am logged into WordPress.

    The error message doesn’t pop up in different browsers or when logged out of WordPress.

    So this is progress! πŸ™‚

    Now the css is the strange one.

    I have to get to work but will address this further when I’m back.

    Thank you for your help Perry! I can’t believe you provide this help for free!

    Take it easy,

    Tim

    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

    Thread Starter timmy321

    (@timmy321)

    Perry you’re ace mate, that JS worked.. I know this is being picky, but would there also be anyway of removing the ‘no results found in this location’ message? This comes up on the homepage just before it switches over to the map page. I tried just leaving that ‘not found message’ box in the store locator blank options in dashboard but it still comes up. I wouldn’t mind this message coming up on the map page, but ideally not on the homepage just before it switches (I hope this makes sense).

    Regarding the css, thank you for your suggestion and I deactivated every single plugin (apart from your maps) I have and changed theme from Astra to the Twenty Seventeen theme.

    There was still no change to the css, so I’m led to believe that neither the Astra theme or Elementor will be the culprit here?

    Very strange! Any further knowledge gems you could throw my way? I would add that I’m definitely up for getting the pro version of this, I was just trying to see if it works first.

    Cheers Perry,

    Timmy

    Thread Starter timmy321

    (@timmy321)

    I’ll leave the site blank with just the twenty seventeen theme and WPMaps as the plugin, maybe this will help find answers?

    I eagerly await any help that can aid me to fix this πŸ™‚

    Timmy

    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

    Thread Starter timmy321

    (@timmy321)

    Perry, you are an I.T god mate πŸ™‚

    That’s worked a treat!

    1) Does something in that JS code hide the map on the homepage too? Because it’s hidden on the homepage now (winner winner chicken dinner!)

    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.

    Also, if you can’t answer this then I appreciate everything you’ve helped with. First class service!

    Kind regards,

    Timmy

    Thread Starter timmy321

    (@timmy321)

    One last question,

    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.

    I deactivated all plugins bar WPMaps again to see if an issue lay there, but it appears not.

    Is there anything that can be done so that the map is hidden as soon as the homepage loads?

    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 WordPress.org’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

    Thread Starter timmy321

    (@timmy321)

    Hi Perry,

    Again thank you for replying!

    Ah yes, I thought that was the case with premium add on’s, I certainly don’t want to break forum rules!

    I’ve contacted css hero, as I’ve purchased their plugin and they suggested using this css:

    #wpgmza_map { display:none !important; }

    However, this has not had any effect either. It’s all very confusing to the layman like myself πŸ™‚

    I feel like I’m not going to get an answer to this πŸ™

    But thank you very much for your patience, persistence and help Perry.

    Kind regards,

    Tim

    Thread Starter timmy321

    (@timmy321)

    What is frustrating is that using CSS Hero and this code,

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

    it makes the map disappear; but the markers, zoom in/out functions, toggle and wording ‘openstreetmap contributors’ remain. When right clicking on these to identify their path, their is no option to right click, just as if they don’t exist.

    Am I making sense in my description?

    Is this a thing because removing markers is a pro add on option and some code exists to prevent css from editing it?

    I don’t know if I’ve broken forum rules here asking that, but if I have I apologise!

    Many thanks

    Tim

    Thread Starter timmy321

    (@timmy321)

    I don’t know what I’ve done to my website now Perry so I think I’ll say you’ve been a massive help mate but I need time now to try and fix whatever it is I’ve done..

    I’m sure if you look at my site you’ll realise I’ve gone and messed it all up πŸ™‚

    I’ll tick this as resolved,

    Take care pal

    Timmy

    Thread Starter timmy321

    (@timmy321)

    Perry, I’ve worked on this all night and I’ve managed to make the map disappear!!

    The problem was that I input the map into a ‘button’ in elementor. Once I deleted the button and replaced it with a text box instead this meant that I could edit the css of the map (but only with elementor deactivated in wordpress). Then once I reactivated elementor, only the search boxes are visible πŸ™‚

    So now I have one last request regarding the JS, I’ve used this one:

    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();
    });
    }

    });

    which is the one you provided to fix the error message when searching (the one prior to removing the ‘no result found’ from the homepage).

    Would it be possible to write the JS so that the ‘no results found in this location, please try again’ message does not show up on the homepage when searching location (it’s fine to show up on the map page).. so, similar to the last JS provided, but without hiding the map (as that strange lag didn’t seem to occur prior to the JS trying to hide the map)?

    I think I might be your most complex case yet in this forum, no? πŸ™‚

    Big thanks again, if that JS can be written I think it’s nailed!

    Timmy

    Thread Starter timmy321

    (@timmy321)

    I think I might be using the wrong term when I say ‘lag’ too, because what it actually looks like is happening is that the site zooms in slightly on the background picture after you type in a location and press search.

    Again, I hope that makes sense.

    Kind regards

    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

Viewing 15 replies - 16 through 30 (of 31 total)
  • The topic ‘Link Store search to homepage button’ is closed to new replies.