Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/googlemaps/js-api-loader
Load the Google Maps JavaScript API script dynamically.
https://github.com/googlemaps/js-api-loader
bootstrap google google-maps google-maps-api googlemaps javascript maps promises utility-library web
Last synced: 4 days ago
JSON representation
Load the Google Maps JavaScript API script dynamically.
- Host: GitHub
- URL: https://github.com/googlemaps/js-api-loader
- Owner: googlemaps
- License: apache-2.0
- Created: 2020-04-09T22:15:47.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-08T14:02:42.000Z (10 months ago)
- Last Synced: 2024-04-08T17:05:29.769Z (10 months ago)
- Topics: bootstrap, google, google-maps, google-maps-api, googlemaps, javascript, maps, promises, utility-library, web
- Language: TypeScript
- Homepage:
- Size: 4.13 MB
- Stars: 310
- Watchers: 15
- Forks: 62
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# Google Maps JavaScript API Loader
[](https://www.npmjs.com/package/@googlemaps/js-api-loader)
[](https://codecov.io/gh/googlemaps/js-api-loader)
[](https://github.com/semantic-release/semantic-release)
[](https://discord.gg/jRteCzP)
## Description
Load the Google Maps JavaScript API script dynamically. This takes inspiration from the [google-maps](https://www.npmjs.com/package/google-maps) npm package but updates it with ES6, Promises, and TypeScript.
## Install
Available via npm as the package [@googlemaps/js-api-loader](https://www.npmjs.com/package/@googlemaps/js-api-loader).
```sh
npm i @googlemaps/js-api-loader
```
Alternatively you may add the umd package directly to the html document using the unpkg link.
```html
```
When adding via unpkg, the loader can be accessed at `google.maps.plugins.loader.Loader`.
### TypeScript
TypeScript users need to install the following types package.
```sh
npm i -D @types/google.maps
```
## Documentation
The reference documentation can be found at this [link](https://googlemaps.github.io/js-api-loader/index.html). The Google Maps JavaScript API [documentation](https://developers.google.com/maps/documentation/javascript/tutorial) is the authoritative source for the loader options.
## Example
```javascript
import { Loader } from '@googlemaps/js-api-loader';
const loader = new Loader({
apiKey: "",
version: "weekly",
libraries: ["places"]
});
const mapOptions = {
center: {
lat: 0,
lng: 0
},
zoom: 4
};
```
Using a promise for a specific library.
```javascript
// Promise for a specific library
loader
.importLibrary('maps')
.then(({Map}) => {
new Map(document.getElementById("map"), mapOptions);
})
.catch((e) => {
// do something
});
```
Using a promise for when the script has loaded.
```javascript
// Promise
loader
.load()
.then((google) => {
new google.maps.Map(document.getElementById("map"), mapOptions);
})
.catch(e => {
// do something
});
```
Alternatively, if you want to use a callback.
```javascript
// Callback
loader.loadCallback(e => {
if (e) {
console.log(e);
} else {
new google.maps.Map(document.getElementById("map"), mapOptions);
}
});
```
View the package in action [here](https://googlemaps.github.io/js-api-loader/examples/index.html).
## Support
This library is community supported. We're comfortable enough with the stability and features of
the library that we want you to build real production applications on it.
If you find a bug, or have a feature suggestion, please [log an issue][issues]. If you'd like to
contribute, please read [How to Contribute][contrib].
[issues]: https://github.com/googlemaps/js-api-loader/issues
[contrib]: https://github.com/googlemaps/js-api-loader/blob/main/CONTRIBUTING.md