js api loader

Google Maps JavaScript API Loader

Descripción

Cargue el script API de Google Maps JavaScript dinámicamente. Esto se inspira en el paquete NPM de Google-Maps, pero lo actualiza con ES6, Promesas y TypeScript.

Instalar

Disponible a través de NPM como el paquete @googlemaps/js-api loader.

npm i @googlemaps/js-api-loader

Alternativamente, puede agregar el paquete UMD directamente al documento HTML utilizando el enlace UNPKG.

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

Al agregar a través de UNPKG, se puede acceder al cargador en google.maps.plugins.loader.Loader .

Mecanografiado

Los usuarios de TypeScript deben instalar el siguiente paquete de tipos.

npm i -D @types/google.maps

Documentación

La documentación de referencia se puede encontrar en este enlace. La documentación de la API de Google Maps JavaScript es la fuente autorizada para las opciones del cargador.

Ejemplo

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

Usando una promesa para una biblioteca específica.

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

Usando una promesa para cuándo se ha cargado el script.

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

Alternativamente, si desea usar una devolución de llamada.

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

Vea el paquete en acción aquí.

Apoyo

Esta biblioteca es apoyada por la comunidad. Nos sentimos lo suficientemente cómodos con la estabilidad y las características de la biblioteca que queremos que cree aplicaciones de producción reales.

Si encuentra un error o tiene una sugerencia de características, registre un problema. Si desea contribuir, lea cómo contribuir.