Loading repository data…
Loading repository data…
yuanqing / repository
:earth_asia: A lightweight Promise-returning helper for loading the Google Maps JavaScript API
A lightweight Promise-returning helper for loading the Google Maps JavaScript API
google.maps objectconst loadGoogleMapsApi = require('load-google-maps-api')
loadGoogleMapsApi().then(function (googleMaps) {
new googleMaps.Map(document.querySelector('.map'), {
center: {
lat: 40.7484405,
lng: -73.9944191
},
zoom: 12
})
}).catch(function (error) {
console.error(error)
})
N.B. Just like the Google Maps API itself, this module is client-side only.
Without this module, you would need to specify a named global callback, and pass said callback’s name as a parameter in the script tag’s src. For example:
<script>
window.googleMapsOnLoad = function () {
// `window.google.maps` available here
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=googleMapsOnLoad"></script>
This module abstracts this ceremony away, and fits better with modern bundlers like Browserify or Webpack.
const loadGoogleMapsApi = require('load-google-maps-api')
Returns a Promise.
google.maps object. If loadGoogleMapsApi is called multiple times on a page, the fulfilled callback will be passed the previously-loaded google.maps object.options.timeout.See Usage.
options is an optional object literal:
| Key | Description | Default |
|---|---|---|
apiUrl | The Google Maps API script tag URL | 'https://maps.googleapis.com/maps/api/js' |
channel | Client usage reporting channel | undefined |
client | Client ID | undefined |
key | Your API key | undefined |
language | Language | undefined |
libraries | Supplemental libraries to load | [] |
region | Region | undefined |
timeout | Time in milliseconds before rejecting the Promise | 10000 |
v | API version | undefined |
$ yarn add load-google-maps-api