Error: You must include a `google` prop when using 'google-maps-react' in React App

Question

I am putting together a small react application that uses Google Maps within the page. I have installed google-maps-react dependancy. The google maps are included within a component called DetailPlaqueCard. See below.

import React, { useEffect, useState, useRef } from 'react';
import {Link} from 'react-router-dom';
import GoogleMapReact from 'google-maps-react';

function DetailPlaqueCard({match}){
const mapRef = useRef();
useEffect(() =>{
    fetchItem();
    console.log(match)
    // eslint-disable-next-line 
},[])
const [item, setItem] = useState([]);


const mapStyles = {
    width: '25%',
    height: '25%'
  };

const fetchItem = async()=>{
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/'
    // targetUrl = 'https://s3.eu-west-2.amazonaws.com/openplaques/open-plaques-london-2019-03-13.json'
    const fetchItem = await fetch(proxyUrl + `http://openplaques.org/plaques/${match.params.id}.json`)
    const item = await fetchItem.json();
    setItem(item);
    console.log(item)
}



return (
    
    <div>
        <Link to="/">
        <button>
        <i class="fas fa-arrow-left"></i>Back
        </button>
        </Link>
        <h1>Here is the detailed page</h1>
        <h2>The inscription:{item.inscription}</h2>
        <p>Address: {item.address}</p>
        <GoogleMapReact
            bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_KEY }}
            defaultCenter={{lat: item.latitude, lng: item.latitude}}
            defaultZoom={15}
            google={this.props.google}
            style={mapStyles}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({map}) => {
                mapRef.current = map;
            }}
        />
    </div>
   )
  }

  export default DetailPlaqueCard;

I am unsure why I am getting this error. I have looked at the documentation and included the properties it needs. Is there something I am missing?

Answer 1

Install 'google-map-react' instead of 'google-maps-react'. I was too trying to figure out what was causing this and in the end it was a pretty silly mistake. I hope it fixes the problem.