34

Is there any package available on npm for google maps? Or am I really supposed to paste this

<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY">
</script>

to my index.html and download this js file on every refresh?

This is super annoying, because sometimes I get ReferenceError: google is not defined.

1
  • Also, the api key is in sudden to get revealed, isn't it? Feb 17, 2020 at 8:16

6 Answers 6

14

The official google maps package (@google/maps) is for node only. In a browser environment, you need to use an unofficial package or include the official script on your site.

To the ReferenceError problem, make sure the script tag for google maps is above the script tag for your code so that it loads first. If it isn't, your script may run before the google global variable is created.

One unofficial package is google-maps, which can be used in a browser.

7
  • 8
    is this package for Node.js only? How about for web use?
    – Henry
    May 8, 2018 at 8:33
  • 2
    @Henry It looks like for web the node packages for it are unofficial, google-maps
    – pfg
    May 8, 2018 at 13:14
  • 1
    I'm trying to use objetcs like 'google.maps.LatLng' or 'google.maps.Polygon' (which are only available in client side).. without success. Any help? Apr 10, 2019 at 21:23
  • @JustinPoehnelt web packages on npm for google maps are unofficial
    – pfg
    Oct 9, 2019 at 0:32
  • then why does this answer direct the user to use a package that WILL NOT WORK in the browser environment? Oct 17, 2019 at 23:09
9

Or am I really supposed to paste this to my index.html and download this js file on every refresh?

Yes. This is the only way to do so. There are some packages to dynamically do this for you, but the behavior is the same.

To reiterate, there is no official package for loading the Google Maps JavaScript for the web environment on NPM. The @google/maps referenced by others is for node only.

google is not defined errors can be avoided by using the callback query parameter when loading the google maps script.

Update - 2020/01/17

I wrote @googlemaps/js-api-loader to help load the script dynamically and support promises.

import { Loader } from '@googlemaps/js-api-loader';

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

loader
  .load()
  .then(() => {
    new google.maps.Map(div, mapOptions);
  })
  .catch(e => {
    // do something
  });
2
  • 2
    i think google needs be passed into the called back in the .then() method like .then(google) => {...} Jul 23, 2021 at 10:59
  • google is also defined globally so that isn't necessary, but yes it is also the resolved value Jul 26, 2021 at 15:26
2

The ReferenceError you're getting is likely because you're not calling the library the right way.

In Google's Documentation suggests that you should specify a callback (like initMap) which would be called when the API finishes loading. Anything you need to do with the Map should go within that function so that you ensure the API is loaded and google is already defined.

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
2

I came across same problem when I was working with React + TypeScript. Firstly I installed Google Maps SDK with this line;

npm install @google/maps

But TypeScript compiler gave an error, also offered me this line to install;

npm install @types/google__maps

and then it worked.

import { createClient } from "@google/maps"

const googleMaps = createClient({
  key: "YOUR_API_KEY"
})
0

Yes there are a few packages out there. You can try this one out.

npm - google maps

1
  • 3
    I'm pretty sure this is not official package
    – feerlay
    Oct 23, 2017 at 18:53
0

The official documentation refers to this google npm package: https://www.npmjs.com/package/@googlemaps/js-api-loader

Official documentation: https://developers.google.com/maps/documentation/javascript/overview#js_api_loader_package

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.