How to embed Google Maps

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

3. Choose 'embed a map'

4. Copy its HTML

↓
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 }

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

That's it.
Does this work for you?

Welcome any comment and feedback.
Happy coding:)

Comments

[Hardik Chopra]

Will try it for sure 🤘