How to install google maps through npm?

Question

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

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

into my index.html and load this js file with every update?

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

Answer 1

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

If you encounter a ReferenceError problem, make sure the script tag for Google maps is above the script tag for your code so that it loads first. If this is not the case, your script may be run before the creation of the global Google variable.

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

Answer 2

ReferenceError that you get is probably because you are calling the library incorrectly.

The Google Documentation suggests that you must specify a callback (e.g., initMap ) that will be called when the API finishes loading. All you need to do with Map must go within this function, so that you guarantee the loading of the API and google already defined.

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

Answer 3

Yes, there are several packages. You can try this.

npm - google maps

Answer 4

I ran into the same problem when working with React + TypeScript. First I installed the Google Maps SDK with this line;

 npm install @google/maps 

But the TypeScript compiler threw an error, also suggested I set this line;

 npm install @types/google__maps 

and then it worked.

 import { createClient } from "@google/maps" const googleMaps = createClient({ key: "YOUR_API_KEY" }) 

Answer 5

Or should I really paste this into my index.html and load this js file with every update?

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

Recall that there is no official package for downloading Google Maps JavaScript for the NPM web environment. @google/maps , referenced by others, is for the node only.

Answer 6

I think the google-map-api loader will do the job

https://www.npmjs.com/package/google-maps-api-loader