load-google-maps-api

:earth_asia: A lightweight Promise-returning helper for loading the Google Maps JavaScript API

Github stars Tracking Chart

load-google-maps-api npm Version Build Status Bundle Size

A lightweight 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

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.

Motivation

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.

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:

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

Installation

$ yarn add load-google-maps-api

License

MIT

Main metrics

Overview
Name With Owneryuanqing/load-google-maps-api
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:MIT License
所有者活动
Created At2016-01-01 05:00:25
Pushed At2021-03-17 14:09:59
Last Commit At
Release Count16
Last Release Namev2.0.2 (Posted on 2020-03-07 16:50:30)
First Release Namev0.0.1 (Posted on )
用户参与
Stargazers Count173
Watchers Count2
Fork Count22
Commits Count82
Has Issues Enabled
Issues Count15
Issue Open Count1
Pull Requests Count3
Pull Requests Open Count2
Pull Requests Close Count7
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private