DEV Community

loading...
Cover image for How to embed Google Maps

How to embed Google Maps

takuzen profile image Takuzen ・1 min read

When I try to embed a map to show the access information to certain point, there're sooo many articles to explain the way to do it.

After taking one day to research the best practice and successfully did it, I found 99% of the articles addressing it too complex.

I want to make it super simple here(in just 6 STEPS).

But be careful, my solution only works as long as you can search and find your destination in Google Maps.

Okay, then let's begin.

1. Search and find your point in Google Maps
2. Tap share button
Alt Text
3. Choose 'embed a map'
Alt Text
4. Copy its HTML
Alt Text

Go to your favorite code editor

5.Declare a object for the map

const AddressMap = () => {
  return (
    <div className="google-map-code">
      [the HTML you just copied]
    </div>
  )
}

export { AddressMap }
Enter fullscreen mode Exit fullscreen mode

6. Insert it to your JSX code
<AddressMap />

That's it.
Does this work for you?

Welcome any comment and feedback.
Happy coding:)

Discussion (1)

pic
Editor guide
Collapse
hardikchopra242 profile image
Hardik Chopra

Will try it for sure 🤘