-2

I am using https://www.npmjs.com/package/@react-google-maps/api to render googlemaps and I am trying to get the Autocomplete to work. https://react-google-maps-api-docs.netlify.app/#autocomplete

When I try to search for a location I get "This page cant load Google maps correctly". The example on their website has the same error. GoogleIsNotDefined

import React from 'react'
import { GoogleMap, LoadScript, Autocomplete  } from '@react-google-maps/api';

const api = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;

const containerStyle = {
    width: '1200px',
    height: '500px'
};

const center = {
    lat: -3.745,
    lng: -38.523
};

const Gmap = () => {

    return (
        <LoadScript
            googleMapsApiKey ={api}
            libraries={["places"]}
        >
            <GoogleMap
                mapContainerStyle={containerStyle}
                center={center}
                zoom={10}
            >
                { /* Child components, such as markers, info windows, etc. */ }
                <Autocomplete>
                    <input
                        type="text"
                        placeholder="Input"
                        style={{
                            boxSizing: `border-box`,
                            border: `1px solid transparent`,
                            width: `240px`,
                            height: `32px`,
                            padding: `0 12px`,
                            borderRadius: `3px`,
                            boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                            fontSize: `14px`,
                            outline: `none`,
                            textOverflow: `ellipses`,
                            position: "absolute",
                            left: "50%",
                            marginLeft: "-120px",
                            top: "2%"
                        }}
                    />
                </Autocomplete>
                <></>
            </GoogleMap>
        </LoadScript>
    )
}

export default React.memo(Gmap)

You need to use your own Google api key in the Codesandbox.

https://codesandbox.io/s/nice-galileo-zdn1c?file=/src/App.js

Ole Nor
  • 135
  • 8
  • 1
    Use a valid API key. – MrUpsidown Apr 15 '21 at 12:24
  • I am using a valid api key.. I removed it on CodeSandBox and here on StackOverflow because I dont wish to share it. – Ole Nor Apr 15 '21 at 12:26
  • 1
    How do you know it is valid if it doesn't work? I opened your sandbox and insert a valid API key and it works fine. Look at the JS console for details, make sure the key is valid and the appropriate APIs have been enabled in your google console. – MrUpsidown Apr 15 '21 at 12:33

1 Answers1

0

Solution(Thanks to @MrUpsidown):

As @MrUpsidown commented my API key was setup wrong. I was getting and ApiNotActivatedMapError in my console. I had to enable Places API in my project.

https://developers.google.com/maps/gmp-get-started#enable-api-sdk

Ole Nor
  • 135
  • 8