js api loader

Google Maps JavaScript API -загрузчик

Описание

Загрузите сценарий Google Maps JavaScript API динамически. Это черпает вдохновение в пакете Google-Maps NPM, но обновляет его с помощью ES6, обещаний и TypeScript.

Установить

Доступен через NPM в качестве пакета @googlemaps/js-api-loader.

npm i @googlemaps/js-api-loader

В качестве альтернативы вы можете добавить пакет UMD непосредственно в документ HTML, используя ссылку UNPKG.

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

При добавлении через UNPKG можно получить доступ по адресу google.maps.plugins.loader.Loader .

Машинопись

Пользователям TypeScript необходимо установить следующий пакет типов.

npm i -D @types/google.maps

Документация

Справочная документация можно найти по этой ссылке. Документация Google Maps JavaScript API является авторитетным источником для параметров загрузчика.

Пример

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

Используя обещание для конкретной библиотеки.

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

Используя обещание, когда сценарий загружен.

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

В качестве альтернативы, если вы хотите использовать обратный вызов.

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

Посмотреть пакет в действии здесь.

Поддерживать

Эта библиотека поддерживается сообществом. Нам достаточно удобно со стабильностью и функциями библиотеки, которую мы хотим, чтобы вы создали реальные производственные приложения.

Если вы найдете ошибку или имеете предложение функции, пожалуйста, войдите в систему. Если вы хотите внести свой вклад, прочитайте, как внести свой вклад.