Maps Button not redirecting on both mobile and desktop

Ask the community
, ,
1

I am not able to get redirected when using lightbox with google maps and apple maps. Can someone help. I have included the lightbox code below. Also how can i make the text look even. Below is the code that I am using.
Regards,
Robin

import wixWindow from ‘wix-window’;

$w.onReady(function () {
const address = “2828 1st Ave, Huntington WV 25702”;
const encodedAddress = encodeURIComponent(address);

const googleMapsUrl = `https://www.google.com/maps?daddr=${encodedAddress}`;
const appleMapsUrl = `https://maps.apple.com/?daddr=${encodedAddress}`;

// Safe hide on load
if ($w("#redirectingText")?.hide) $w("#redirectingText").hide();
if ($w("#spinnerIcon")?.hide) $w("#spinnerIcon").hide();

if ($w("#googleMapsBtn")?.show) $w("#googleMapsBtn").show();
if ($w("#appleMapsBtn")?.show) $w("#appleMapsBtn").show();

$w("#googleMapsBtn").onClick(() => {
    redirectWithAnimation(googleMapsUrl);
});

$w("#appleMapsBtn").onClick(() => {
    redirectWithAnimation(appleMapsUrl);
});

function redirectWithAnimation(mapUrl) {
    if ($w("#googleMapsBtn")?.hide) $w("#googleMapsBtn").hide();
    if ($w("#appleMapsBtn")?.hide) $w("#appleMapsBtn").hide();
    if ($w("#mapsTitleText")?.hide) $w("#mapsTitleText").hide();
    if ($w("#redirectingText")?.show) $w("#redirectingText").show();
    if ($w("#spinnerIcon")?.show) $w("#spinnerIcon").show();

    setTimeout(() => {
        const newTab = window.open(mapUrl, "_blank");

        // Fallback if browser blocks popup
        if (!newTab || newTab.closed || typeof newTab.closed === 'undefined') {
            const fallbackLink = document.createElement('a');
            fallbackLink.href = mapUrl;
            fallbackLink.target = "_blank";
            fallbackLink.rel = "noopener noreferrer";
            fallbackLink.click();
        }

        wixWindow.lightbox.close();
    }, 700);
}

});

image
image2168×1172 115 KB

3

will you post it again please.

4

Hi, @robin_arora !!

I suspect the issue might be due to the use of window.open() . Wix restricts some native JavaScript functionality, and the “window” object may be among those limitations depending on the environment. If you check the browser’s developer console, you might see an error along the lines of “window is not defined.” :innocent:

Sorry, I was double-checking the facts myself just to be sure.

5

Do I check the browser developer console of the lightbox or the main contact us page

6

I think you should check the developer console of the original page where you’re trying to perform the redirect. :innocent:

For now, I think the reason you can’t open a new tab is that the window object is not available in the Wix environment. :melting_face:

If opening a new tab isn’t necessary, you might want to try using this instead. It could allow you to open an external site within a modal window on the same tab. I haven’t used it recently, so I’m not sure how well it works now. :upside_down_face:

How to use:

import wixWindowFrontend from "wix-window-frontend";

// ...

wixWindowFrontend.openModal("https://en.wikipedia.org/wiki/Wix.com", {
  width: 750,
  height: 500,
});

Also, in many browsers, opening an external page in a new tab generally requires some kind of user action (like a click), so triggering it based on a timer or automatic code execution might not work. I’ve heard that it’s possible to open an external page via code using window.open() inside a custom element in Wix, where such restrictions don’t apply. However, considering the browser’s limitation regarding user interaction, you’ll likely still need the user to click something like a button to make it work. In that case, using a built-in Wix button with a link set to open in a new tab might end up being the same in practice. So if your goal is simply to open a new tab, configuring a Wix button with the appropriate web address and enabling the “open in new tab” option is probably the easiest and most reliable approach. :innocent:

1 Like