js api loader

Google Maps JavaScript API Loader

Beschreibung

Laden Sie die Google Maps JavaScript -API -Skript dynamisch. Dies lässt sich vom Google-Maps NPM-Paket inspirieren, aktualisiert es jedoch mit ES6, Versprechen und Typenkript.

Installieren

Erhältlich über NPM als Paket @googlemaps/js-api-loader.

npm i @googlemaps/js-api-loader

Alternativ können Sie das UMD -Paket direkt zum HTML -Dokument mit dem UNPKG -Link hinzufügen.

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

Beim Hinzufügen über UNPKG kann der Loader unter google.maps.plugins.loader.Loader zugegriffen werden.

Typoskript

Typscript -Benutzer müssen das folgende Typ -Paket installieren.

npm i -D @types/google.maps

Dokumentation

Die Referenzdokumentation finden Sie in diesem Link. Die Google Maps JavaScript -API -Dokumentation ist die maßgebliche Quelle für die Laderoptionen.

Beispiel

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

Verwenden eines Versprechens für eine bestimmte Bibliothek.

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

Mit einem Versprechen, wenn das Skript geladen wurde.

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

Alternativ, wenn Sie einen Rückruf verwenden möchten.

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

Sehen Sie sich das Paket hier in Aktion an.

Unterstützung

Diese Bibliothek wird Community unterstützt. Wir sind mit der Stabilität und den Funktionen der Bibliothek bequem genug, damit Sie echte Produktionsanwendungen aufbauen möchten.

Wenn Sie einen Fehler finden oder einen Feature -Vorschlag haben, protokollieren Sie bitte ein Problem. Wenn Sie einen Beitrag leisten möchten, lesen Sie bitte, wie Sie einen Beitrag leisten.