title: How can I visualize the map of Google Maps in React?
body: <p>I am trying to create a component which is a visualization of a map of Google Maps.
  This is without using the <code>google-map-react</code> library since I want to make my own component</p>
  <pre><code>import React from 'react'
  import { Helmet } from 'react-helmet';
  let map;
  function initMap() {
    map = new google.maps.Map(document.getElementById(&quot;map&quot;), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  }
  export default function GoogleMap() {
      return (
          &lt;&gt;
              &lt;Helmet&gt;
                  &lt;script defer
                      src=&quot;https://maps.googleapis.com/maps/api/js?key=MYKEY&amp;callback=initMap&quot;&gt;
                  &lt;/script&gt;
              &lt;/Helmet&gt;
              &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>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</p>
  <blockquote>
  <p>Access to fetch at
  'https://maps.googleapis.com/maps/api/js?key=mykey&amp;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.</p>
  </blockquote>
  <p>Do I need to make a request with fetch instead of directly using the script?</p>