How to Create a Custom Google Maps Component in Framer

Framer provides Google Maps integration, which requires the use of longitude and latitude coordinates.

However, this may not always be the most accurate or efficient solution.
Fortunately, there is a better way to embed Google Maps in Framer using the embed link.

This article will guide you through the process of creating a custom Google Maps in Framer using the embed link.

Let’s dive in!

Understanding the Embed Link

The embed link for Google Maps provides a convenient way to embed a map on your website or application without the need for handling longitude and latitude coordinates manually.

It contains the necessary information to display the map, including the location, zoom level, and additional parameters.

To create an embed link for a specific location on Google Maps, follow these steps:

1. Navigate to the desired location on Google Maps.

2. Click on the “Share” option.

   

   
   

3. A dialog box will appear with two tabs: “Send a link” and “Embed a map.” Make sure the “Embed a map” tab is selected.

   

   
   

4. Copy the generated embed link by clicking on the “Copy HTML” button.

   

   
   

5. The copied link can now be used to embed the map in your Framer project by pasting it into the provided code snippet.

By following these steps, you can easily generate the embed link for a specific location on Google Maps and use it to embed the map in your Framer project.

This approach eliminates the need for manual handling of longitude and latitude coordinates, making the process more efficient and accurate.

Creating a Custom Google Maps Component in Framer

To create a custom Google Maps in your Framer project, follow these steps:

1. Create a new project in Framer.

2. In the left menu, click on “Assets” to access the asset panel.

   

   
   

3. At the bottom of the asset panel, select the ‘Code’ tab and click on the ‘+’ button to create a new code file.

   

   
   

4. Copy the code provided below and paste it into the code file:

import * as React from "react"
import { addPropertyControls, ControlType, motion } from "framer"
import {
    containerStyles,
    useRadius,
    borderRadiusControl,
} from "https://framer.com/m/framer/default-utils.js@^0.45.0"

/**
 * GOOGLE MAPS
 *
 * @framerIntrinsicWidth 600
 * @framerIntrinsicHeight 400
 *
 * @framerSupportedLayoutWidth fixed
 * @framerSupportedLayoutHeight fixed
 */
export default function GoogleMaps({ iframeCode, style, ...props }) {
    const borderRadius = useRadius(props)

    // Extract the URL from the iframe code
    const regex = /src="(.*?)"/
    const match = regex.exec(iframeCode)
    const embedUrl = match && match[1] ? match[1] : ""

    return (
        <motion.div
            style={{
                ...style,
                ...containerStyles,
                overflow: "hidden",
                borderRadius,
            }}
            {...props}
        >
            <iframe
                style={{
                    height: "100%",
                    width: "100%",
                    border: 0,
                }}
                src={embedUrl}
            />
        </motion.div>
    )
}

addPropertyControls(GoogleMaps, {
    iframeCode: {
        type: ControlType.String,
        title: "Iframe Code",
        defaultValue:
            '<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>',
        description: "Enter the Google Maps iframe code",
    },

    ...borderRadiusControl,
})

Don’t forget to save the code file.

By following these steps, you have created a custom Google Maps component in Framer.

This component utilizes the provided code to embed the Google Maps iframe within your Framer project.

It allows you to customize the appearance and behavior of the map using Framer’s controls and properties.

To use the custom Google Maps component in your project, simply add an instance of the component to your canvas and provide the necessary iframe code.

You can obtain the iframe code by following the steps explained earlier in this article.

Now you can enjoy the flexibility and interactivity of a custom Google Maps integration in your Framer project.

If you encounter any challenges or need further assistance while implementing this custom Google Maps Component, please don’t hesitate to reach out to me. I would be more than happy to help you customize the solution to fit your specific needs.