js api loaderダウンロード-JSAPI js api loaderソースコードダウンロード

js api loader

ウェブサイトデータ

v1.16.9

ダウンロード

GoogleはJavaScript APIローダーをマッピングします

説明

GoogleマップJavaScript APIスクリプトを動的にロードします。これにより、Google-Maps NPMパッケージからインスピレーションが得られますが、ES6、Promises、およびTypeScriptで更新されます。

インストール

npm経由でパッケージ @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にアクセスできます。

タイプスクリプト

タイプスクリプトユーザーは、次のタイプパッケージをインストールする必要があります。

npm i -D @types/google.maps

ドキュメント

参照ドキュメントは、このリンクにあります。 Googleマップ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 ) ;
  }
} ) ;