js api loader 다운로드 -JS js api loader 소스 코드 다운로드

js api loader

웹사이트 데이터

v1.16.9

다운로드

Google은 JavaScript API 로더를 매핑합니다

설명

Google Maps JavaScript API 스크립트를 동적으로로드하십시오. 이것은 Google-Maps NPM 패키지에서 영감을 얻지 만 ES6, 약속 및 TypeScript로 업데이트합니다.

설치하다

npm을 통해 package @googlemaps/js-api-loader로 사용할 수 있습니다.

npm i @googlemaps/js-api-loader

또는 UNPKG 링크를 사용하여 UMD 패키지를 HTML 문서에 직접 추가 할 수 있습니다.

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

UNPKG를 통해 추가 할 때 google.maps.plugins.loader.Loader 에서 로더에 액세스 할 수 있습니다.

TypeScript

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