Searching Postcode + Zoom Causing “Start Location” Display

Hi there!

Many thanks for the detailed description of your issue.

However, I have been trying to replicate it with your instructions for a while and I’m just unable to do it.

Maybe you could record a small video-capture of your screen and send it over? You can also open a support ticket directly with us if you want to share more details.

Many thanks!

Hi Farroyo,

I’ve created a video which you can see here: https://watch.screencastify.com/v/O6tAyoxdXSEzHYV4kToh

The support ticket link takes me to a form that I can’t fill out because it asks for a license key – but the store locator plugin is free so not really sure what to fill in there.

I hope the video should suffice explaining what is happening. As I said, it is strange and isolated to the search being in use by the looks of things.

Cheers
Kane

Hello again,

Thanks for the thorough explanations in the video, I think I know what is going on. I’ll focus on the ML6 9AB postcode as an example.

See, this is where Google Maps understand this postcode is (see screenshot). And this is where the store named “SBC Properties” is located in your map (see screenshot).

As you can see, both the postcode marker and your store are withing meters of each other, so it makes sense to me that, when zooming in or out, you are sometimes literally clicking on the start location for that particular search, which is so close to the store itself that they almost overlap.

Here’s what you can do. You can either adjust the color of the start point in the plugin settings so it is differentiated from the store markers in the map, or you can try hiding the start point following these instructions.

Try that out and let us know if any of the above makes sense.

Regards,

Hi Farroyo,

Thanks for the reply – I see what you mean!

For whatever reason, the blue marker (start location) is not appearing at all, not sure if that is supposed to work. It is showing as transparent. The orange marker is of course showing. But I do see what you mean about the overlap.

Unfortunately the css below didn’t work (I updated the colour from red as my marker in the backend for the start location is blue (confirmed by inspecting the html in the backend):

<!-- Marker is set to blue in the backend (checked html to confirm this) -->
#wpsl-gmap img[src*="blue@2x"] {
    display: none !important;
}

<!-- Tried this as a 'hope' it works but sadly didn't -->
div[title="Start location"] {
   display:none;
}

But unfortunately that didn’t work either. It’s a shame there is no class attached to the div because I could have targeted it that way then.

From today I am on annual leave for a week so my apologies if it takes me a little while to pick this up again. But very much interested in getting a fix for this. So anything you can suggest… it’s just a shame that the element doesn’t have a unique identifier… ??

<?php 
// also didn't work - in fact just caused an error on the dev site and killed the website
add_filter( 'wpsl_js_settings', 'custom_js_settings' );

function custom_js_settings( $settings ) {

    $settings['startMarker'] = '';

    return $settings;
}
?>

Thanks,
Kane

• This reply was modified 1 year, 7 months ago by mediawaypoint.

Hi again Kane,

First of all, enjoy your holidays. When you get back, you may want to open a support ticket directly with us so we can ask you for more information about the website.

All the best,

Thanks Farroyo certainly needed a good break ??

I’ve created a ticket and then linked to this support topic for details to anyone picking it up.

Got it. I just replied your ticket ??

For anyone else struggling to remove the start location for the plugin – and who’s attempts using the suggestions Farroyo gave above failed, below is a Javascript solution that seems to be working for me.

Important note: While there was no workaround for this issue that worked for my situation, Farroyo has been awesome in troubleshooting and diagnosing the problem. Their understanding of the plugin and how it works helped me build the solution below. Thanks Farroyo!

This solution uses Google Tag Manager + Custom HTML, but I am sure you could convert it to jQuery or just insert it into your page that has the map on it.

<script>
    // Callback function to hide the element
    function hideStartLocationElement() {
        var startLocationDiv = document.querySelector('[aria-label="Start location"]');
        
        if (startLocationDiv) {
            startLocationDiv.style.display = "none";
        }
    }

    // Create a MutationObserver to watch for changes in the DOM
    var observer = new MutationObserver(function(mutationsList) {
        for (var i = 0; i < mutationsList.length; i++) {
            var mutation = mutationsList[i];
            if (mutation.type === "attributes" && mutation.attributeName === "aria-label") {
                // The aria-label attribute of some element changed
                if (mutation.target.getAttribute("aria-label") === "Start location") {
                    hideStartLocationElement();
                }
            }
        }
    });

    // Observe the entire document for changes
    observer.observe(document, { attributes: true, subtree: true });

    // Initially hide the element
    hideStartLocationElement();
</script>

Test your implementation by inspecting the icon img, then move to the parent and sitting above that should be the “start location” element. Which you can click using inspect element and see the “display:none” assigned to it, and if you remove it and then zoom it gets reapplied due to the DOM changing.

Hi again,

Many thanks for sharing your solution, and also for your kind words!! ??