js api loader

Google Maps JavaScript API Loader

Descrição

Carregue o script da API JavaScript do Google Maps dinamicamente. Isso se inspira no pacote NPM do Google-Maps, mas o atualiza com o ES6, as promessas e o TypeScript.

Instalar

Disponível via NPM como o pacote @googleMaps/js-api-carregador.

npm i @googlemaps/js-api-loader

Como alternativa, você pode adicionar o pacote UMD diretamente ao documento HTML usando o link unpkg.

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

Ao adicionar via unpkg, o carregador pode ser acessado no google.maps.plugins.loader.Loader .

TypeScript

Os usuários do TypeScript precisam instalar o seguinte pacote de tipos.

npm i -D @types/google.maps

Documentação

A documentação de referência pode ser encontrada neste link. O Google Maps JavaScript API Documentation é a fonte autorizada para as opções do carregador.

Exemplo

 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 uma promessa para uma biblioteca específica.

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

Usando uma promessa para quando o script estiver carregado.

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

Como alternativa, se você deseja usar um retorno de chamada.

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

Veja o pacote em ação aqui.

Apoiar

Esta biblioteca é suportada pela comunidade. Estamos confortáveis ​​o suficiente com a estabilidade e os recursos da biblioteca que queremos que você crie aplicativos de produção reais.

Se você encontrar um bug ou ter uma sugestão de recursos, registre um problema. Se você quiser contribuir, leia como contribuir.