js api loader

Google Maps JavaScript API Loader

Description

Chargez dynamiquement le script API JavaScript Google Maps. Cela s'inspire du package NPM Google-Maps, mais le met à jour avec ES6, Promises et TypeScript.

Installer

Disponible via NPM comme package @ googlemaps / js-api-chargedeur.

npm i @googlemaps/js-api-loader

Vous pouvez également ajouter le package UMD directement au document HTML à l'aide du lien UNPKG.

 < script src =" https://unpkg.com/@googlemaps/[email protected]/dist/index.min.js " > </ script >

Lors de l'ajout par UNPKG, le chargeur est accessible sur google.maps.plugins.loader.Loader .

Manuscrit

Les utilisateurs de typeScript doivent installer le package des types suivants.

npm i -D @types/google.maps

Documentation

La documentation de référence peut être trouvée sur ce lien. La documentation de l'API Google Maps JavaScript est la source faisant autorité pour les options de chargeur.

Exemple

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

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

const mapOptions = {
  center : {
    lat : 0 ,
    lng : 0
  } ,
  zoom : 4
} ;

Utilisation d'une promesse pour une bibliothèque spécifique.

 // Promise for a specific library
loader
  . importLibrary ( 'maps' )
  . then ( ( { Map } ) => {
    new Map ( document . getElementById ( "map" ) , mapOptions ) ;
  } )
  . catch ( ( e ) => {
    // do something
  } ) ;

Utilisation d'une promesse pour quand le script a chargé.

 // Promise
loader
  . load ( )
  . then ( ( google ) => {
    new google . maps . Map ( document . getElementById ( "map" ) , mapOptions ) ;
  } )
  . catch ( e => {
    // do something
  } ) ;

Alternativement, si vous souhaitez utiliser un rappel.

 // Callback
loader . loadCallback ( e => {
  if ( e ) {
    console . log ( e ) ;
  } else {
    new google . maps . Map ( document . getElementById ( "map" ) , mapOptions ) ;
  }
} ) ;

Consultez le package en action ici.

Soutien

Cette bibliothèque est soutenue par la communauté. Nous sommes suffisamment à l'aise avec la stabilité et les fonctionnalités de la bibliothèque que nous voulons que vous construisiez de véritables applications de production dessus.

Si vous trouvez un bogue ou avez une suggestion de fonctionnalité, veuillez enregistrer un problème. Si vous souhaitez contribuer, veuillez lire comment contribuer.