About
;
5 | }
6 |
--------------------------------------------------------------------------------
/website/src/examples/advanced-marker-interaction.mdx:
--------------------------------------------------------------------------------
1 | # Advanced Marker interaction
2 |
3 | import App from 'website-examples/advanced-marker-interaction/src/app';
4 |
5 | About
;
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["./src/**/*"],
4 | "exclude": ["./examples/**/*"],
5 | "compilerOptions": {
6 | "noEmit": false
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/examples/nextjs/src/app/globals.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | max-width: 100vw;
4 | overflow-x: hidden;
5 | }
6 |
7 | * {
8 | box-sizing: border-box;
9 | padding: 0;
10 | margin: 0;
11 | }
12 |
--------------------------------------------------------------------------------
/examples/global.d.ts:
--------------------------------------------------------------------------------
1 | export declare global {
2 | // const or let does not work in this case, it has to be var
3 | // eslint-disable-next-line no-var
4 | var GOOGLE_MAPS_API_KEY: string | undefined;
5 | }
6 |
--------------------------------------------------------------------------------
/examples/nextjs/src/app/about/page.module.css:
--------------------------------------------------------------------------------
1 | .page {
2 | width: 100%;
3 | height: 100%;
4 | background: aliceblue;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | }
9 |
--------------------------------------------------------------------------------
/examples/remix/app/styles/about.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | height: 100%;
4 | background: aliceblue;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | }
9 |
--------------------------------------------------------------------------------
/src/custom-elements-types/index.d.ts:
--------------------------------------------------------------------------------
1 | export type * from './marker';
2 | export type * from './maps3d';
3 | export type * from './places';
4 | export type * from './airQuality';
5 | export type * from './routes';
6 |
--------------------------------------------------------------------------------
/src/hooks/use-force-update.ts:
--------------------------------------------------------------------------------
1 | import {useReducer} from 'react';
2 |
3 | export function useForceUpdate(): () => void {
4 | const [, forceUpdate] = useReducer(x => x + 1, 0);
5 |
6 | return forceUpdate;
7 | }
8 |
--------------------------------------------------------------------------------
/website/src/examples/drawing.mdx:
--------------------------------------------------------------------------------
1 | # Drawing
2 |
3 | import BrowserOnly from '@docusaurus/BrowserOnly';
4 | import App from 'website-examples/drawing/src/app';
5 |
6 | Map loading...
;
5 | }
6 |
--------------------------------------------------------------------------------
/website/src/examples/autocomplete.mdx:
--------------------------------------------------------------------------------
1 | # Autocomplete
2 |
3 | import BrowserOnly from '@docusaurus/BrowserOnly';
4 | import App from 'website-examples/autocomplete/src/app';
5 |
6 |
12 |
13 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/__tests__/__snapshots__/advanced-marker.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2 |
3 | exports[`map and marker-library loaded anchoring with legacy API should warn when using anchorLeft/Top 1`] = `
4 | [
5 | [
6 | "AdvancedMarker: The anchorLeft and anchorTop props are only supported in Google Maps API version 3.62 and above. The current version is 3.61.0.",
7 | ],
8 | ]
9 | `;
10 |
11 | exports[`map and marker-library loaded anchoring with modern API anchorLeft/anchorTop should have precedence over anchorPoint 1`] = `
12 | [
13 | [
14 | "AdvancedMarker: the anchorPoint prop is ignored when anchorLeft and/or anchorTop are set.",
15 | ],
16 | ]
17 | `;
18 |
--------------------------------------------------------------------------------
/examples/nextjs/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import {APIProvider, Map} from '@vis.gl/react-google-maps';
4 |
5 | import styles from './page.module.css';
6 |
7 | export default function Home() {
8 | const API_KEY =
9 | (process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string) ??
10 | globalThis.GOOGLE_MAPS_API_KEY;
11 |
12 | return (
13 |
14 |
15 |
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/libraries/__mocks__/google-maps-api-loader.ts:
--------------------------------------------------------------------------------
1 | import type {GoogleMapsApiLoader as ActualLoader} from '../google-maps-api-loader';
2 |
3 | // FIXME: this should no longer be needed with the next version of @googlemaps/jest-mocks
4 | import {importLibraryMock} from './lib/import-library-mock';
5 | import {APILoadingStatus} from '../api-loading-status';
6 |
7 | export class GoogleMapsApiLoader {
8 | static loadingStatus: APILoadingStatus = APILoadingStatus.LOADED;
9 | static load: typeof ActualLoader.load = jest.fn(
10 | (_, onLoadingStatusChange) => {
11 | google.maps.importLibrary = importLibraryMock;
12 | onLoadingStatusChange(APILoadingStatus.LOADED);
13 | return Promise.resolve();
14 | }
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/.github/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Supported Versions
4 |
5 | Security updates are applied only to the latest release.
6 |
7 | ## Reporting a Vulnerability
8 |
9 | If you have discovered a security vulnerability in this project, please report it privately. **Do not disclose it as a public issue.** This gives us time to work with you to fix the issue before public exposure, reducing the chance that the exploit will be used before a patch is released.
10 |
11 | Please disclose it at [security advisory](https://github.com/visgl/react-google-maps/security/advisories/new).
12 |
13 | This project is maintained by a team of volunteers on a reasonable-effort basis. As such, please give us at least 90 days to work on a fix before public exposure.
14 |
--------------------------------------------------------------------------------
/examples/static-map/src/control-panel.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | function ControlPanel() {
4 | return (
5 |
6 |
22 | );
23 | }
24 |
25 | export default React.memo(ControlPanel);
26 |
--------------------------------------------------------------------------------
/src/custom-elements-types/airQuality.d.ts:
--------------------------------------------------------------------------------
1 | import 'google.maps';
2 | import type {CustomElement} from './utils';
3 |
4 | declare module 'react' {
5 | namespace JSX {
6 | interface IntrinsicElements {
7 | 'gmp-air-quality': CustomElement<
8 | {
9 | location?:
10 | | google.maps.LatLng
11 | | google.maps.LatLngLiteral
12 | | google.maps.LatLngAltitude
13 | | google.maps.LatLngAltitudeLiteral
14 | | string
15 | | null;
16 |
17 | requestedLanguage?: string | null;
18 |
19 | // html-attribute versions
20 | 'requested-language'?: string;
21 | },
22 | google.maps.airQuality.AirQualityElement
23 | >;
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/examples/vite.config.local.js:
--------------------------------------------------------------------------------
1 | import {defineConfig, loadEnv} from 'vite';
2 | import {resolve} from 'node:path';
3 |
4 | export default defineConfig(({mode}) => {
5 | const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), '');
6 |
7 | return {
8 | define: {
9 | 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
10 | },
11 | resolve: {
12 | alias: {
13 | '@vis.gl/react-google-maps/examples.js': resolve(
14 | '../../website/static/scripts/examples.js'
15 | ),
16 | '@vis.gl/react-google-maps/examples.css': resolve(
17 | '../../examples/examples.css'
18 | ),
19 | '@vis.gl/react-google-maps': resolve('../../src/index.ts')
20 | }
21 | }
22 | };
23 | });
24 |
--------------------------------------------------------------------------------
/scripts/update-examples.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | #rootDir=`readlink -f "$(dirname $0)/.."`
4 | rootDir="$(cd -P "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
5 |
6 | for d in `find ${rootDir}/examples -type d -depth 1` ; do
7 | # Skip the template directory
8 | if [ "$(basename $d)" = "_template" ]; then
9 | continue
10 | fi
11 |
12 | echo ">>> updating example '$(basename $d)'"
13 | (
14 | cd $d
15 |
16 | npm --no-progress --no-audit --no-fund --silent update
17 | to_update=`npm outdated --json | jq -r 'to_entries[] | select(.value.wanted != .value.latest) | .key'`
18 |
19 | for pkg in $to_update ; do
20 | echo " - update package ${pkg}"
21 | npm --no-progress --silent install $pkg@latest
22 | done
23 | )
24 |
25 | done
26 |
--------------------------------------------------------------------------------
/src/hooks/__tests__/__utils__/wait-for-mock-instance.ts:
--------------------------------------------------------------------------------
1 | import {waitFor} from '@testing-library/react';
2 | import {mockInstances} from '@googlemaps/jest-mocks';
3 |
4 | type Constructable = {
5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
6 | new (...args: any[]): unknown;
7 | };
8 |
9 | /**
10 | * Uses `waitFor` to detect when a specified @googlemaps/jest-mocks object has
11 | * been created and returns the last item from the list of mock objects
12 | * for that type.
13 | * @param ctor
14 | */
15 | export async function waitForMockInstanceStatic Map
7 |Static Map usage examples.
8 |
9 |
12 | Try on CodeSandbox ↗
13 |
14 |
15 |
18 | View Code ↗
19 |
20 |
21 |
6 |
25 | );
26 | }
27 |
28 | export default React.memo(ControlPanel);
29 |
--------------------------------------------------------------------------------
/examples/homepage-header/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 | Example Template
7 |8 | Add a brief description of the example here and update the link below 9 |
10 | 11 |
12 |
15 | Try on CodeSandbox ↗
16 |
17 |
18 |
21 | View Code ↗
22 |
23 |
24 |
6 |
25 | );
26 | }
27 |
28 | export default React.memo(ControlPanel);
29 |
--------------------------------------------------------------------------------
/examples/geometry/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 | Basic Map
7 |8 | The simplest example possible, just rendering a google map with some 9 | settings adjusted. 10 |
11 |
12 |
15 | Try on CodeSandbox ↗
16 |
17 |
18 |
21 | View Code ↗
22 |
23 |
24 |
22 |
25 |
26 |
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/examples/remix/app/root.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Links,
3 | Meta,
4 | Outlet,
5 | Scripts,
6 | ScrollRestoration
7 | } from '@remix-run/react';
8 |
9 | import './index.css';
10 | import Header from './components/header/header';
11 |
12 | export function Layout({children}: {children: React.ReactNode}) {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
23 |
26 |
6 |
26 | );
27 | }
28 |
29 | export default React.memo(ControlPanel);
30 |
--------------------------------------------------------------------------------
/examples/react-wrapper-migration/src/app.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {createRoot} from 'react-dom/client';
3 |
4 | // import {Wrapper} from '@googlemaps/react-wrapper';
5 | import {Wrapper} from './wrapper';
6 |
7 | const API_KEY =
8 | // @ts-ignore
9 | globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
10 |
11 | const MapsTest = () => {
12 | return Synchronized Maps
7 |8 | Shows how to use the controlled map component to synchronize multiple 9 | map instances. 10 |
11 | 12 |
13 |
16 | Try on CodeSandbox ↗
17 |
18 |
19 |
22 | View Code ↗
23 |
24 |
25 | Google Maps JavaScript API v{google.maps.version} Loaded.
; 13 | }; 14 | 15 | const App = () => ( 16 |Status: {status}
}> 17 |
6 |
25 | );
26 | }
27 |
28 | export default React.memo(ControlPanel);
29 |
--------------------------------------------------------------------------------
/docs/api-reference/components/pin.md:
--------------------------------------------------------------------------------
1 | # `Markers and InfoWindows
7 |8 | This example shows the different ways to add markers and infowindows to 9 | the map. 10 |
11 |
12 |
15 | Try on CodeSandbox ↗
16 |
17 |
18 |
21 | View Code ↗
22 |
23 |
24 |
25 |
27 | );
28 | }
29 |
30 | return (
31 |
6 |
26 | );
27 | }
28 |
29 | export default React.memo(ControlPanel);
30 |
--------------------------------------------------------------------------------
/examples/basic-map/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 | Routes API Rendering
7 |8 | This is an example to show how to retrieve a route from the new Routes 9 | API and visualize it with polylines and advanced markers. 10 |
11 | 12 |
13 |
16 | Try on CodeSandbox ↗
17 |
18 |
19 |
22 | View Code ↗
23 |
24 |
25 | {siteConfig.tagline}
24 |
6 |
26 | );
27 | }
28 |
29 | export default React.memo(ControlPanel);
30 |
--------------------------------------------------------------------------------
/src/libraries/create-static-maps-url/helpers.ts:
--------------------------------------------------------------------------------
1 | import {StaticMapsLocation} from './types';
2 |
3 | /**
4 | * Formats a location into a string representation suitable for Google Static Maps API.
5 | *
6 | * @param location - The location to format, can be either a string or an object with lat/lng properties
7 | * @returns A string representation of the location in the format "lat,lng" or the original string
8 | *
9 | * @example
10 | * // Returns "40.714728,-73.998672"
11 | * formatLocation({ lat: 40.714728, lng: -73.998672 })
12 | *
13 | * @example
14 | * // Returns "New York, NY"
15 | * formatLocation("New York, NY")
16 | */
17 | export function formatLocation(location: StaticMapsLocation): string {
18 | return typeof location === 'string'
19 | ? location
20 | : `${location.lat},${location.lng}`;
21 | }
22 |
23 | // Used for removing the leading pipe from the param string
24 | export function formatParam(string: string) {
25 | return string.slice(1);
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/map/auth-failure-message.tsx:
--------------------------------------------------------------------------------
1 | import React, {CSSProperties, FunctionComponent} from 'react';
2 |
3 | export const AuthFailureMessage: FunctionComponent = () => {
4 | const style: CSSProperties = {
5 | position: 'absolute',
6 | top: 0,
7 | left: 0,
8 | bottom: 0,
9 | right: 0,
10 | zIndex: 999,
11 | display: 'flex',
12 | flexFlow: 'column nowrap',
13 | textAlign: 'center',
14 | justifyContent: 'center',
15 | fontSize: '.8rem',
16 | color: 'rgba(0,0,0,0.6)',
17 | background: '#dddddd',
18 | padding: '1rem 1.5rem'
19 | };
20 |
21 | return (
22 | Drawing Tools Example
7 |8 | Shows how to use the drawing tools of the Maps JavaScript API and 9 | implements an undo/redo flow to show how to integrate the drawing 10 | manager and its events into the state of a react-application. 11 |
12 |
13 |
16 | Try on CodeSandbox ↗
17 |
18 |
19 |
22 | View Code ↗
23 |
24 |
25 |
23 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature-request.yml:
--------------------------------------------------------------------------------
1 | name: Feature Request
2 | description: Request for a new feature or enhancement
3 | title: "[Feat]"
4 | labels: feature
5 | body:
6 | - type: markdown
7 | attributes:
8 | value: |
9 | Tell us what you are using `@vis.gl/react-google-maps` for and how we can make it better.
10 |
11 | This project is maintained by volunteers and sponsoring companies. While we cannot promise a timeline for any specific feature, we try to prioritize those that will benefit the most users.
12 | - type: textarea
13 | attributes:
14 | label: Target Use Case
15 | description: How would this benefit you and other developers?
16 | validations:
17 | required: true
18 | - type: textarea
19 | attributes:
20 | label: Proposal
21 | description: How would this feature work? If it's a new API, use code samples to show how it will be used. If it's visual, link to an image that illustrate the desired effect.
22 | validations:
23 | required: true
24 |
--------------------------------------------------------------------------------
/examples/places-ui-kit-3d/src/components/overlay/overlay.css:
--------------------------------------------------------------------------------
1 | .overlay {
2 | position: absolute;
3 | left: 0;
4 | top: 0;
5 | width: 352px;
6 | height: 600px;
7 | max-height: calc(100vh - 48px);
8 | display: flex;
9 | flex-direction: column;
10 | gap: 8px;
11 | margin: 24px 30px;
12 | }
13 |
14 | .overlay-header {
15 | flex-shrink: 0;
16 | background: white;
17 | border-radius: 16px;
18 | overflow: hidden;
19 | }
20 |
21 | .overlay-header gmp-place-details-compact.custom {
22 | --gmp-mat-color-surface: #ffeffe;
23 | --gmp-mat-font-family: 'Bree Serif';
24 | --gmp-mat-color-on-surface: #ff0fa7;
25 | --gmp-mat-color-secondary-container: #ff0fa7;
26 | --gmp-mat-color-on-secondary-container: white;
27 | --gmp-mat-font-body-small: 500 0.75em / 1.3333333333 'Google Sans';
28 | }
29 |
30 | gmp-place-details-compact {
31 | border-radius: 0;
32 | }
33 |
34 | gmp-place-details-compact,
35 | gmp-place-search {
36 | color-scheme: light;
37 | border-color: transparent;
38 | }
39 |
--------------------------------------------------------------------------------
/examples/advanced-marker/icons/real-estate-icon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const RealEstateIcon = () => (
4 |
22 | );
23 |
--------------------------------------------------------------------------------
/examples/advanced-marker/src/types/types.ts:
--------------------------------------------------------------------------------
1 | export interface RealEstateListing {
2 | uuid: string;
3 | details: ListingDetails;
4 | images: string[];
5 | }
6 |
7 | export interface ListingDetails {
8 | property_type: string;
9 | property_address: string;
10 | property_bedrooms: number;
11 | property_bathrooms: number;
12 | property_square_feet: string;
13 | property_lot_size: string;
14 | property_price: string;
15 | property_year_built: number;
16 | property_adjective: string;
17 | property_material: string;
18 | property_garage: false;
19 | property_features: string[];
20 | property_accessibility: string;
21 | property_eco_features: string;
22 | property_has_view: false;
23 | local_amenities: string;
24 | transport_access: string;
25 | ambiance: string;
26 | latitude: number;
27 | longitude: number;
28 | img_weather: string;
29 | listing_title: string;
30 | listing_description: string;
31 | img_prompt_front: string;
32 | img_prompt_back: string;
33 | img_prompt_bedroom: string;
34 | }
35 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # Examples for @vis.gl/react-google-maps
2 |
3 | All of our examples are fully self-contained and can be run as independent
4 | applications, even when the entire directory is copied elsewhere. Just run
5 | `npm install` and `npm start` in any example directory to start it.
6 |
7 | During development of the library, the examples can also be started using
8 | `npm run start-local`, which will run the example with the checked-out
9 | source of the library instead of the package installed via npm.
10 |
11 | All examples also contain a link to a CodeSandbox environment where the
12 | example can be played with right away.
13 |
14 | When browsing the examples on GitHub, you can also just replace `github.com`
15 | with `githubbox.com` in your url while you're in an example directory to
16 | open it in a codesandbox environment.
17 |
18 | More information about how to write examples [can be found in our
19 | documentation][writing-examples].
20 |
21 | [writing-examples]: https://visgl.github.io/react-google-maps/docs/guides/writing-examples
22 |
--------------------------------------------------------------------------------
/examples/marker-clustering/src/tree-marker.tsx:
--------------------------------------------------------------------------------
1 | import {Tree} from './trees';
2 | import type {Marker} from '@googlemaps/markerclusterer';
3 | import React, {useCallback} from 'react';
4 | import {AdvancedMarker} from '@vis.gl/react-google-maps';
5 |
6 | export type TreeMarkerProps = {
7 | tree: Tree;
8 | onClick: (tree: Tree) => void;
9 | setMarkerRef: (marker: Marker | null, key: string) => void;
10 | };
11 |
12 | /**
13 | * Wrapper Component for an AdvancedMarker for a single tree.
14 | */
15 | export const TreeMarker = (props: TreeMarkerProps) => {
16 | const {tree, onClick, setMarkerRef} = props;
17 |
18 | const handleClick = useCallback(() => onClick(tree), [onClick, tree]);
19 | const ref = useCallback(
20 | (marker: google.maps.marker.AdvancedMarkerElement) =>
21 | setMarkerRef(marker, tree.key),
22 | [setMarkerRef, tree.key]
23 | );
24 |
25 | return (
26 | Error: AuthFailure
24 |
25 | A problem with your API key prevents the map from rendering correctly.
26 | Please make sure the value of the APIProvider.apiKey prop
27 | is correct. Check the error-message in the console for further details.
28 |
<AdvancedMarker />{' '}
27 | combined with an Infowindow.
28 |
14 |
29 | );
30 | }
31 |
32 | export default App;
33 |
34 | export function renderToDom(container: HTMLElement) {
35 | const root = createRoot(container);
36 |
37 | root.render(
38 |
15 |
17 |
18 |
20 |
21 |
23 |
24 |
26 |
27 |
6 |
31 | );
32 | }
33 |
34 | export default React.memo(ControlPanel);
35 |
--------------------------------------------------------------------------------
/examples/map-control/src/custom-zoom-control.tsx:
--------------------------------------------------------------------------------
1 | import {ControlPosition, MapControl} from '@vis.gl/react-google-maps';
2 | import React from 'react';
3 |
4 | type CustomZoomControlProps = {
5 | controlPosition: ControlPosition;
6 | zoom: number;
7 | onZoomChange: (zoom: number) => void;
8 | };
9 |
10 | export const CustomZoomControl = ({
11 | controlPosition,
12 | zoom,
13 | onZoomChange
14 | }: CustomZoomControlProps) => {
15 | return (
16 | Advanced Marker
7 |
8 | This example uses the <AdvancedMarker> component with
9 | custom hover and click states.
10 |
13 | By integrating content in the marker that would traditionally be shown 14 | in an info window, we can create a smooth and engaging user experience. 15 |
16 | 17 |
18 |
21 | Try on CodeSandbox ↗
22 |
23 |
24 |
27 | View Code ↗
28 |
29 |
30 |
25 |
26 | onZoomChange(ev.target.valueAsNumber)}
34 | />
35 |
36 |
6 |
30 | );
31 | }
32 |
33 | export default React.memo(ControlPanel);
34 |
--------------------------------------------------------------------------------
/examples/places-ui-kit-3d/src/components/popover/popover.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {memo} from 'react';
3 | import {PlaceDetails} from '../place-details/place-details';
4 |
5 | import './popover.css';
6 | import {PlaceLocationWithId} from '../../app';
7 |
8 | type PopoverProps = {
9 | place: PlaceLocationWithId | null;
10 | useCustomStyling: boolean;
11 | };
12 |
13 | const PopoverComponent = (props: PopoverProps) => {
14 | if (!props.place) return null;
15 |
16 | const locationString = props.place
17 | ? `${props.place.location.lat}, ${props.place.location.lng}`
18 | : '';
19 | return (
20 | deck.gl Interleaved Overlay Example
7 |
8 | An example demonstrating how an interleaved deck.gl overlay can be added
9 | to a {' component. (using the{' '}
10 | GoogleMapsOverlay from{' '}
11 |
12 | @deck.gl/google-maps
13 |
14 | ).
15 |
17 |
20 | Try on CodeSandbox ↗
21 |
22 |
23 |
26 | View Code ↗
27 |
28 |
29 |
6 |
31 | );
32 | }
33 |
34 | export default React.memo(ControlPanel);
35 |
--------------------------------------------------------------------------------
/examples/deckgl-overlay/src/deckgl-overlay.ts:
--------------------------------------------------------------------------------
1 | import {useMap} from '@vis.gl/react-google-maps';
2 | import {useEffect, useMemo} from 'react';
3 |
4 | import {GoogleMapsOverlay} from '@deck.gl/google-maps';
5 |
6 | import type {LayersList} from '@deck.gl/core';
7 |
8 | export type DeckglOverlayProps = {layers?: LayersList};
9 |
10 | /**
11 | * A very simple implementation of a component that renders a list of deck.gl layers
12 | * via the GoogleMapsOverlay into the Google Maps Platform’s Extended Component Library
7 |8 | Google Maps Platform’s Extended Component Library is a set of Web 9 | Components that helps developers build better maps faster, and with less 10 | effort. 11 |
12 |13 | Ultimately, these components make it easier to read, learn, customize, 14 | and maintain maps-related code. 15 |
16 | 17 |
18 |
21 | Try on CodeSandbox ↗
22 |
23 |
24 |
27 | View Code ↗
28 |
29 |
30 |