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 )
2020script.
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
3231Install 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
5249npm 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
6355import { 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.
6858setOptions ({ 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.
7363const { Map } = await importLibrary (" maps" );
7464const map = new Map (mapEl, mapOptions);
7565
76- // alternatively :
66+ // Alternatively :
7767await importLibrary (" maps" );
7868const 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 :
8171importLibrary (" 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
88158See 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
0 commit comments