Trigger click on marker on page load

  • Resolved MWM

    (@mike235)


    9 months, 1 week ago

    Hi, how can i trigger a click envent on a map marker right after the page is loaded?

    I have a map with markers on countries which open a popin. I’d like to have one of the countrie’s popin open by default, ideally by passing the country name in the URL.

    This is the code I have so far, but the click event doesn’t open the popin.

    let mapContainer = document.getElementById('map_15822');
mapContainer.addEventListener('mapready', function(ev) {
  const urlParams = new URLSearchParams(window.location.search);
  const country = urlParams.get('country');
  if (country) {
    let groups = document.querySelectorAll('.imapsSprite-group');
    for(let i = 0; i < groups.length; i++) {
      let tspan = groups[i].querySelector('tspan');
      if (tspan && tspan.textContent === country) {
        console.log('clicking on', tspan.textContent);
        groups[i].dispatchEvent(new MouseEvent('click', { bubbles: true }));
        break;
      }
    }
  }
});

    Thanks ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author interactivegeomaps

    (@interactivegeomaps)

    Hello,

    Thank you for reaching out, this inquiry is out of scope and a custom function. We would not be able to provide assistance for this query.

    Best Regards.

    I’d also like to ask about this. Not asking how to do it, but if it is technically possible. I haven’t purchased Pro yet because I need this type of functionality. Is it possible with Pro? Thanks!

    Plugin Author interactivegeomaps

    (@interactivegeomaps)

    Although the map can’t automatically connect to other elements on the page, we can create custom code to trigger events outside the map. In this case we’ll explain how to trigger a click on a button created with Elementor when a region or marker is clicked. This could be used, for example, to open an Elementor Popup, that gets triggered by the button.

    When creating your button, the important thing is that it contains a unique ID, like the screenshot shows.

    [Pro] Triggering a click in an Elementor Button

    Your button can do whatever you need it to do. A common use case is that the button will open a Popup created by Elementor. You need to setup your button accordingly. You can also hide the button if needed, but it needs to exist on the page and have a unique ID, so we can identify it when the time to trigger the click comes.

    This button needs to exist on the same page of your map.

    Once you have your button or buttons created, you can edit your map. You’ll need to place the button ID in the ‘Action Content’ field of your region or marker, with the following format:a#myUSbutton

    OR#myUSbutton

    Like in this screenshot below:

    [Pro] Triggering a click in an Elementor Button

    If you have other buttons for different markers or regions, you should do the same for the others.

    The second step will be to set the click action to ‘Custom’ so we can add our custom code:

    [Pro] Triggering a click in an Elementor Button

    The code to be used is the following://we set a timeout just in case
    setTimeout(function(){
    let selector = data.content;
    let link = document.querySelector(selector);
    link.click();
    },350);

    Now when you add this map to the same page of the button, when the region or marker is clicked, it should trigger a click event also in that button, triggering the event associated with that button.

    I very much appreciate your detailed reply! However, this isn’t exactly what I’m looking to do.

    I have a map with pins for my client’s locations. When the user clicks on a pin, there will be a pop-up or some kind of info that populates and tells the user about the city. What I need is for the main city (my client’s headquarters) to already be “awake” when the Home page loads. And then when other pins are clicked it goes away so that the other city info pops up. Is this possible?

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.