CORS 错误使用@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}