CORS error working with @react-google-maps/api

Question

I'm running into a CORS error with the onClick function setting. I'm just setting up static markers (markers there on page load and not dynamically added). I've got them rendering fine but when I actually click the markers I get a CORS error that points to the setSelected line. any idea why?

import React from 'react';
import styled from 'styled-components';
import { GoogleMap, useLoadScript, Marker, InfoWindow } from '@react-google-maps/api';
import mapStyles from "./mapStyles";


const libraries = ["places"];
const mapContainerStyle = {
    width: "100vw",
    height: "70vh"
    
};
const center = {
    lat: 44.962950,
    lng: -93.182013
};
const styles = {
    styles: mapStyles,
    disableDefaultUI: true,
    zoomControl: true,
};
const storeOne = {
    lat:44.970304,
    lng:-93.182184,
}
const storeTwo = {
    lat: 44.957346,
    lng: -93.322546,
}

const onLoad = marker => {
    console.log('marker: ', marker)
  }




const Styled = styled.div` {

    #locationTitle {
        font-family: Dosis;
        text-align: center;
        margin-top: 5%;
        padding-bottom: 50px;
        margin-top: 20px;
    }


}
`;

export default function Locations() {


    const {isLoaded, loadError} = useLoadScript({
        googleMapsApiKey: process.env.REACT_APP_GOOGLE_KEY,
        libraries,
    })

    const [selected, setSelected] = React.useState(null);
    const [marker, setMarkers] = React.useState([]);
    const mapRef = React.useRef();
    const onMapLoad = React.useCallback((map) => {
        mapRef.current = map;
    }, [])


    if (loadError) return "Error loading maps";
    if (!isLoaded) return "Loading Maps"

    



    return (
        <div>

            <Styled>

                <h2 id="locationTitle">Our Locations</h2>

            </Styled>
            <GoogleMap id="map"

                    mapContainerStyle={mapContainerStyle}
                    zoom={12} 
                    center={center}
                    options={styles}

            >

            <Marker 
                onLoad={onMapLoad}
                position={storeOne}
                onClick={() => {
                    setSelected(marker);

                }}
            />
            <Marker 
                onLoad={onMapLoad}
                position={storeTwo}
            />

            {selected ? (
                    <InfoWindow anchor={{lat:44.970304, lng:-93.182184}}>
                            <div>
                                <h2>St. Paul</h2>
                            </div>
                        </InfoWindow>
                        ) : null}

            </GoogleMap>
           


        </div>
    )
};

Here is an image of the error with my console

cors issue

Answer 1

It looks like the anchor property expects a MVCObject type value according to the library's documentation, but you're passing it a LatLngLiteral. Use position instead of anchor.

{selected ? (
  <InfoWindow position={{ lat: 44.970304, lng: -93.182184 }}>
    <div>
      <h2>St. Paul</h2>
    </div>
  </InfoWindow>
) : null}