Nightly Panic Munchies

    load-google-maps-api
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/load-google-maps-api package

    2.0.2 • Public • Published

    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

    Install

    npm i load-google-maps-api

    DownloadsWeekly Downloads

    93,336

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    8.03 kB

    Total Files

    5

    Last publish

    Collaborators

    • yuanqing