I am trying to create a component which is a visualization of a map of google maps
This is without using the google-map-react library since I want to make my own component
import React from 'react'
import { Helmet } from 'react-helmet';
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
export default function GoogleMap() {
return (
<>
<Helmet>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap">
</script>
</Helmet>
<div id="map"></div>
</>
)
}
This is the code I am using, but for some reason it is not painting anything and I get corset request errors, honestly I am lost in this, could someone help me? at least to know what my mistake is
Access to fetch at
'https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap'
from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
this is the error message i get and this is where i wonder.
Do I need to make a request with fetch instead of directly using the script?
question from:
https://stackoverflow.com/questions/66053056/how-can-i-visualize-the-map-of-google-maps-in-react 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…