Using Javascript with Google Maps

Hi everyone,

First of all, it is very exciting to be part of this!
I’m playing with the OpenAI API and I asked it to create a simple Google Maps page as follows: “Display a simple Google Maps centered around São Paulo.”

Surprisingly it typed in the code I was expecting, however I see an error in the console that says:

sandbox.html:1 Uncaught ReferenceError: google is not defined
    at eval (eval at <anonymous> (sandbox.js:4), <anonymous>:1:11)
    at eval (<anonymous>)
    at sandbox.js:4

Part of the code is apparently importing it like this:

/* Import the Google Maps javascript libraries first */
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=

So I was expecting it to successfully load the library at least and then fail to display the map because no key has been provided.

Any ideas on how I can successfully make it work?

Thanks in advance!

The error is probably due to trying to use the api without loading the script or it didn’t append script to body. (or both)
Is there any missing code from below?

document.body.appendChild(script);

 script.onload = () => {
      //rest of code should be here
    };
3 Likes

Correct. It seems that it is trying to reference google.maps.* classes before the script finishes loading. I will make some tests to see if I can make it understand that it should wait for the script to be loaded.

2 Likes