js api loader

Google Maps JavaScript API Loader

Keterangan

Muat skrip API Google Maps JavaScript secara dinamis. Ini membutuhkan inspirasi dari paket NPM Google-MAPS tetapi memperbaruinya dengan ES6, janji, dan naskah.

Memasang

Tersedia melalui NPM sebagai paket @googlemaps/js-api-loader.

npm i @googlemaps/js-api-loader

Atau Anda dapat menambahkan paket UMD langsung ke dokumen HTML menggunakan tautan UNPKG.

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

Saat menambahkan melalui UNPKG, loader dapat diakses di google.maps.plugins.loader.Loader .

Naskah

Pengguna TypeScript perlu menginstal paket jenis berikut.

npm i -D @types/google.maps

Dokumentasi

Dokumentasi referensi dapat ditemukan di tautan ini. Dokumentasi API Google Maps JavaScript adalah sumber otoritatif untuk opsi loader.

Contoh

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

Menggunakan janji untuk perpustakaan tertentu.

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

Menggunakan janji untuk saat skrip dimuat.

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

Atau, jika Anda ingin menggunakan panggilan balik.

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

Lihat paket beraksi di sini.

Mendukung

Perpustakaan ini didukung masyarakat. Kami cukup nyaman dengan stabilitas dan fitur perpustakaan sehingga kami ingin Anda membangun aplikasi produksi nyata di atasnya.

Jika Anda menemukan bug, atau memiliki saran fitur, silakan mencatat masalah. Jika Anda ingin berkontribusi, silakan baca cara berkontribusi.