OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

'google' is not defined Using Google Maps JavaScript API Loader

  • Thread starter Thread starter Goodman L
  • Start date Start date
G

Goodman L

Guest
I have a Vue CLI project that uses the Google Maps JavaScript API Loader. I import the loader using the code below:

Code:
import { Loader } from "@googlemaps/js-api-loader";

After that, I defined the loader, like so:

Code:
const loader = new Loader({
  apiKey: "XXXXX",
  version: "weekly",
  libraries: ["places"]
});

Now, when I try to display a map using the google.maps.Map object, I get an error stating that 'google' is not defined. All the code above is in the project's 'main.js' file in the 'src' directory and the code below is the last bit that, unfortunately, triggers the error.

Code:
loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

What am I doing wrong?

P.S. I installed @googlemaps/js-api-loader using npm, as per instructions from the Google documentation.

<p>I have a Vue CLI project that uses the Google Maps JavaScript API Loader. I import the loader using the code below:</p>
<pre><code>import { Loader } from "@googlemaps/js-api-loader";
</code></pre>
<p>After that, I defined the loader, like so:</p>
<pre><code>const loader = new Loader({
apiKey: "XXXXX",
version: "weekly",
libraries: ["places"]
});
</code></pre>
<p>Now, when I try to display a map using the google.maps.Map object, I get an error stating that 'google' is not defined. All the code above is in the project's 'main.js' file in the 'src' directory and the code below is the last bit that, unfortunately, triggers the error.</p>
<pre><code>loader.load().then(() => {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
});
</code></pre>
<p>What am I doing wrong?</p>
<p>P.S. I installed <em>@googlemaps/js-api-loader</em> using npm, as per instructions from the Google documentation.</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top