### Installation

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Instructions on how to install the @googlemaps/js-api-loader package using npm, yarn, or pnpm. Also includes installation for TypeScript types.

```sh
npm install --save @googlemaps/js-api-loader

# or
yarn add @googlemaps/js-api-loader

# or
pnpm add @googlemaps/js-api-loader

# TypeScript users:
npm install --save-dev @types/google.maps
```

--------------------------------

### Install and Build Vite Test

Source: https://github.com/googlemaps/js-api-loader/blob/main/test-bundlers/README.md

Steps to set up and build the Vite integration test. This includes installing dependencies and the local package.

```bash
cd vite-test
npm install
npm install $(npm pack --silent ../../)
npm run build
```

--------------------------------

### Install Dependencies

Source: https://github.com/googlemaps/js-api-loader/blob/main/CONTRIBUTING.md

Run this command to install project dependencies before running tests or making code changes.

```bash
npm install
```

--------------------------------

### v2.x: Imitating v1.x API with setOptions and importLibrary

Source: https://github.com/googlemaps/js-api-loader/blob/main/MIGRATION.md

This example demonstrates how to achieve similar functionality to v1.x by preloading libraries with `setOptions` and then using `importLibrary` to load them. It supports promises and async/await patterns.

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

setOptions({
  key: "YOUR_API_KEY",
  v: "weekly",

  // Libraries can still be specified in `setOptions`, but this is only
  // preloading them. You still need to call `importLibrary` to fully load
  // them.
  libraries: ["places"],
});

// load all required libraries in parallel
const librariesPromise = Promise.all([
  importLibrary("maps"),
  importLibrary("places"),
]);

// The examples from above, rewritten with v2.0:
//
// a) using promises and c) using callbacks
librariesPromise.then(() => initMap());

// b) using load() with async/await:
await librariesPromise;
initMap();

function initMap() {
  // Use the global google.maps namespace once loading is complete
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}
```

--------------------------------

### Install JS API Loader

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Install the @googlemaps/js-api-loader package using npm, yarn, or pnpm.

```sh
npm install --save @googlemaps/js-api-loader
```

```sh
yarn add @googlemaps/js-api-loader
```

```sh
pnpm add @googlemaps/js-api-loader
```

--------------------------------

### Import Places Library

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Example of importing the 'places' library to use Google Maps Places API functionality.

```javascript
import { importLibrary } from "@googlemaps/js-api-loader";

async function initAutocomplete() {
  const places = await importLibrary("places");
  const { Autocomplete } = places;

  new Autocomplete(document.getElementById("autocomplete") as HTMLInputElement, {
    fields: ["formatted_address", "geometry", "name"],
    // ... other options
  });
}
```

--------------------------------

### Install TypeScript Types

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

For TypeScript users, install the types for the Google Maps JavaScript API.

```sh
npm install --save-dev @types/google.maps
```

--------------------------------

### TypeScript Usage with Google Maps API

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Leverage full TypeScript support for type inference. Install `@types/google.maps` for complete type definitions. This example demonstrates loading and using Maps, Marker, and Places libraries.

```typescript
import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

setOptions({ key: "YOUR_GOOGLE_MAPS_API_KEY", v: "weekly" });

// TypeScript infers correct library types
async function initMap(): Promise<void> {
  // MapsLibrary type is automatically inferred
  const { Map, MapTypeId } = await importLibrary("maps");

  // MarkerLibrary type is automatically inferred
  const { AdvancedMarkerElement, PinElement } = await importLibrary("marker");

  // PlacesLibrary type is automatically inferred
  const { Autocomplete, PlacesService } = await importLibrary("places");

  const mapElement = document.getElementById("map") as HTMLElement;

  const map = new Map(mapElement, {
    center: { lat: 35.6762, lng: 139.6503 },  // Tokyo
    zoom: 15,
    mapTypeId: MapTypeId.ROADMAP,
    mapId: "DEMO_MAP_ID"
  });

  // Create custom pin element
  const pin = new PinElement({
    background: "#4285F4",
    borderColor: "#1a73e8",
    glyphColor: "white",
  });

  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 35.6762, lng: 139.6503 },
    content: pin.element,
    title: "Tokyo Tower"
  });

  // Initialize Places Autocomplete
  const input = document.getElementById("search-input") as HTMLInputElement;
  const autocomplete = new Autocomplete(input, {
    fields: ["place_id", "geometry", "name"],
    types: ["establishment"]
  });

  autocomplete.addListener("place_changed", () => {
    const place = autocomplete.getPlace();
    if (place.geometry?.location) {
      map.panTo(place.geometry.location);
      map.setZoom(17);
    }
  });
}

initMap().catch(console.error);
```

--------------------------------

### Run Lint Check

Source: https://github.com/googlemaps/js-api-loader/blob/main/CONTRIBUTING.md

Perform a lint check to verify code style and identify potential issues. This command checks for style guide adherence.

```bash
# Run lint check.
npm run lint
```

--------------------------------

### Access Global Namespace After Loading Library

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

After a library is loaded using `importLibrary`, its components are also available on the global `google.maps` namespace. This example shows loading 'geocoding' and then using `google.maps.Geocoder`.

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

setOptions({ key: "YOUR_GOOGLE_MAPS_API_KEY" });

// Alternative: Use global namespace after library load
await importLibrary("geocoding");
const geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: "1600 Amphitheatre Parkway, Mountain View, CA" }, (results, status) => {
  if (status === "OK" && results[0]) {
    console.log("Location:", results[0].geometry.location.toString());
  }
});
```

--------------------------------

### Basic Usage with Async/Await

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Demonstrates how to set loader options and dynamically import libraries using async/await syntax.

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

// Set the options for loading the API.
setOptions({ key: "your-api-key-here" });

// Load the needed APIs.
// Note: once the returned promise is fulfilled, the libraries are also
//       available in the global `google.maps` namespace.
const { Map } = await importLibrary("maps");
const map = new Map(mapEl, mapOptions);
```

--------------------------------

### Configure Loader Options

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Set API key and other options once at application startup. This is the primary configuration step for the loader.

```javascript
import { setOptions } from "@googlemaps/js-api-loader";

setOptions({
  key: "YOUR_API_KEY",
  version: "weekly",
  libraries: ["places"]
});
```

--------------------------------

### Load Google Maps Library with Promise Callbacks

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Demonstrates loading the 'maps' library using traditional Promise `.then()` and `.catch()` callbacks instead of async/await syntax.

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

setOptions({ key: "YOUR_GOOGLE_MAPS_API_KEY" });

// Using with promise callbacks instead of async/await
importLibrary("maps").then(({ Map }) => {
  const map = new Map(document.getElementById("map"), {
    center: { lat: 51.5074, lng: -0.1278 },  // London
    zoom: 10
  });
}).catch((error) => {
  console.error("Error loading maps:", error);
});
```

--------------------------------

### v1.x: Load predefined libraries with Loader class

Source: https://github.com/googlemaps/js-api-loader/blob/main/MIGRATION.md

Use the `Loader` class to configure and load multiple libraries, then initialize the map using the global `google.maps` namespace. Supports promises, async/await, and callbacks.

```javascript
import { Loader } from "@googlemaps/js-api-loader";

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  libraries: ["maps", "places"],
});

// a) using load() with promises
loader.load().then(() => initMap());

// b) using load() with async/await:
await loader.load();
initMap();

// c) using callback
loader.loadCallback(() => {
  initMap();
});

function initMap() {
  // use the global google.maps namespace once loading is complete
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}
```

--------------------------------

### v2.x: Load specific libraries with importLibrary

Source: https://github.com/googlemaps/js-api-loader/blob/main/MIGRATION.md

Configure the loader using `setOptions` and then use `importLibrary` to asynchronously load specific libraries when needed. This approach is recommended for modern development.

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

setOptions({
  key: "YOUR_API_KEY",
  v: "weekly",
});

try {
  const { Map } = await importLibrary("maps");

  // Use the maps library
  const map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
} catch (e) {
  // do something
}
```

--------------------------------

### Initialize and Interact with Custom Elements

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Configure the API key, import required libraries for custom elements, and wait for elements to be defined before interacting programmatically. Event listeners can be attached to custom elements.

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

setOptions({ key: "YOUR_GOOGLE_MAPS_API_KEY" });

// Start loading libraries for custom elements (no need to await)
importLibrary("maps");    // Required for <gmp-map>
importLibrary("marker");  // Required for <gmp-advanced-marker>

// Wait for element upgrade, then interact with the map
await customElements.whenDefined("gmp-map");
const mapElement = document.querySelector("gmp-map");
const map = mapElement.innerMap;

// Add event listener to the custom element
mapElement.addEventListener("gmp-zoomchange", (event) => {
  console.log("Zoom changed to:", event.detail.zoom);
});

// Wait for marker element and configure it
await customElements.whenDefined("gmp-advanced-marker");
const markers = document.querySelectorAll("gmp-advanced-marker");
markers.forEach(marker => {
  marker.addEventListener("gmp-click", () => {
    console.log("Marker clicked:", marker.title);
  });
});
```

--------------------------------

### Run All Bundler Integration Tests

Source: https://github.com/googlemaps/js-api-loader/blob/main/test-bundlers/README.md

Execute all integration tests for various JavaScript bundlers. Ensure the script is executable before running.

```bash
./test-all.sh
```

--------------------------------

### Import Core Library with Named Exports

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Demonstrates using named exports for `setOptions` and `importLibrary` to load the 'core' library.

```typescript
// Using named exports:
import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

setOptions({ key: GOOGLE_MAPS_API_KEY });
await importLibrary("core");
```

--------------------------------

### setOptions Parameters

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Lists the available options for the setOptions function.

```APIDOC
### `setOptions(options: APIOptions): void`

Sets the options for loading the Google Maps JavaScript API and installs the global `google.maps.importLibrary()` function that is used by the `importLibrary()` function of this package.

This function should be called as early as possible in your application and should only be called once. Any further calls will not have any effect and log a warning to the console.

Below is a short summary of the accepted options, see the [documentation][parameters] for full descriptions and additional information:

- `key: string`: Your API key. This is the only required option.
- `v: string`: The version of the Maps JavaScript API to load.
- `language: string`: The language to use.
- `region: string`: The region code to use.
- `libraries: string[]`: Additional libraries to preload.
- `authReferrerPolicy: string`: Set the referrer policy for the API requests.
- `mapIds: string[]`: An array of map IDs to preload.
- `channel: string`: Can be used to track your usage.
- `solutionChannel: string`: Used by the Google Maps Platform to track adoption and usage of examples and solutions.
```

--------------------------------

### Usage with Custom HTML Elements

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Illustrates how to load libraries required for custom HTML elements like <gmp-map> and <gmp-advanced-marker>.

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

setOptions({ key: "your-api-key-here" });

// Start loading the libraries needed for custom elements.
importLibrary("maps"); // needed for <gmp-map>
importLibrary("marker"); // needed for <gmp-advanced-marker>

// Wait for gmp-map to be upgraded and interact with it.
await customElements.whenDefined("gmp-map");
const map = document.querySelector("gmp-map");
// ...
```

--------------------------------

### Usage with Callbacks

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Shows an alternative way to import libraries using Promise.then() for callback-based handling.

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

setOptions({ key: "your-api-key-here" });

importLibrary("maps").then(({ Map }) => {
  const map = new Map(mapEl, mapOptions);
});
```

--------------------------------

### Using Google Maps Custom Elements

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Demonstrates how to import the necessary libraries to use Google Maps custom HTML elements like <gmp-map>.

```javascript
import { importLibrary } from "@googlemaps/js-api-loader";

async function initCustomElements() {
  await importLibrary("map");
  await importLibrary("marker");
  // Now you can use <gmp-map> and <gmp-advanced-marker> in your HTML
}
```

--------------------------------

### Run Unit Tests

Source: https://github.com/googlemaps/js-api-loader/blob/main/CONTRIBUTING.md

Execute unit tests to ensure code changes meet quality standards. This command runs the primary test suite.

```bash
# Run unit tests.
npm test
```

--------------------------------

### Configure Google Maps API Loader

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Use `setOptions` to configure the loader with your API key and other preferences. This must be called once before `importLibrary`. Subsequent calls are ignored.

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

// Basic configuration with API key only
setOptions({ key: "YOUR_GOOGLE_MAPS_API_KEY" });

// Full configuration with all options
setOptions({
  key: "YOUR_GOOGLE_MAPS_API_KEY",
  v: "weekly",                    // API version: "weekly", "quarterly", or specific version
  language: "en",                 // Language for localization
  region: "US",                   // Region code for biasing
  libraries: ["places", "marker"], // Libraries to preload
  authReferrerPolicy: "origin",   // Referrer policy for API requests
  mapIds: ["map-id-1", "map-id-2"], // Map IDs to preload
  channel: "my-app-channel",      // Usage tracking channel
  solutionChannel: "GMP_demo"     // Solution tracking for examples
});

// Note: Calling setOptions() multiple times logs a warning and is ignored
setOptions({ key: "DIFFERENT_KEY" }); // Warning: options ignored
```

--------------------------------

### Format Code

Source: https://github.com/googlemaps/js-api-loader/blob/main/CONTRIBUTING.md

Use this command to format code according to project standards, potentially fixing linting issues automatically.

```bash
# Run format.
npm run format
```

--------------------------------

### Load Maps API with Callbacks

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Load the 'maps' library using a promise-based callback pattern with `importLibrary` to instantiate the Map class.

```javascript
// Or, if you prefer using callbacks instead of async/await:
importLibrary("maps").then(({ Map }) => {
  const map = new Map(mapEl, mapOptions);
});
```

--------------------------------

### Load Maps API with Async/Await

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Configure API loading options and then asynchronously import the 'maps' library to use the Map class. The imported libraries are also available in the global `google.maps` namespace.

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

// Set the options for loading the API.
setOptions({ key: "your-api-key-here" });

// Load the needed APIs.
// Note: once the returned promise is fulfilled, the libraries are also
//       available in the global `google.maps` namespace.
const { Map } = await importLibrary("maps");
const map = new Map(mapEl, mapOptions);

// Alternatively:
await importLibrary("maps");
const map = new google.maps.Map(mapEl, mapOptions);
```

--------------------------------

### Load Google Maps Library with Async/Await

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Use `importLibrary` with async/await to asynchronously load a specific Google Maps library. The first call to `importLibrary` triggers loading the API script. Destructure classes directly from the resolved promise.

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

setOptions({ key: "YOUR_GOOGLE_MAPS_API_KEY" });

// Load maps library and create a map using destructured classes
try {
  const { Map } = await importLibrary("maps");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 40.7128, lng: -74.0060 },  // New York City
    zoom: 12,
    mapId: "DEMO_MAP_ID"
  });
} catch (error) {
  console.error("Failed to load maps library:", error);
}
```

--------------------------------

### setOptions Configuration

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Configures the Google Maps JavaScript API loader with authentication credentials and optional settings. This function must be called once before any `importLibrary()` calls.

```APIDOC
## setOptions

### Description
Configures the Google Maps JavaScript API loader with authentication credentials and optional settings. This function must be called once before any `importLibrary()` calls. Subsequent calls are ignored with a warning. It accepts options including `key` (required API key), `v` (API version), `language`, `region`, `libraries` (for preloading), `authReferrerPolicy`, `mapIds`, `channel`, and `solutionChannel`.

### Method
`setOptions(options: object)`

### Parameters
#### Request Body
- **key** (string) - Required - Your Google Maps JavaScript API key.
- **v** (string) - Optional - The API version to load (e.g., "weekly", "quarterly", or a specific version).
- **language** (string) - Optional - The language for localization (e.g., "en").
- **region** (string) - Optional - The region code for biasing search results (e.g., "US").
- **libraries** (string[]) - Optional - An array of libraries to preload (e.g., ["places", "marker"]).
- **authReferrerPolicy** (string) - Optional - The referrer policy for API requests.
- **mapIds** (string[]) - Optional - An array of Map IDs to preload.
- **channel** (string) - Optional - A channel for usage tracking.
- **solutionChannel** (string) - Optional - A solution channel for example tracking.

### Request Example
```json
{
  "key": "YOUR_GOOGLE_MAPS_API_KEY",
  "v": "weekly",
  "language": "en",
  "region": "US",
  "libraries": ["places", "marker"],
  "authReferrerPolicy": "origin",
  "mapIds": ["map-id-1", "map-id-2"],
  "channel": "my-app-channel",
  "solutionChannel": "GMP_demo"
}
```

### Notes
Calling `setOptions()` multiple times logs a warning and subsequent calls are ignored.
```

--------------------------------

### Load Custom Elements Libraries

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Load libraries required for custom HTML elements like `<gmp-map>` and `<gmp-advanced-marker>`. Await `customElements.whenDefined()` to ensure the elements have upgraded.

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

// Set the options for loading the API.
setOptions({ key: "your-api-key-here" });

// Start loading the libraries needed for custom elements.
importLibrary("maps"); // needed for <gmp-map>
importLibrary("marker"); // needed for <gmp-advanced-marker>

// Wait for gmp-map to be upgraded and interact with it.
await customElements.whenDefined("gmp-map");
const map = document.querySelector("gmp-map");
// ...
```

--------------------------------

### Import Library

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Loads a specified library asynchronously. Returns a promise that resolves with the library object or rejects with an error if loading fails. The first call to this function also loads the Google Maps JavaScript API itself.

```APIDOC
## importLibrary(library: string): Promise

### Description
Loads the specified library. Returns a promise that resolves with the library object when the library is loaded. In case of an error while loading the library (might be due to poor network conditions and other unforseeable circumstances), the promise is rejected with an error.

Calling this function for the first time will trigger loading the Google Maps JavaScript API itself.

### Parameters
#### Path Parameters
- **library** (string) - Required - The name of the library to load. Available libraries include: `core`, `maps`, `maps3d`, `places`, `geocoding`, `routes`, `marker`, `geometry`, `elevation`, `streetView`, `journeySharing`, `visualization`, `airQuality`, `addressValidation`, `drawing` (deprecated).
```

--------------------------------

### Import Google Maps Library

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Import specific Google Maps libraries dynamically when needed. This function is available after calling setOptions.

```javascript
import { importLibrary } from "@googlemaps/js-api-loader";

async function initMap() {
  const map = await importLibrary("maps");
  const { Map } = map;
  new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}
```

--------------------------------

### Load Google Maps Custom Elements

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Import necessary libraries to register custom elements like <gmp-map> and <gmp-advanced-marker>. Use customElements.whenDefined() to ensure elements are ready before interaction.

```html
<!-- HTML with Google Maps custom elements -->
<gmp-map id="my-map" center="37.7749,-122.4194" zoom="12" map-id="DEMO_MAP_ID">
  <gmp-advanced-marker position="37.7749,-122.4194" title="Marker"></gmp-advanced-marker>
</gmp-map>
```

--------------------------------

### Load Multiple Google Maps Libraries in Parallel

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Load multiple Google Maps libraries concurrently using `Promise.all` and `importLibrary`. This is efficient for applications requiring several libraries.

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

setOptions({ key: "YOUR_GOOGLE_MAPS_API_KEY" });

// Load multiple libraries in parallel
const [mapsLib, markerLib, placesLib] = await Promise.all([
  importLibrary("maps"),
  importLibrary("marker"),
  importLibrary("places")
]);

// Use loaded libraries
const { Map } = mapsLib;
const { AdvancedMarkerElement } = markerLib;
const { PlacesService } = placesLib;

const map = new Map(document.getElementById("map"), {
  center: { lat: 37.7749, lng: -122.4194 },  // San Francisco
  zoom: 14,
  mapId: "DEMO_MAP_ID"
});

const marker = new AdvancedMarkerElement({
  map,
  position: { lat: 37.7749, lng: -122.4194 },
  title: "San Francisco"
});
```

--------------------------------

### Basic HTML and CSS for Map Display

Source: https://github.com/googlemaps/js-api-loader/blob/main/test-bundlers/vite-test/index.html

This snippet provides the fundamental HTML structure and CSS styling required to render a map element. Ensure the map container has defined dimensions for visibility.

```html
body, html { margin: 0; padding: 0; height: 100%; }
#map { width: 100%; height: 100%; }
```

--------------------------------

### importLibrary Asynchronous Loading

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

Asynchronously loads a specific Google Maps JavaScript API library and returns a promise resolving to the library object. The first call triggers loading the Google Maps API script.

```APIDOC
## importLibrary

### Description
Asynchronously loads a specific Google Maps JavaScript API library and returns a promise resolving to the library object. The first call triggers loading the Google Maps API script. Available libraries include: `core`, `maps`, `maps3d`, `places`, `geocoding`, `routes`, `marker`, `geometry`, `elevation`, `streetView`, `journeySharing`, `visualization`, `airQuality`, `addressValidation`, and `drawing` (deprecated).

### Method
`importLibrary(name: string): Promise<object>`

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the library to load (e.g., "maps", "places").

### Request Example (async/await)
```javascript
import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

setOptions({ key: "YOUR_GOOGLE_MAPS_API_KEY" });

try {
  const { Map } = await importLibrary("maps");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 40.7128, lng: -74.0060 },  // New York City
    zoom: 12,
    mapId: "DEMO_MAP_ID"
  });
} catch (error) {
  console.error("Failed to load maps library:", error);
}
```

### Request Example (Promise callbacks)
```javascript
importLibrary("maps").then(({ Map }) => {
  const map = new Map(document.getElementById("map"), {
    center: { lat: 51.5074, lng: -0.1278 },  // London
    zoom: 10
  });
}).catch((error) => {
  console.error("Error loading maps:", error);
});
```

### Response
#### Success Response (200)
- **library object** (object) - An object containing the exported classes and functions for the requested library.

### Response Example (for `maps` library)
```json
{
  "Map": "function",
  "MapTypeId": "function",
  "MapTypeControl": "function",
  // ... other Map related classes and functions
}
```
```

--------------------------------

### Migrate from v1.x Loader Class to v2.x Functional API

Source: https://context7.com/googlemaps/js-api-loader/llms.txt

The v1.x Loader class is deprecated and will throw an error in v2.x. Migrate to the functional API using setOptions() and importLibrary(). This shows how to replace constructor options and loader.load() calls.

```javascript
// v1.x (DEPRECATED - will throw error in v2.x)
// import { Loader } from "@googlemaps/js-api-loader";
// const loader = new Loader({ apiKey: "YOUR_API_KEY", version: "weekly", libraries: ["maps", "places"] });
// await loader.load();
// const map = new google.maps.Map(mapEl, options);
```

```javascript
// v2.x (Current API)
import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

// Replace constructor options with setOptions()
setOptions({
  key: "YOUR_API_KEY",        // was: apiKey
  v: "weekly",                // was: version
  libraries: ["places"]       // Optional: preload libraries
});

// Replace loader.load() with importLibrary()
const librariesPromise = Promise.all([
  importLibrary("maps"),
  importLibrary("places")
]);

// Option A: Use with async/await
await librariesPromise;
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 0, lng: 0 },
  zoom: 2
});

// Option B: Use destructured classes directly
const { Map } = await importLibrary("maps");
const { Autocomplete } = await importLibrary("places");

const map = new Map(document.getElementById("map"), {
  center: { lat: 0, lng: 0 },
  zoom: 2
});

// Option C: Use with callbacks (for compatibility)
librariesPromise.then(() => {
  initMap();
});

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 0, lng: 0 },
    zoom: 2
  });
}
```

--------------------------------

### setOptions Function

Source: https://github.com/googlemaps/js-api-loader/blob/main/README.md

Details the setOptions function used to configure the Google Maps JavaScript API loader. It should be called early and only once.

```typescript
setOptions(options: APIOptions): void
```

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

setOptions({ key: GOOGLE_MAPS_API_KEY });
await importLibrary("core");
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.