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;

Answer

The map from the screenshot you want to achieve is using Maps Embed API while the “react-google-maps” library in your code is using Maps JavaScript API. These APIs are different and if you want to achieve the one from your screenshot in Reactjs, you can put the directly inside the div that you want to display. You can generate the iframe of your place you can check this link. Just search for your place and it will generate the iframe. Please note that there’s a key parameter in the iframe link. This means that you need to put an API key in your request.

Here is a sample code and code snippet below:

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      <h1>MAPS!</h1>
      <p>Please see map below</p>
      <iframe
        width="600"
        height="450"
        style={{ border: 0 }}
        loading="lazy"
        allowfullscreen
        src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ92pXbcOV6IkRuasOtcOeKEY&key=YOUR_API_KEY"
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));