web-dev-qa-db-fra.com

Comment installer google maps via npm?

Existe-t-il un package disponible sur npm pour google maps? Ou suis-je vraiment censé coller ça

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

dans mon index.html et télécharger ce fichier js à chaque rafraîchissement?

C'est super ennuyeux, car parfois je reçois ReferenceError: google is not defined.

javascriptnpmmaps
13
feerlay

Le package officiel npm de google maps @ google/maps le fait. Il peut être utilisé avec

var googleMapsClient = require('@google/maps').createClient({
  key: 'your API key here'
});

Cependant, l'utilisation du script mentionné ne téléchargera pas le script deux fois. De nombreux navigateurs mettent en cache les fichiers javascript, donc en utilisant https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY va télécharger plusieurs fois et s'arrêter, l'utilisation du module google maps via browserify ne changera rien.

6
pfg

Oui, il existe quelques packages. Vous pouvez essayer celui-ci.

npm - google maps

1
SomeRandomGuy

J'ai rencontré le même problème lorsque je travaillais avec React + TypeScript. Tout d'abord, j'ai installé le SDK Google Maps avec cette ligne;

npm install @google/maps

Mais le compilateur TypeScript a donné une erreur, m'a également proposé cette ligne à installer;

npm install @types/google__maps

et puis ça a marché.

import { createClient } from "@google/maps"

const googleMaps = createClient({
  key: "YOUR_API_KEY"
})
1
Serhan C.

Le ReferenceError que vous obtenez est probable parce que vous n'appelez pas la bibliothèque de la bonne façon.

Dans Documentation de Google suggère que vous devez spécifier un rappel (comme initMap) qui sera appelé lorsque le chargement de l'API sera terminé. Tout ce que vous devez faire avec la carte doit aller dans cette fonction afin de vous assurer que l'API est chargée et que google est déjà défini.

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