Convert address to a link like the "tel:" attr of Anchor tag in HTML for mobile numbers

46 views Asked by At

How do I add an address and make it clickable, which would be redirected to google maps. Something similar to the below code:

<a href="tel:+123456789">+123456789</a>

but for addresses.

A person should be able to click on the address and get the location on google maps. It would be better if I could do it dynamically.

1

There are 1 answers

0
Shawn On

Try this for clickable address for redirect google maps:

<!DOCTYPE html>
<html>
<head>
    <title>Clickable Address Link to Google Maps</title>
</head>
<body>
    <p>Click on the address to view it on Google Maps:</p>
    <a id="addressLink" href="#" target="_blank">Loading Address...</a>

    <script>
        // Replace this value with the actual address
        const address = "United Kingdom";

        const addressLink = document.getElementById("addressLink");
        addressLink.textContent = address;
        addressLink.href = `https://www.google.com/maps/search/${encodeURIComponent(address)}`;
    </script>
</body>
</html>