How to install google maps through npm?

Question

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.

Also, the api key is in sudden to get revealed, isn't it? – Raz Buchnik Feb 17 '20 at 08:16 — Raz Buchnik, Feb 17 '20 at 08:16

pfg · Answer 1 · 2019-10-17T23:20:59.027

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.

edited Oct 17 '19 at 23:20

answered Oct 23 '17 at 18:49

pfg

2,348
1
16
37

8

is this package for Node.js only? How about for web use? – Henry May 08 '18 at 08:33
2

@Henry It looks like [for web the node packages for it are unofficial](https://github.com/googlemaps/google-maps-services-js/issues/59), [google-maps](https://www.npmjs.com/package/google-maps) – pfg May 08 '18 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? – Daniel Carpio Contreras Apr 10 '19 at 21:23
@JustinPoehnelt web packages on npm for google maps are unofficial – pfg Oct 09 '19 at 00:32
then why does this answer direct the user to use a package that WILL NOT WORK in the browser environment? – Justin Poehnelt Oct 17 '19 at 23:09
@JustinPoehnelt I've edited my answer so it actually answers the question that was asked – pfg Oct 17 '19 at 23:22
Note that the NodeJs package `@google/maps` is now [googlemaps/google-maps-services-js](https://github.com/googlemaps/google-maps-services-js) – jimbotron Mar 24 '23 at 02:01

Justin Poehnelt · Accepted Answer · 2021-05-21T15:17:24.407

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
  });

i think google needs be passed into the called back in the .then() method like ```.then(google) => {...}``` — Embedded_Mugs, Jul 23 '21 at 10:59
`google` is also defined globally so that isn't necessary, but yes it is also the resolved value — Justin Poehnelt, Jul 26 '21 at 15:26

score 2 · Answer 3 · answered Oct 26 '17 at 21:31

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>

score 2 · Answer 4 · answered Aug 28 '19 at 21:34

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"
})

score 0 · Answer 5 · answered Oct 23 '17 at 18:48

0

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

npm - google maps

answered Oct 23 '17 at 18:48

SomeRandomGuy

72
5

3

I'm pretty sure this is not official package – feerlay Oct 23 '17 at 18:53

score 0 · Answer 6 · answered May 18 '22 at 14:03

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

answered May 18 '22 at 14:03

kimomat

2,211
23
37

How to install google maps through npm?

6 Answers6

Linked