### Install Dependencies and Start Development Server

Source: https://github.com/visgl/react-google-maps/blob/main/examples/map-3d-routes/README.md

Install project dependencies and then start the local development server.

```shell
npm install
npm run start-local
```

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

### Start Local Development Server

Source: https://github.com/visgl/react-google-maps/blob/main/examples/deckgl-heatmap/README.md

Run the example with the local library using npm.

```shell
npm run start-local
```

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

### Install Dependencies (npm)

Source: https://github.com/visgl/react-google-maps/blob/main/examples/extended-component-library/README.md

This command installs all the necessary project dependencies using npm. It should be run from the example directory before starting the development server.

```shell
npm install
```

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

### Install and Run Local Development Server

Source: https://github.com/visgl/react-google-maps/blob/main/examples/worker-marker-clustering/README.md

Instructions for setting up the project locally. This includes installing npm dependencies, configuring the Google Maps API key as an environment variable, and starting the development server.

```bash
# Install dependencies
npm install

# Set your Google Maps API key
export GOOGLE_MAPS_API_KEY=your_key_here

# Start development server (with local library)
npm run start-local

# Or start standalone
npm start
```

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

### Start Local Development Server (npm)

Source: https://github.com/visgl/react-google-maps/blob/main/examples/extended-component-library/README.md

This command starts the local development server for the example, allowing you to test changes with the local library. This is the primary command for local development.

```shell
npm run start-local
```

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

### Navigate to Example Directory

Source: https://github.com/visgl/react-google-maps/blob/main/examples/map-3d-routes-widget/README.md

Change the current directory to the map-3d-route example folder.

```shell
cd examples/map-3d-route
```

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

### Navigate to Example Directory

Source: https://github.com/visgl/react-google-maps/blob/main/examples/map-3d-routes/README.md

Change the current directory to the map-3d-routes example folder.

```shell
cd examples/map-3d-routes
```

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

### Run Regular Development Server

Source: https://github.com/visgl/react-google-maps/blob/main/examples/remix/README.md

This command starts the regular development server, which uses the installed version of @vis.gl/react-google-maps.

```bash
npm run start
```

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

### Install Dependencies

Source: https://github.com/visgl/react-google-maps/blob/main/examples/deckgl-heatmap/README.md

Install project dependencies using npm.

```shell
npm install
```

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

### Run Local Development Server

Source: https://github.com/visgl/react-google-maps/blob/main/examples/remix/README.md

Use this command to start a local development server that utilizes the local library files for @vis.gl/react-google-maps.

```bash
npm run start-local
```

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

### Install with yarn

Source: https://github.com/visgl/react-google-maps/blob/main/README.md

Installation instructions using yarn.

```sh
yarn add @vis.gl/react-google-maps
```

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

### Basic Map Component Initialization

Source: https://github.com/visgl/react-google-maps/blob/main/examples/basic-map/index.html

Demonstrates the standard setup for rendering a full-screen Google Map component using the @vis.gl/react-google-maps library.

```APIDOC
## Initialization

### Description
This setup initializes the Google Map component within a React application, ensuring the container occupies the full viewport.

### Method
N/A (Component Lifecycle)

### Endpoint
@vis.gl/react-google-maps

### Request Example
```javascript
import '@vis.gl/react-google-maps/examples.css';
import '@vis.gl/react-google-maps/examples.js';
import {renderToDom} from './src/app';

renderToDom(document.querySelector('#app'));
```

### Response
#### Success Response (200)
- **status** (string) - Map component successfully mounted to the DOM.
```

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

### Set Google Maps API Key

Source: https://github.com/visgl/react-google-maps/blob/main/examples/remix/README.md

Configure your Google Maps Platform API key by creating a .env file in the example directory. This key is required to run the examples locally.

```shell
GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
```

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

### Install with npm

Source: https://github.com/visgl/react-google-maps/blob/main/README.md

Installation instructions using npm.

```sh
npm install @vis.gl/react-google-maps
```

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

### Generate Example Thumbnail Path - React

Source: https://github.com/visgl/react-google-maps/blob/main/website/src/examples/index.mdx

This snippet shows how to use the ExamplesIndex component to generate thumbnail URLs for map examples. It utilizes a utility function `toKebapCase` to format labels into kebab-case for image paths. The `getThumbnail` prop takes an item and returns a formatted image URL.

```javascript
import {ExamplesIndex} from '../components';
import {toKebapCase} from '../utils/to-kebap-case';

<ExamplesIndex
  getThumbnail={item =>
    `/images/examples/${item.docId || toKebapCase(item.label)}.jpg`
  }
/>
```

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

### Initialize and Run Development Environment

Source: https://github.com/visgl/react-google-maps/blob/main/examples/basic-map/README.md

Commands to install project dependencies and launch the local development server. Use npm run start-local to integrate with the local library build.

```shell
npm install
npm run start-local
```

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

### Import App Component for Markers and InfoWindows

Source: https://github.com/visgl/react-google-maps/blob/main/website/src/examples/markers-and-infowindows.mdx

Import the main App component from the example source. This component likely orchestrates the map, markers, and info window functionalities.

```javascript
import App from 'website-examples/markers-and-infowindows/src/app';
```

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

### Display a basic InfoWindow

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/info-window.md

Shows a minimal implementation of the InfoWindow component rendered on a map. This example displays content at a fixed position.

```tsx
const MapWithInfoWindow = () => {
  return (
    <Map {...mapProps}>
      <InfoWindow position={infoWindowPosition}>
        The content of the info window is here.
      </InfoWindow>
    </Map>
  );
};
```

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

### HTML Structure and Imports

Source: https://github.com/visgl/react-google-maps/blob/main/examples/deckgl-heatmap/index.html

Sets up the basic HTML for the application and imports necessary CSS and JavaScript files for React Google Maps and the example itself. It then calls a render function to initialize the map.

```html
body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
}
```

```javascript
import '@vis.gl/react-google-maps/examples.css';
import '@vis.gl/react-google-maps/examples.js';

import {renderToDom} from './src/app';

renderToDom(document.querySelector('#app'));
```

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

### useMapsLibrary Example

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/hooks/use-maps-library.md

Example of how to use the `useMapsLibrary` hook to load the 'places' library and use it to create a new Place object.

```tsx
const MyComponent = () => {
  const map = useMap();
  const placesLib = useMapsLibrary('places');

  useEffect(() => {
    if (!placesLib || !map) return;

    const place = new placesLib.Place({ id: 'ChIJC8HakaIRkFQRiOgkgdHmqkk' }); // PLACE_ID
    // ...
  }, [placesLib, map]);

  // ...
};

// Make sure you have wrapped the component tree with the APIProvider
const App = () => (
  <APIProvider apiKey={/* ... */}>
    {/* ... */}
    <MyComponent />
  </APIProvider>
);
```

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

### Map3D Component Usage

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/map-3d.md

Basic example of how to integrate the Map3D component within an APIProvider.

```APIDOC
## Map3D Component

React component to render a [3D Map][gmp-map-3d] using the Google Maps JavaScript API. It must be placed as a child inside an [`<APIProvider>`][api-provider] container.

### Basic Usage

```tsx
import {APIProvider, Map3D} from '@vis.gl/react-google-maps';

const App = () => (
  <APIProvider apiKey={process.env.GOOGLE_MAPS_API_KEY}>
    <Map3D
      mode="SATELLITE"
      defaultCenter={{lat: 37.7749, lng: -122.4194, altitude: 1000}}
      defaultRange={5000}
      defaultHeading={0}
      defaultTilt={45}
    />
  </APIProvider>
);
```

### Styling

By default, the Map3D component uses a default style of `width: 100%; height: 100%;` for the container element. If this does not work, adjust styling using the [`style`](#style-reactcssproperties) and [`className`](#classname-string) props.
```

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

### Import App Component for Advanced Marker Interaction

Source: https://github.com/visgl/react-google-maps/blob/main/website/src/examples/advanced-marker-interaction.mdx

Imports the main App component from the advanced marker interaction example. Ensure the 'website-examples' package is correctly set up.

```jsx
import App from 'website-examples/advanced-marker-interaction/src/app';
```

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

### Basic CSS Styling for Google Maps Example

Source: https://github.com/visgl/react-google-maps/blob/main/examples/directions/index.html

This CSS code provides basic styling for the Google Maps example page. It sets up global styles for the body and app container, and specific styles for headings, paragraphs, and the directions panel.

```css
body { font-size: 16px; margin: 0; font-family: sans-serif; }
#app { width: 100vw; height: 100vh; }
h1 { padding: 0.25rem 0px; font-size: 1.5rem; }
h2 { padding: 0.25rem 0px; font-size: 1.25rem; }
p { font-size: 0.8rem; padding: 0px; padding-bottom: 0.25rem; margin: 0px; }
.directions { position: absolute; width: 275px; top: 0px; right: 0px; padding: 1.25rem; padding-top: 0px; margin: 0.25rem; color: white; background-color: #2d3748; border-radius: 0.25rem; }
ul { padding: 0px; padding-left: 1.5rem; margin: 0px; }
li button { color: #f6e05e; background: none; border: none; cursor: pointer; }
```

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

### Basic Usage Example

Source: https://github.com/visgl/react-google-maps/blob/main/README.md

A basic example demonstrating how to use APIProvider, Map, and AdvancedMarker components to render a map with a marker.

```tsx
import {AdvancedMarker, APIProvider, Map} from '@vis.gl/react-google-maps';

function App() {
  const position = {lat: 53.54992, lng: 10.00678};

  return (
    <APIProvider apiKey={'YOUR API KEY HERE'}>
      <Map defaultCenter={position} defaultZoom={10} mapId="DEMO_MAP_ID">
        <AdvancedMarker position={position} />
      </Map>
    </APIProvider>
  );
}

export default App;
```

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

### Custom Hook for PlacesService Initialization

Source: https://github.com/visgl/react-google-maps/blob/main/docs/guides/interacting-with-google-maps-api.md

This example shows how to create a custom hook, `usePlacesService`, that encapsulates the logic for loading the 'places' library and initializing the `PlacesService`. This promotes reusability and keeps components cleaner by abstracting away the library loading and service instantiation details.

```tsx
function usePlacesService() {
  const map = useMap();
  const placesLibrary = useMapsLibrary('places');
  const [placesService, setPlacesService] = useState(null);

  useEffect(() => {
    if (!placesLibrary || !map) return;

    setPlacesService(new placesLibrary.PlacesService(map));
  }, [placesLibrary, map]);

  return placesService;
}

const MyComponent = () => {
  const placesService = usePlacesService();

  useEffect(() => {
    if (!placesService) return;

    // ... use placesService ...
  }, [placesService]);

  return <></>;
};
```

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

### Import and Render 3D Map Routes Widget

Source: https://github.com/visgl/react-google-maps/blob/main/website/src/examples/map-3d-routes-widget.mdx

Import the App component and render it to display the 3D map routes widget. Ensure the necessary dependencies are installed.

```javascript
import App from 'website-examples/map-3d-routes-widget/src/app';

<App />
```

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

### AdvancedMarker Usage Examples

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/advanced-marker.md

Demonstrates how to use the AdvancedMarker component with default styling, a customized Pin component, and fully custom HTML content. Ensure the map uses cloud-based styling.

```tsx
import {AdvancedMarker} from './advanced-marker';

<Map {...mapProps}>
  {/* red default marker */}
  <AdvancedMarker position={{lat: 29.5, lng: -81.2}} />

  {/* customized green marker */}
  <AdvancedMarker position={{lat: 29.5, lng: -81.2}}>
    <Pin
      background={'#0f9d58'}
      borderColor={'#006425'}
      glyphColor={'#60d98f'}
    />
  </AdvancedMarker>

  {/* fully customized marker */}
  <AdvancedMarker position={{lat: 29.5, lng: -81.2}}>
    <img src={markerImage} width={32} height={32} />
  </AdvancedMarker>
</Map>
```

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

### Create and Render Static Map Image with React

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/static-map.md

Demonstrates how to use the createStaticMapsUrl utility to generate a Google Static Maps URL and then render it using the StaticMap React component. It highlights the use of required parameters like apiKey, width, and height, and optional parameters such as center and zoom. The example also includes a placeholder for server-side URL signing.

```tsx
import {StaticMap, createStaticMapsUrl} from '@vis.gl/react-google-maps';

const App = () => {
  let staticMapsUrl = createStaticMapsUrl({
    apiKey: 'YOUR API KEY',
    width: 512,
    height: 512,
    center: {lat: 53.555570296010295, lng: 10.008892744638956},
    zoom: 15
  });

  // Recommended url-signing when in a server environment.
  staticMapsUrl = someServerSigningCode(
    staticMapsUrl,
    process.env.MAPS_SIGNING_SECRET
  );

  return <StaticMap url={staticMapsUrl} />;
};

```

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

### Configure Google Maps API Key

Source: https://github.com/visgl/react-google-maps/blob/main/examples/advanced-marker-interaction/README.md

This snippet shows how to set the Google Maps Platform API key using an environment variable. It is essential for running the example locally and requires creating a .env file with the API key.

```shell
GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
```

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

### Initialize APIProvider in React

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/api-provider.md

Demonstrates the basic implementation of the APIProvider component by wrapping the application with the required apiKey prop.

```tsx
import React from 'react';
import {APIProvider} from '@vis.gl/react-google-maps';

const App = () => (
  <APIProvider apiKey={'Your API key here'}>
    {/* ... any components ... */}
  </APIProvider>
);
export default App;
```

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

### Initialize React Google Maps Application

Source: https://github.com/visgl/react-google-maps/blob/main/examples/advanced-marker-interaction/index.html

Sets up the React Google Maps application by importing necessary CSS and JS files and rendering the main application component to the DOM. It targets a specific DOM element with the ID 'app' for mounting.

```javascript
import '@vis.gl/react-google-maps/examples.css';
import '@vis.gl/react-google-maps/examples.js';
import {renderToDom} from './src/app';

renderToDom(document.querySelector('#app'));
```

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

### Initialize Map with Basic Camera Props

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/map.md

Demonstrates how to initialize a map using controlled props for center and zoom, which are essential for rendering the map view.

```typescript
import {Map} from '@vis.gl/react-google-maps';

const MyMap = () => (
  <Map
    center={{lat: 51.5074, lng: -0.1278}}
    zoom={10}
    style={{width: '100%', height: '500px'}}
  />
);
```

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

### Initialize React Google Maps Application

Source: https://github.com/visgl/react-google-maps/blob/main/examples/autocomplete/index.html

This snippet demonstrates the entry point for a React Google Maps application. It imports necessary styles and scripts, then renders the application component into the specified DOM element.

```javascript
import '@vis.gl/react-google-maps/examples.css';
import '@vis.gl/react-google-maps/examples.js';
import {renderToDom} from './src/app';

renderToDom(document.querySelector('#app'));
```

```css
body { margin: 0; font-family: sans-serif; }
#app { width: 100vw; height: 100vh; }
```

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

### Manage Popover Visibility

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/popover.md

Examples of controlling Popover visibility using the open prop and handling light dismiss behavior.

```tsx
const [isOpen, setIsOpen] = useState(false);

<Popover position={position} open={isOpen}>
  Content here
</Popover>;
```

```tsx
<Popover position={position} open={true} lightDismissDisabled>
  This popover won't close on outside click
</Popover>
```

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

### Defining Polygon Paths and Holes

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/polygon.md

Examples of defining simple paths and complex polygons with holes using the paths prop.

```tsx
// Simple polygon
<Polygon paths={[
    {lat: 53.54, lng: 10.0}, 
    {lat: 53.55, lng: 10.02}, 
    {lat: 53.56, lng: 10.01}
]}/>

// Polygon with hole
<Polygon paths={[
    // Outer path
    [{lat: 53.54, lng: 10.0}, {lat: 53.55, lng: 10.02}, {
        lat: 53.56,
        lng: 10.01
    }],
    // Inner path (hole)
    [{lat: 53.545, lng: 10.005}, {lat: 53.55, lng: 10.015}, {
        lat: 53.555,
        lng: 10.008
    }]
]}/>
```

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

### Customize Marker3D Content

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/marker-3d.md

Provides examples of customizing marker appearance using the Pin component, standard HTML images, or custom SVG elements.

```tsx
// Using Pin component
<Marker3D position={{lat: 37.7749, lng: -122.4194}}>
  <Pin background="#22ccff" borderColor="#1e89a1" glyphColor="white" />
</Marker3D>;

// Using Custom Images
<Marker3D position={{lat: 37.7749, lng: -122.4194}}>
  <img src="/marker-icon.png" width={32} height={32} alt="marker" />
</Marker3D>

// Using Custom SVG
<Marker3D position={{lat: 37.7749, lng: -122.4194}}>
  <svg width="40" height="40" viewBox="0 0 40 40">
    <circle cx="20" cy="20" r="18" fill="#FF6B35" stroke="#fff" strokeWidth="3" />
    <text x="20" y="26" textAnchor="middle" fill="white" fontSize="16">A</text>
  </svg>
</Marker3D>
```

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

### AdvancedMarker Anchor Point Customization

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/advanced-marker.md

Shows how to customize the anchor point of an AdvancedMarker when using custom HTML content. This example positions the anchor at the top-left corner.

```tsx
import {AdvancedMarker, AdvancedMarkerAnchorPoint} from '@vis.gl/react-google-maps';

<AdvancedMarker position={...} anchorPoint={AdvancedMarkerAnchorPoint.TOP_LEFT}>
    ...
</AdvancedMarker>
```

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

### Next.js (App Router) Integration

Source: https://github.com/visgl/react-google-maps/blob/main/docs/guides/ssr-and-frameworks.md

Example of using react-google-maps within a Next.js application with the App Router. The 'use client;' directive is crucial for client-side rendering.

```APIDOC
## Next.js (App Router) Integration

### Description
This example demonstrates how to integrate the `react-google-maps` library into a Next.js application using the App Router. It highlights the use of the `'use client;'` directive to ensure the component is rendered exclusively on the client side, which is necessary because the Google Maps API does not support server-side rendering.

### Method
Client-side rendering

### Endpoint
N/A (Client-side component)

### Parameters
N/A

### Request Example
```tsx
'use client';

import {APIProvider, Map} from '@vis.gl/react-google-maps';
import styles from './MyMap.module.css'; // Assuming you have CSS module for styling

export default function MyMap() {
  return (
    <div className={styles.container}>
      <APIProvider apiKey={'YOUR_API_KEY'}> // Replace with your actual API key
        <Map
          mapId={'bf51a910020fa25a'}
          defaultZoom={5}
          defaultCenter={{lat: 53, lng: 10}}
          gestureHandling={'greedy'}
          disableDefaultUI={true}
        />
      </APIProvider>
    </div>
  );
}
```

### Response
N/A (Client-side rendering)

### Error Handling
Ensure the `apiKey` is correctly provided. The Google Maps API may return errors if the key is invalid or missing.
```

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

### Initialize React Google Maps Application

Source: https://github.com/visgl/react-google-maps/blob/main/examples/homepage-header/index.html

This snippet demonstrates how to import the required styles and scripts, and mount the React application to a specific DOM element. It assumes the existence of an element with the ID 'app' in the HTML document.

```css
body { margin: 0; font-family: sans-serif; } #app { width: 100vw; height: 100vh; }
```

```javascript
import '@vis.gl/react-google-maps/examples.css';
import '@vis.gl/react-google-maps/examples.js';
import {renderToDom} from './src/app';

renderToDom(document.querySelector('#app'));
```

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

### Popover Positioning with LatLngLiteral

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/popover.md

Provides examples of setting the 'position' prop for a Popover using google.maps.LatLngLiteral for 2D coordinates and google.maps.LatLngAltitudeLiteral for 3D coordinates including altitude.

```tsx
// 2D position
<Popover position={{lat: 37.7749, lng: -122.4194}} open={true}>
  Content here
</Popover>

// 3D position with altitude
<Popover position={{lat: 37.7749, lng: -122.4194, altitude: 50}} open={true}>
  Content here
</Popover>

```

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

### Using an Existing Polyline Instance

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/polyline.md

Shows how to use the `polyline` prop to apply component props to an existing `google.maps.Polyline` instance.

```APIDOC
## Using an Existing Polyline Instance

### Description
This example demonstrates how to leverage the `polyline` prop to integrate an existing `google.maps.Polyline` object with the React component. This allows for applying React component props and event handlers to a pre-existing map object.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
import React from 'react';
import {APIProvider, Map, Polyline} from '@vis.gl/react-google-maps';

const App = () => {
  const polylineInstance = new google.maps.Polyline();

  return (
    <APIProvider apiKey={'Your API key here'}>
      <Map zoom={12} center={{lat: 53.54992, lng: 10.00678}}>
        {/* Minimal usage */}
        <Polyline polyline={polylineInstance}/>

        {/* Apply additional props */}
        <Polyline
            polyline={polylineInstance}
            strokeColor={'#ff0000'}
            strokeWeight={3}
            onClick={(e) => console.log('clicked')}
        />
      </Map>
    </APIProvider>
  );
};

export default App;
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A
```

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

### APIProvider Configuration

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/api-provider.md

Details on configuring the APIProvider, including the fetchAppCheckToken function and lifecycle event callbacks.

```APIDOC
## APIProvider Configuration

### Description
The APIProvider component initializes the Google Maps JavaScript API. It supports Firebase App Check for security and provides lifecycle hooks for tracking load status.

### Parameters
#### Props
- **fetchAppCheckToken** (function) - Optional - A function that returns a Promise resolving to a Firebase App Check token.
- **onLoad** (function) - Optional - Callback triggered when the Maps JavaScript API finishes loading.
- **onError** (function) - Optional - Callback triggered if an error occurs during API loading.

### Request Example
```tsx
<APIProvider 
  apiKey="YOUR_API_KEY" 
  fetchAppCheckToken={fetchTokenFunction} 
  onLoad={() => console.log('Maps loaded')}
/>
```

### Response
#### Success Response (200)
- **Context** (object) - Provides internal state for map instances and loading status to child components.
```

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

### Using the Geocoding Library

Source: https://github.com/visgl/react-google-maps/blob/main/README.md

Example of using the `useMapsLibrary` hook to load and utilize the geocoding library for geocoding operations.

```tsx
import {useMapsLibrary} from '@vis.gl/react-google-maps';

const MyComponent = () => {
  // useMapsLibrary loads the geocoding library, it might initially return `null`
  // if the library hasn't been loaded. Once loaded, it will return the library
  // object as it would be returned by `await google.maps.importLibrary()`
  const geocodingLib = useMapsLibrary('geocoding');
  const geocoder = useMemo(
    () => geocodingLib && new geocodingLib.Geocoder(),
    [geocodingLib]
  );

  useEffect(() => {
    if (!geocoder) return;

    // now you can use `geocoder.geocode(...)` here
  }, [geocoder]);

  return <></>;
};

const App = () => {
  return (
    <APIProvider apiKey={'YOUR API KEY HERE'}>
      <MyComponent />
    </APIProvider>
  );
};

```

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

### Marker3D Basic Usage

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/marker-3d.md

Demonstrates the basic usage of the Marker3D component within a Map3D context.

```APIDOC
## Marker3D Basic Usage

### Description
This snippet shows how to add a basic 3D marker to a `Map3D` component.

### Method
Component Usage

### Endpoint
N/A (Component within React)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
import {APIProvider, Map3D, Marker3D} from '@vis.gl/react-google-maps';

const App = () => (
  <APIProvider apiKey={'Your API key here'}>
    <Map3D
      defaultCenter={{lat: 37.7749, lng: -122.4194, altitude: 500}}
      defaultRange={2000}
      defaultTilt={60}>
      <Marker3D position={{lat: 37.7749, lng: -122.4194}} />
    </Map3D>
  </APIProvider>
);
```

### Response
#### Success Response (200)
N/A (Component renders on map)

#### Response Example
N/A
```

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

### Synchronize Rectangle State with onBoundsChanged

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/rectangle.md

Example of using the onBoundsChanged callback to keep the component state in sync with the user's manual edits or drag operations on the map.

```tsx
const [bounds, setBounds] = useState({
  north: 53.56,
  south: 53.54,
  east: 10.03,
  west: 9.99
});

<Rectangle
  bounds={bounds}
  editable
  draggable
  onBoundsChanged={b => {
    if (!b) return;

    const ne = b.getNorthEast();
    const sw = b.getSouthWest();
    setBounds({
      north: ne.lat(),
      east: ne.lng(),
      south: sw.lat(),
      west: sw.lng()
    });
  }}
/>;
```

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

### Initialize React Google Maps Application

Source: https://github.com/visgl/react-google-maps/blob/main/examples/marker-clustering/index.html

This snippet demonstrates how to import the required styles and scripts for the @vis.gl/react-google-maps library and mount the application to the DOM. It assumes a root element with the ID 'app' exists in the HTML.

```javascript
import '@vis.gl/react-google-maps/examples.css';
import '@vis.gl/react-google-maps/examples.js';
import {renderToDom} from './src/app';

renderToDom(document.querySelector('#app'));
```

```html
<div id="app"></div>
```

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

### InfoWindow Header Content Example

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/info-window.md

Demonstrates how to set custom content for the InfoWindow header using JSX. This feature requires the beta channel of the Maps JavaScript API.

```tsx
<InfoWindow headerContent={<h3>InfoWindow Header Content</h3>}>
  This is the content of the InfoWindow.
</InfoWindow>
```

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

### Initialize Marker3D in Map3D

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/marker-3d.md

Demonstrates how to add a basic Marker3D component as a child of a Map3D component within an APIProvider context.

```tsx
import {APIProvider, Map3D, Marker3D} from '@vis.gl/react-google-maps';

const App = () => (
  <APIProvider apiKey={'Your API key here'}>
    <Map3D
      defaultCenter={{lat: 37.7749, lng: -122.4194, altitude: 500}}
      defaultRange={2000}
      defaultTilt={60}>
      <Marker3D position={{lat: 37.7749, lng: -122.4194}} />
    </Map3D>
  </APIProvider>
);
```

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

### Accessing Map3D instance with useMap3D

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/hooks/use-map-3d.md

Demonstrates basic usage of the useMap3D hook to retrieve a map instance within an APIProvider context. This example shows how to use the hook in a child component.

```tsx
const MyComponent = () => {
  const map3d = useMap3D();

  useEffect(() => {
    if (!map3d) return;

    // do something with the map3d instance
  }, [map3d]);

  return <>...</>;
};

const App = () => {
  return (
    <APIProvider apiKey={API_KEY}>
      <Map3D
        defaultCenter={{lat: 37.7749, lng: -122.4194, altitude: 500}}
        defaultRange={2000}>
        <MyComponent />
      </Map3D>
    </APIProvider>
  );
};
```

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

### Render a Basic Rectangle on a Map

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/rectangle.md

Demonstrates how to initialize the APIProvider and Map components to render a static Rectangle with defined bounds and styling properties.

```tsx
import React from 'react';
import {APIProvider, Map, Rectangle} from '@vis.gl/react-google-maps';

const App = () => (
  <APIProvider apiKey={'Your API key here'}>
    <Map zoom={12} center={{lat: 53.54992, lng: 10.00678}}>
      <Rectangle
        bounds={{
          north: 53.56,
          south: 53.54,
          east: 10.03,
          west: 9.99
        }}
        fillColor={'#0088ff'}
        fillOpacity={0.2}
        strokeColor={'#0088ff'}
        strokeWeight={2}
      />
    </Map>
  </APIProvider>
);

export default App;
```

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

### Uncontrolled Google Map Initialization in React

Source: https://github.com/visgl/react-google-maps/blob/main/docs/api-reference/components/map.md

This example shows how to initialize a Google Map with uncontrolled camera parameters using `defaultCenter` and `defaultZoom`. These default values are only applied on the initial render.

```tsx
const UncontrolledMap = () => {
  return <Map defaultCenter={{lat: 40.7, lng: -74}} defaultZoom={12}></Map>;
};
```

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

### Initialize a 3D Map with a Marker

Source: https://github.com/visgl/react-google-maps/blob/main/docs/whats-new.md

Shows the implementation of the Map3D component to display a photorealistic 3D map, including a Marker3D positioned within the 3D environment.

```tsx
<Map3D
  defaultCenter={{lat: 37.7749, lng: -122.4194, altitude: 1000}}
  defaultRange={5000}
  defaultTilt={45}>
  <Marker3D position={{lat: 37.7749, lng: -122.4194, altitude: 0}} />
</Map3D>
```