Have you ever wanted to share a location via a clickable map link on your website? You might be surprised to learn how simple it is to pass an address as a string to Google Maps and generate a clickable link. This tutorial will guide you through a straightforward implementation of this feature using HTML and a bit of JavaScript.

How to Implement Clickable Map Links

In this tutorial, we'll create a simple HTML block that generates a clickable link, directing users to Google Maps with the provided address. This can be particularly useful for event pages, business locations, or any scenario where you want to guide users to a specific place.

Step-by-Step Guide

HTML Structure

First, we'll create the HTML structure. We'll use a <div> to hold our content, and within it, we'll place another <div> for the address link.

<div class="w-full bg-green-600 text-white p-5 rounded-lg sm:flex justify-between items-center">
    <div>
        <div class="text-xl my-2">How to Reach?</div>
        <div class="opacity-80">Learn about venue</div>
    </div>
    <div>
        <a class="bg-white text-green-800 px-5 py-2 mt-5 block text-center"
            :href="'https://www.google.com/maps?q=' + address"
            target="_blank" title="some title">Click Here
            <span class="relative inline-block h-3 w-3 ml-2">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full top-1 bg-green-700 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-3 w-3 bg-green-700"></span>
            </span>
        </a>
    </div>
</div>

Styling with CSS

We have included some CSS classes to style the link and make it visually appealing. The classes such as w-full, bg-green-600, text-white, etc., are utility classes typically used in frameworks like Tailwind CSS.

• w-full: Full width
• bg-green-600: Green background color
• text-white: White text color
• p-5: Padding
• rounded-lg: Rounded corners
• sm:flex: Flexbox for small screens
• justify-between: Space between items
• items-center: Center items vertically

JavaScript for Dynamic Address

We'll use a simple JavaScript snippet to dynamically insert the address into the URL. This is done by concatenating the base Google Maps URL with the address string.

<script>
    const address = "1600 Amphitheatre Parkway, Mountain View, CA";
    document.querySelector('a').href = 'https://www.google.com/maps?q=' + encodeURIComponent(address);
</script>

1. Base URL: 'https://www.google.com/maps?q=' is the base URL for Google Maps search queries.
2. Dynamic Address: We concatenate this base URL with the address string (events.data[0].attributes.address in the original code, replaced with a static address for simplicity in this example).
3. HTML & CSS: The HTML structure and CSS classes ensure that the link is styled appropriately and functions as a clickable button.

By following these steps, you can easily create clickable map links on your website. This method leverages Google Maps' ability to take a query string and show the location on the map, making it extremely user-friendly.

This article is intended to help developers understand and implement a basic but highly useful feature for any website that needs to provide location directions. If you have any questions or need further assistance, feel free to reach me at hi@sarabpreet.dev.