Login to Google developer console, create app then get API keys. You need to enable maps service by providing Credit card before using it.
npm i google-map-react
// config.js
export const GOOGLE_MAPS_KEY = "xxx-xxx";
// components/cards/MapCard.js
import GoogleMapReact from "google-map-react";
import { GOOGLE_MAPS_KEY } from "../../config";
export default function MapCard({ ad }) {
const defaultProps = {
center: {
// lat: -33.865143,
// lng: 151.2099,
lat: ad?.location?.coordinates[1],
lng: ad?.location?.coordinates[0],
},
zoom: 11,
};
if (ad?.location?.coordinates?.length) {
return (
// Important! Always set the container height explicitly
<div style={{ width: "100%", height: "350px" }}>
<GoogleMapReact
bootstrapURLKeys={{ key: GOOGLE_MAPS_KEY }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
>
<div
lat={ad?.location?.coordinates[1]}
lng={ad?.location?.coordinates[0]}
>
<span className="lead">📍</span>
</div>
</GoogleMapReact>
</div>
);
}
}
Now import and use in AdView
// AdView.js
<div className="row mt-2">
<div className="col-md-7">
<MapCard ad={ad} />
</div>
<div className="col-md-5">Contact form</div>
</div>