Next.js Discord

Discord Forum

Cors issue when accessing google places API

Unanswered
Rock Dove posted this in #help-forum
Open in Discord
Rock DoveOP
I've recently encountered a CORS issue while using the Google Maps API in my Next.js application. Everything was working fine until two days ago when this problem surfaced. I'm unsure what might have triggered it or how to resolve it.

I'm utilizing the Google Maps API to render maps within my Next.js application. However, when attempting to make requests to the API, I receive a CORS error. Here's the specific error message:

Im using this @react-google-maps/api react libraray

6 Replies

Arinji
dont fetch it client side @Rock Dove
fetch it from a server component, or else CORS issues will arise
@Arinji fetch it from a server component, or else CORS issues will arise
Rock DoveOP
how can we manage the client interactions on the map
@Arinji dont fetch it client side <@886074025938419723>
Rock DoveOP
why this cannot convert to server componenet

import { GoogleMap, Marker } from '@react-google-maps/api';

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

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

function MyComponent() {
  return (
    <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10}>
      <>
        <Marker position={{ lat: -3.745, lng: -38.523 }} />
      </>
    </GoogleMap>
  );
}

export default MyComponent;