How to embed an exact place on google maps in Reactjs

I am redoing my website with Reactjs. I’m trying to embed an exact google place with reviews on the map so it would look like this (My website written with wordpress)

So far I could only display a pin with exact coordinates, and it would look like this

Is there a way to embed an exact place on the maps as the reviews are very important to be visible for my customers?

If I would copy the link with the embedded place like this
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12063.71295670172!2d-72.388377!3d40.895389!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x46289ec3b50eabb9!2sMove%20Plus!5e0!3m2!1sen!2sus!4v1613186587593!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> into my function, the website would crash.

Here’s my google maps component :

import React from "react";

import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from "react-google-maps";

const MapWrapper = withScriptjs(
  withGoogleMap((props) => (
    <GoogleMap
      defaultZoom={13}
      defaultCenter={{ lat: 40.895436, lng: -72.388484 }}
    > 
      <Marker position={{ lat: 40.895436, lng: -72.388484 }} /> 
    </GoogleMap>
  ))
);

function MyMap() {

  return (
    <>
            <MapWrapper
              googleMapURL="https://maps.googleapis.com/maps/api/myAPIHere"
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `100%` }} />}
              mapElement={<div style={{ height: `100%` }} />}
            />
    </>
  );
}

export default MyMap;

27 thoughts on “How to embed an exact place on google maps in Reactjs”

Leave a Comment