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.

Gagman

Also, the api key is in sudden to get revealed, isn't it? – Waldo

Answer 1

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

Wotton

i think google needs be passed into the called back in the .then() method like .then(google) => {...} – Oxley

google is also defined globally so that isn't necessary, but yes it is also the resolved value – Wotton

Answer 2

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.

Bridgettbridgette

is this package for Node.js only? How about for web use? – Patrilocal

@Patrilocal It looks like for web the node packages for it are unofficial, google-maps – Bridgettbridgette

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? – Packer

@JustinPoehnelt web packages on npm for google maps are unofficial – Bridgettbridgette

then why does this answer direct the user to use a package that WILL NOT WORK in the browser environment? – Wotton

@JustinPoehnelt I've edited my answer so it actually answers the question that was asked – Bridgettbridgette

Note that the NodeJs package @google/maps is now googlemaps/google-maps-services-js – Erubescent

Answer 3

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>

Agger

Answer 4

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

Brunhild

Answer 5

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

npm - google maps

Thracophrygian

I'm pretty sure this is not official package – Gagman

Answer 6

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

Mirianmirielle