CODEWITHSUNDEEP
google-mapsvercelreact-google-maps-api
zorz
zorz

Reputation: 21

InvalidKey (google maps api ) in deployment

I have used from @react-google-maps/api. Everything was working on my localhost, but now when I deployed it on Vercel I get an error that my key is invalid. I have already put the key in Environment Variable.

Exact error in console: Google Maps JavaScript API error: InvalidKeyMapError

enter image description here

I return this in my maps component file.

   <div className="h-screen flex-col " >
       <LoadScript googleMapsApiKey = {process.env.NEXT_PUBLIC_GOOGLE_MAPS_ID} 
           libraries={["places"]}>
        <Places 
          setOffice = { (position) => {
          setOffice(position);
          console.log(setOffice)
          mapRef.current?.panTo(position);
        }} />            
        <GoogleMap 
          zoom={13} 
          center = {mapCenter}
          mapContainerClassName=" mapContainer "
          options={options}
          onLoad={onLoad}
          
        >  
        {attractions?.docs.map((attraction) => (
          
          <InfoWindow
            position={attraction.data().location}
            key={attraction.id} // Add a unique key prop for each item in the loop
          >
            <div >
             <NewChat title={attraction.data().title} /> 
            </div>
          </InfoWindow>
        ))}
        </GoogleMap>
      </LoadScript>
    </div>

Interestingly enough in order to make maps work on localhost I had to add"" at the beginning and end of the API key in my env file.

for example

NEXT_PUBLIC_GOOGLE_MAPS_ID="A.....z"

I tried the same approach in Environment Variable. I have made the key unrestricted in order to prevent those errors of not providing a safe URL...

Upvotes: 0

Views: 624

Answers (1)

zorz
zorz

Reputation: 21

Okay so I don't know why or how but I put apiKey in const mapKey and then used it instead of process.env.NEXT_PUBLIC_GOOGLE_MAPS_ID, I deleted "" in env. NEXT_PUBLIC_GOOGLE_MAPS_ID and it started working. if that is the cause or something else, I have no idea at this point..

Upvotes: 0

Related Questions