Skip to content

Commit 323800f

Browse files
committed
docs: update readme
1 parent 98e5019 commit 323800f

File tree

2 files changed

+97
-28
lines changed

2 files changed

+97
-28
lines changed

README.md

Lines changed: 96 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515

1616
## Description
1717

18-
Load the Google Maps JavaScript API script dynamically. This is essentially
19-
an npm version of the [Dynamic Library Import](https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import)
18+
Load the Google Maps JavaScript API script dynamically. This is an npm version
19+
of the [Dynamic Library Import](https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import)
2020
script.
2121

2222
## Requirements
@@ -25,64 +25,134 @@ script.
2525
- A Google Cloud Platform [project] with the [**Maps JavaScript API**]
2626
[maps-sdk] enabled
2727
- An [API key] associated with the project above
28-
- [@googlemaps/js-api-loader NPM package][npm-pkg]
2928

3029
## Installation
3130

3231
Install the [`@googlemaps/js-api-loader` NPM package][npm-pkg] with:
3332

3433
```sh
35-
npm install @googlemaps/js-api-loader
36-
```
34+
npm install --save @googlemaps/js-api-loader
3735

38-
Alternatively you may add the UMD package directly to the html document using
39-
the unpkg link.
36+
# or
37+
yarn add @googlemaps/js-api-loader
4038

41-
```html
42-
<script src="https://unpkg.com/@googlemaps/js-api-loader@2.x/dist/index.umd.js"></script>
39+
# or
40+
pnpm add @googlemaps/js-api-loader
4341
```
4442

45-
When adding via unpkg, the loader can be accessed at `google.maps.plugins.loader.Loader`.
46-
4743
### TypeScript
4844

49-
TypeScript users need to install the following types package.
45+
TypeScript users should additionally install the types for the Google Maps
46+
JavaScript API:
5047

5148
```sh
5249
npm install --save-dev @types/google.maps
5350
```
5451

55-
## Documentation
56-
57-
The reference documentation can be found at this [link][reference]. The Google
58-
Maps JavaScript API documentation is the authoritative source for the loader options.
59-
6052
## Usage
6153

6254
```javascript
6355
import { setOptions, importLibrary } from "@googlemaps/js-api-loader";
6456

65-
// set the options for loading the API.
66-
// See here for a list of supported options:
67-
// https://developers.google.com/maps/documentation/javascript/load-maps-js-api#required_parameters
57+
// Set the options for loading the API.
6858
setOptions({ key: "your-api-key-here" });
6959

70-
// load the needed APIs asynchronously.
71-
// Once the returned promise is fulfilled, the libraries are also
72-
// available in the global `google.maps` namespace.
60+
// Load the needed APIs.
61+
// Note: once the returned promise is fulfilled, the libraries are also
62+
// available in the global `google.maps` namespace.
7363
const { Map } = await importLibrary("maps");
7464
const map = new Map(mapEl, mapOptions);
7565

76-
// alternatively:
66+
// Alternatively:
7767
await importLibrary("maps");
7868
const map = new google.maps.Map(mapEl, mapOptions);
7969

80-
// or, if you prefer using callbacks instead of async/awqait:
70+
// Or, if you prefer using callbacks instead of async/await:
8171
importLibrary("maps").then(() => {
8272
const map = new google.maps.Map(mapEl, mapOptions);
8373
});
8474
```
8575

76+
## Documentation
77+
78+
This package exports just two functions, `setOptions` and `importLibrary`.
79+
The functions are available as named exports and default export.
80+
81+
```ts
82+
// Using named exports:
83+
import { setOptions, importLibrary } from "@googlemaps/js-api-loader";
84+
85+
setOptions({ key: GOOGLE_MAPS_API_KEY });
86+
await importLibrary("core");
87+
88+
// Using the default export:
89+
import MapsAPILoader from "@googlemaps/js-api-loader";
90+
91+
MapsAPILoader.setOptions({ key: GOOGLE_MAPS_API_KEY });
92+
await MapsAPILoader.importLibrary("core");
93+
```
94+
95+
### `setOptions(options: APIOptions): void`
96+
97+
Sets the options for loading the Google Maps JavaScript API. See the
98+
[documentation][parameters] for additional information.
99+
100+
Supported options:
101+
102+
- `key: string`: Your API key.
103+
- `v: string`: The version of the Maps JavaScript API to load.
104+
- `language: string`: The language to use. This affects the names of
105+
controls, copyright notices, driving directions, and control labels, and
106+
the responses to service requests.
107+
- `region: string`: The region code to use. This alters the API's behavior
108+
based on a given country or territory.
109+
- `libraries: string[]`: An array of additional Maps JavaScript API libraries to
110+
load. Specifying a fixed set of libraries is not generally recommended, but is
111+
available for developers who want to finely tune the caching behavior on their
112+
website.
113+
- `authReferrerPolicy: string`: Can be used to configure HTTP Referrer
114+
Restrictions in the Cloud Console to limit which URLs are allowed to use a
115+
particular API Key.
116+
- `mapIds: string[]`: An array of map IDs. Causes the configuration for the
117+
specified map IDs to be preloaded. Specifying map IDs here is not required
118+
for map IDs usage, but is available for developers who want to finely tune
119+
network performance.
120+
- `channel: string`: Can be used to track your usage using numeric channels.
121+
Only numeric values `0` to `999` are allowed.
122+
- `solutionChannel`: Google Maps Platform provides many types of sample code to
123+
help you get up and running quickly. To track adoption of our more complex
124+
code samples and improve solution quality, Google includes the solutionChannel
125+
query parameter in API calls in our sample code.
126+
127+
### `importLibrary(library: string): Promise`
128+
129+
Loads the specified library. Returns a promise that resolves with the
130+
library object when the library is loaded. In case of an error while loading
131+
the library (might be due to poor network conditions and other unforseeable
132+
circumstances), the promise is rejected with an error.
133+
134+
Calling this function for the first time will trigger loading the maps API
135+
itself. After that, the options can no longer be changed, and trying to do
136+
that will log a warning to the console.
137+
138+
The following libraries are available:
139+
140+
- `core`: [`google.maps.CoreLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#CoreLibrary)
141+
- `maps`: [`google.maps.MapsLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#MapsLibrary)
142+
- `maps3d`: [`google.maps.Maps3DLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#Maps3DLibrary)
143+
- `places`: [`google.maps.PlacesLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#PlacesLibrary)
144+
- `geocoding`: [`google.maps.GeocodingLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#GeocodingLibrary)
145+
- `routes`: [`google.maps.RoutesLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#RoutesLibrary)
146+
- `marker`: [`google.maps.MarkerLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#MarkerLibrary)
147+
- `geometry`: [`google.maps.GeometryLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#GeometryLibrary)
148+
- `elevation`: [`google.maps.ElevationLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#ElevationLibrary)
149+
- `streetView`: [`google.maps.StreetViewLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#StreetViewLibrary)
150+
- `journeySharing`: [`google.maps.JourneySharingLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#JourneySharingLibrary)
151+
- `visualization`: [`google.maps.VisualizationLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#VisualizationLibrary)
152+
- `airQuality`: [`google.maps.AirQualityLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#AirQualityLibrary)
153+
- `addressValidation`: [`google.maps.AddressValidationLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#AddressValidationLibrary)
154+
- `drawing`: [`google.maps.DrawingLibrary`](https://developers.google.com/maps/documentation/javascript/reference/library-interfaces#DrawingLibrary) (deprecated)
155+
86156
## Migrating from v1 to v2
87157

88158
See the [migration guide](MIGRATION.md).
@@ -129,6 +199,7 @@ You can also discuss this library on our [Discord server].
129199
[maps-sdk]: https://developers.google.com/maps/documentation/javascript
130200
[reference]: https://googlemaps.github.io/js-api-loader/index.html
131201
[documentation]: https://googlemaps.github.io/js-api-loader
202+
[parameters]: https://developers.google.com/maps/documentation/javascript/load-maps-js-api#required_parameters
132203
[npm-pkg]: https://npmjs.com/package/@googlemaps/js-api-loader
133204
[code of conduct]: ?tab=coc-ov-file#readme
134205
[contributing guide]: CONTRIBUTING.md
@@ -141,7 +212,6 @@ You can also discuss this library on our [Discord server].
141212
[pull request]: https://github.com/googlemaps/js-api-loader/compare
142213
[semantic versioning]: https://semver.org
143214
[Sign up with Google Maps Platform]: https://console.cloud.google.com/google/maps-apis/start
144-
[similar inquiry]: https://github.com/googlemaps/js-api-loader/issues
145215
[SLA]: https://cloud.google.com/maps-platform/terms/sla
146216
[Technical Support Services Guidelines]: https://cloud.google.com/maps-platform/terms/tssg
147217
[Terms of Service]: https://cloud.google.com/maps-platform/terms

src/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,10 @@ import {
2626

2727
export type APIOptions = {
2828
key?: string;
29-
3029
v?: string;
31-
libraries?: string[];
3230
language?: string;
3331
region?: string;
32+
libraries?: string[];
3433
authReferrerPolicy?: string;
3534
mapIds?: string[];
3635
channel?: string;

0 commit comments

Comments
 (0)