<p>I am trying to implement the Google Maps API and have been following the official Demo. </p> <p>I copied the code and made just one change: </p> <pre class="brush:php;toolbar:false;">// Raises an error: Access to script at 'file:///D:/Desktop/Stuff/map-test/test.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted. <script type="module" src="./index.js"></script> // Changed to this <script src="./index.js"></script></pre> <p>As a result, I receive the following error: </p> <pre class="brush:php;toolbar:false;">ReferenceError: google is not defined at initMap</pre> <p>I'm guessing this is due to removing <code>type="module"</code> from the script? How do most people implement it since it seems like you need to host the module yourself in order to import it for this? </p> <p>I've changed the code to the following, but this throws a warning. </p> <pre class="brush:php;toolbar:false;"><script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key= API_KEY"></script> // Warning: Google Maps JavaScript API has been loaded directly without a callback. This is not supported and can lead to race conditions and suboptimal performance. For supported loading patterns please see https://goo.gle/js-api-loading< /pre> <p>Thank you! </p> <p>Editor:</p> <p>I read the previous answers about using an HTTP server to host files, and I misunderstood what they meant by hosting JS files. Instead, you should host the HTML file locally for testing purposes rather than opening the HTML file directly (i.e. double-clicking it in File Explorer). </p> <p>So use python3:</p> <pre class="brush:php;toolbar:false;"># in the directory that contains index.html: python3 -m http.server 8080</pre> <p>Visiting http://localhost:8080/index.html works for me. Thanks! </p>

# in the directory that contains index.html:
python3 -m http.server 8080