load-google-maps-api
A thin, Promise-returning helper for loading the Google Maps JavaScript API.
- The Promise’s fulfilled callback is passed the
google.maps
object - Optionally set a timeout, an API key, the language, and more
- 424 bytes gzipped
Usage
Editable demo (CodePen)
const 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.
Why
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 () {
}
</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.
API
const loadGoogleMapsApi = require('load-google-maps-api')
loadGoogleMapsApi([options])
Returns a Promise.
- Fulfilled if loading was successful. The fulfilled callback is passed the
google.maps
object. If loadGoogleMapsApi
is called multiple times on a page, the fulfilled callback will be passed the previously-loaded google.maps
object. - Rejected if we weren’t able to load the Google Maps API after
options.timeout
.
See Usage.
options
is an optional object literal:
Installation
Install via yarn:
$ yarn add load-google-maps-api
Or npm:
$ npm install --save load-google-maps-api
License
MIT