# load-google-maps-api

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

Latest version **2.0.2** (published 2020-03-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install load-google-maps-api
pnpm add load-google-maps-api
yarn add load-google-maps-api
bun add load-google-maps-api
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2020-03-07 |
| First published | 2016-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/load-google-maps-api) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 173 |
| Author | Lim Yuan Qing |
| Maintainers | yuanqing |
| Keywords | api, google, google-maps, google-maps-api, loader, maps, promise |

## Links

- npm: https://www.npmjs.com/package/load-google-maps-api
- Repository: https://github.com/yuanqing/load-google-maps-api
- Homepage: https://github.com/yuanqing/load-google-maps-api#readme
- Issues: https://github.com/yuanqing/load-google-maps-api/issues
- npm.io page: https://npm.io/package/load-google-maps-api

## Alternatives

- [@commercetools/sync-actions](https://npm.io/package/@commercetools/sync-actions.md) — 25.1K weekly downloads
- [cwait](https://npm.io/package/cwait.md) — 21.4K weekly downloads
- [@ledgerhq/hw-app-cosmos](https://npm.io/package/@ledgerhq/hw-app-cosmos.md) — 4.2K weekly downloads
- [@financial-times/o-loading](https://npm.io/package/@financial-times/o-loading.md) — 2.8K weekly downloads
- [fa](https://npm.io/package/fa.md) — 185 weekly downloads

## Recent versions

- 2.0.2 (latest) — 2020-03-07
- 2.0.1 — 2019-07-13
- 2.0.0 — 2019-06-29
- 1.3.3 — 2019-04-09
- 1.3.2 — 2018-05-15
- 1.3.1 — 2018-05-15
- 1.3.0 — 2018-04-21
- 1.2.1 — 2018-03-25
- 1.2.0 — 2018-03-04
- 1.1.1 — 2018-02-18
- 1.1.0 — 2018-02-18
- 1.0.1 — 2017-12-12
- 1.0.0 — 2017-05-10
- 0.0.3 — 2017-03-07
- 0.0.2 — 2016-01-01
- … 1 more at https://npm.io/package/load-google-maps-api/versions

## README

# load-google-maps-api [![npm Version](https://badgen.net/npm/v/load-google-maps-api)](https://www.npmjs.org/package/load-google-maps-api) [![Build Status](https://badgen.net/travis/yuanqing/load-google-maps-api?label=build)](https://travis-ci.org/yuanqing/load-google-maps-api) [![Bundle Size](https://badgen.net/bundlephobia/minzip/load-google-maps-api)](https://bundlephobia.com/result?p=load-google-maps-api)

> A lightweight Promise-returning helper for loading the [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/)

- The Promise’s fulfilled callback is passed the `google.maps` object
- Optionally set a timeout, an API key, the language, [and more](#loadgooglemapsapioptions)

## Usage

> [**Editable demo (CodePen)**](https://codepen.io/lyuanqing/pen/YeYBrN)

```js
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](https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API), 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:

```html
<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](http://browserify.org/) or [Webpack](https://webpack.github.io/).

## API

```js
const loadGoogleMapsApi = require('load-google-maps-api')
```

### loadGoogleMapsApi([options])

Returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](#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](https://developers.google.com/maps/premium/reports/usage-reports#channels) | `undefined`
  `client` | [Client ID](https://developers.google.com/maps/documentation/javascript/get-api-key#specifying-a-client-id-when-loading-the-api) | `undefined`
  `key` | [Your API key](https://developers.google.com/maps/documentation/javascript/get-api-key#step-2-add-the-api-key-to-your-application) | `undefined`
  `language` | [Language](https://developers.google.com/maps/documentation/javascript/localization#Language) | `undefined`
  `libraries` | [Supplemental libraries to load](https://developers.google.com/maps/documentation/javascript/libraries) | `[]`
  `region` | [Region](https://developers.google.com/maps/documentation/javascript/localization#Region) | `undefined`
  `timeout` | Time in milliseconds before rejecting the Promise | `10000`
  `v` | [API version](https://developers.google.com/maps/documentation/javascript/versions) | `undefined`

## Installation

```sh
$ yarn add load-google-maps-api
```

## License

[MIT](LICENSE.md)

---
_Source: https://npm.io/package/load-google-maps-api · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._