From 2fada552e0a5405cb8f8eb3c55be9a365b238ec6 Mon Sep 17 00:00:00 2001 From: googlemaps-bot Date: Sat, 4 May 2024 20:56:30 +0000 Subject: [PATCH] chore: update dist folder [skip ci] --- dist/index.html | 29 ++++ dist/samples/rgm-college-picker/app/.env | 1 + .../rgm-college-picker/app/.eslintrc.json | 13 ++ .../samples/rgm-college-picker/app/.gitignore | 4 + dist/samples/rgm-college-picker/app/README.md | 22 +++ dist/samples/rgm-college-picker/app/env.d.ts | 12 ++ .../samples/rgm-college-picker/app/index.html | 17 +++ dist/samples/rgm-college-picker/app/index.tsx | 136 ++++++++++++++++++ .../rgm-college-picker/app/package.json | 40 ++++++ dist/samples/rgm-college-picker/app/style.css | 62 ++++++++ .../rgm-college-picker/app/tsconfig.json | 16 +++ .../rgm-college-picker/app/vite.config.js | 11 ++ .../rgm-college-picker/docs/index.html | 19 +++ .../samples/rgm-college-picker/docs/index.jsx | 114 +++++++++++++++ .../samples/rgm-college-picker/docs/style.css | 64 +++++++++ .../rgm-college-picker/iframe/index.html | 17 +++ .../rgm-college-picker/jsfiddle/demo.css | 62 ++++++++ .../rgm-college-picker/jsfiddle/demo.details | 7 + .../rgm-college-picker/jsfiddle/demo.html | 17 +++ .../rgm-college-picker/jsfiddle/demo.jsx | 112 +++++++++++++++ .../rgm-college-picker/playground/index.html | 19 +++ .../rgm-college-picker/playground/index.tsx | 136 ++++++++++++++++++ .../playground/package.json | 8 ++ .../playground/playground.ts.json | 20 +++ .../rgm-college-picker/playground/style.css | 62 ++++++++ 25 files changed, 1020 insertions(+) create mode 100644 dist/samples/rgm-college-picker/app/.env create mode 100644 dist/samples/rgm-college-picker/app/.eslintrc.json create mode 100644 dist/samples/rgm-college-picker/app/.gitignore create mode 100644 dist/samples/rgm-college-picker/app/README.md create mode 100644 dist/samples/rgm-college-picker/app/env.d.ts create mode 100644 dist/samples/rgm-college-picker/app/index.html create mode 100644 dist/samples/rgm-college-picker/app/index.tsx create mode 100644 dist/samples/rgm-college-picker/app/package.json create mode 100644 dist/samples/rgm-college-picker/app/style.css create mode 100644 dist/samples/rgm-college-picker/app/tsconfig.json create mode 100644 dist/samples/rgm-college-picker/app/vite.config.js create mode 100644 dist/samples/rgm-college-picker/docs/index.html create mode 100644 dist/samples/rgm-college-picker/docs/index.jsx create mode 100644 dist/samples/rgm-college-picker/docs/style.css create mode 100644 dist/samples/rgm-college-picker/iframe/index.html create mode 100644 dist/samples/rgm-college-picker/jsfiddle/demo.css create mode 100644 dist/samples/rgm-college-picker/jsfiddle/demo.details create mode 100644 dist/samples/rgm-college-picker/jsfiddle/demo.html create mode 100644 dist/samples/rgm-college-picker/jsfiddle/demo.jsx create mode 100644 dist/samples/rgm-college-picker/playground/index.html create mode 100644 dist/samples/rgm-college-picker/playground/index.tsx create mode 100644 dist/samples/rgm-college-picker/playground/package.json create mode 100644 dist/samples/rgm-college-picker/playground/playground.ts.json create mode 100644 dist/samples/rgm-college-picker/playground/style.css diff --git a/dist/index.html b/dist/index.html index 2b02e569cd..fbb622998c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5299,6 +5299,35 @@

rgm-basic-map

+
+

rgm-college-picker

+
+ + + + Code +
+
+

split-map-panes

diff --git a/dist/samples/rgm-college-picker/app/.env b/dist/samples/rgm-college-picker/app/.env new file mode 100644 index 0000000000..d7474dcb8b --- /dev/null +++ b/dist/samples/rgm-college-picker/app/.env @@ -0,0 +1 @@ +VITE_GOOGLE_MAPS_API_KEY=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg \ No newline at end of file diff --git a/dist/samples/rgm-college-picker/app/.eslintrc.json b/dist/samples/rgm-college-picker/app/.eslintrc.json new file mode 100644 index 0000000000..841a372aa2 --- /dev/null +++ b/dist/samples/rgm-college-picker/app/.eslintrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} \ No newline at end of file diff --git a/dist/samples/rgm-college-picker/app/.gitignore b/dist/samples/rgm-college-picker/app/.gitignore new file mode 100644 index 0000000000..10ec766622 --- /dev/null +++ b/dist/samples/rgm-college-picker/app/.gitignore @@ -0,0 +1,4 @@ + +node_modules +dist +package-lock.json diff --git a/dist/samples/rgm-college-picker/app/README.md b/dist/samples/rgm-college-picker/app/README.md new file mode 100644 index 0000000000..fb60b47daf --- /dev/null +++ b/dist/samples/rgm-college-picker/app/README.md @@ -0,0 +1,22 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps/js-samples.This sample has the following dependencies: + +- @vis.gl/react-google-maps +- react +- react-dom +- vite + +## Setup + +```sh +npm i +npm start # development +npm run build # production +``` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps/js-samples/issues). diff --git a/dist/samples/rgm-college-picker/app/env.d.ts b/dist/samples/rgm-college-picker/app/env.d.ts new file mode 100644 index 0000000000..2d29a7a6be --- /dev/null +++ b/dist/samples/rgm-college-picker/app/env.d.ts @@ -0,0 +1,12 @@ +/// + +/** + * @external https://vitejs.dev/guide/env-and-mode.html + */ +interface ImportMetaEnv { + readonly VITE_GOOGLE_MAPS_API_KEY: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/dist/samples/rgm-college-picker/app/index.html b/dist/samples/rgm-college-picker/app/index.html new file mode 100644 index 0000000000..1218c641d9 --- /dev/null +++ b/dist/samples/rgm-college-picker/app/index.html @@ -0,0 +1,17 @@ + + + + + React Google Maps - College Picker Appd + + + + +
+ + + diff --git a/dist/samples/rgm-college-picker/app/index.tsx b/dist/samples/rgm-college-picker/app/index.tsx new file mode 100644 index 0000000000..a31ce6fb40 --- /dev/null +++ b/dist/samples/rgm-college-picker/app/index.tsx @@ -0,0 +1,136 @@ +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState, useRef } from 'react'; +import ReactDOM from 'react-dom/client'; +import { AdvancedMarker, Map, Pin, APIProvider } from '@vis.gl/react-google-maps'; +import * as GMPX from '@googlemaps/extended-component-library/react'; +import { OverlayLayout } from '@googlemaps/extended-component-library/overlay_layout.js'; +import { PlacePicker } from '@googlemaps/extended-component-library/place_picker.js'; + +/* Google Maps JS SDK typings, which are + * published as `@types/google.maps`. However, sometimes there is a delay + * in published typings. Components should use types from this file so we + * can centrally shim/unshim them when necessary. + */ + +export declare interface AuthorAttribution { + displayName: string; + photoURI: string|null; + uri: string|null; +} + +export declare type Photo = Omit& { + authorAttributions: AuthorAttribution[]; +}; + +export declare type Review = + Omit& { + authorAttribution: AuthorAttribution|null; +}; + +export declare interface Place extends Omit< + google.maps.places.Place, + 'photos'|'reviews'|'fetchFields'|'accessibilityOptions'> { + photos?: Photo[]; + reviews?: Review[]; + accessibilityOptions?: {hasWheelchairAccessibleEntrance: boolean|null}|null; + fetchFields: (options: google.maps.places.FetchFieldsRequest) => + Promise<{place: Place}>; +} + +const API_KEY = + globalThis.GOOGLE_MAPS_API_KEY ?? (import.meta.env.VITE_GOOGLE_MAPS_API_KEY!); +const DEFAULT_CENTER = { lat: -34.397, lng: 150.644 }; +const DEFAULT_ZOOM = 4; +const DEFAULT_ZOOM_WITH_LOCATION = 16; +/** + * Sample app that helps users locate a college on the map, with place info such + * as ratings, photos, and reviews displayed on the side. + */ +const App = () => { + const overlayLayoutRef = useRef(null); + const pickerRef = useRef(null); + const [college, setCollege] = useState(undefined); + + return ( +
+ + +
+ +
+ { + if (!pickerRef.current?.value) { + setCollege(undefined); + } else { + setCollege(pickerRef.current?.value); + } + }} + /> + + overlayLayoutRef.current?.showOverlay()} + > + See Reviews + + + Directions + + +
+
+ overlayLayoutRef.current?.hideOverlay()} + > + Close + + + + +
+ +
+
+ + {college?.location && ( + + + + )} + +
+ + +
+ ); +}; + +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render( + + + +); diff --git a/dist/samples/rgm-college-picker/app/package.json b/dist/samples/rgm-college-picker/app/package.json new file mode 100644 index 0000000000..8a9b7d4d01 --- /dev/null +++ b/dist/samples/rgm-college-picker/app/package.json @@ -0,0 +1,40 @@ +{ + "name": "rgm-college-picker", + "description": "Samples for Google Maps JavaScript", + "version": "2.1.4", + "keywords": [ + "google", + "javascript", + "maps", + "samples" + ], + "homepage": "https://github.com/googlemaps/js-samples#readme", + "bugs": { + "url": "https://github.com/googlemaps/js-samples/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/googlemaps/js-samples.git" + }, + "files": [], + "license": "Apache-2.0", + "scripts": { + "dev": "vite", + "start": "vite", + "build": "vite build --outDir dist --base './'", + "test": "tsc --no-emit", + "preview": "vite preview" + }, + "devDependencies": { + "@types/google.maps": "^3.53.5", + "typescript": "^5.2.2", + "vite": "^5.0.13" + }, + "private": true, + "dependencies": { + "@vis.gl/react-google-maps": "latest", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "vite": "^5.0.13" + } +} \ No newline at end of file diff --git a/dist/samples/rgm-college-picker/app/style.css b/dist/samples/rgm-college-picker/app/style.css new file mode 100644 index 0000000000..1718f77172 --- /dev/null +++ b/dist/samples/rgm-college-picker/app/style.css @@ -0,0 +1,62 @@ +/** + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +body { + margin: 0; + font-family: sans-serif; +} + +#root { + width: 100vw; + height: 100vh; +} + +.App { + --gmpx-color-surface: #f6f5ff; + --gmpx-color-on-primary: #f8e8ff; + --gmpx-color-on-surface: #000; + --gmpx-color-on-surface-variant: #636268; + --gmpx-color-primary: #8a5cf4; + --gmpx-fixed-panel-height-column-layout: 420px; + --gmpx-fixed-panel-width-row-layout: 340px; + background: var(--gmpx-color-surface); + inset: 0; + position: fixed; +} + +.MainContainer { + display: flex; + flex-direction: column; +} + +.SplitLayoutContainer { + height: 100%; +} + +.CollegePicker { + --gmpx-color-surface: #fff; + flex-grow: 1; + margin: 1rem; +} + +.CloseButton { + display: block; + margin: 1rem; +} + diff --git a/dist/samples/rgm-college-picker/app/tsconfig.json b/dist/samples/rgm-college-picker/app/tsconfig.json new file mode 100644 index 0000000000..b405998dad --- /dev/null +++ b/dist/samples/rgm-college-picker/app/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} \ No newline at end of file diff --git a/dist/samples/rgm-college-picker/app/vite.config.js b/dist/samples/rgm-college-picker/app/vite.config.js new file mode 100644 index 0000000000..d49e45cd7e --- /dev/null +++ b/dist/samples/rgm-college-picker/app/vite.config.js @@ -0,0 +1,11 @@ +import { defineConfig } from "vite"; + +// https://vitejs.dev/config/ +export default defineConfig({ + server: { + hmr: + process.env.CODESANDBOX_SSE || process.env.GITPOD_WORKSPACE_ID + ? 443 + : undefined, + }, +}); diff --git a/dist/samples/rgm-college-picker/docs/index.html b/dist/samples/rgm-college-picker/docs/index.html new file mode 100644 index 0000000000..15c953ffa1 --- /dev/null +++ b/dist/samples/rgm-college-picker/docs/index.html @@ -0,0 +1,19 @@ + + + + + + React Google Maps - College Picker Appd + + + + +
+ + + + diff --git a/dist/samples/rgm-college-picker/docs/index.jsx b/dist/samples/rgm-college-picker/docs/index.jsx new file mode 100644 index 0000000000..233a9ba03b --- /dev/null +++ b/dist/samples/rgm-college-picker/docs/index.jsx @@ -0,0 +1,114 @@ +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_rgm_college_picker] +import React, { useState, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import { + AdvancedMarker, + Map, + Pin, + APIProvider, +} from "@vis.gl/react-google-maps"; +import * as GMPX from "@googlemaps/extended-component-library/react"; +const API_KEY = globalThis.GOOGLE_MAPS_API_KEY ?? "YOUR_API_KEY"; +const DEFAULT_CENTER = { lat: -34.397, lng: 150.644 }; +const DEFAULT_ZOOM = 4; +const DEFAULT_ZOOM_WITH_LOCATION = 16; + +/** + * Sample app that helps users locate a college on the map, with place info such + * as ratings, photos, and reviews displayed on the side. + */ +const App = () => { + const overlayLayoutRef = useRef(null); + const pickerRef = useRef(null); + const [college, setCollege] = useState(undefined); + return ( +
+ + +
+ +
+ { + if (!pickerRef.current?.value) { + setCollege(undefined); + } else { + setCollege(pickerRef.current?.value); + } + }} + /> + + overlayLayoutRef.current?.showOverlay()} + > + See Reviews + + + Directions + + +
+
+ overlayLayoutRef.current?.hideOverlay()} + > + Close + + + + +
+ +
+
+ + {college?.location && ( + + + + )} + +
+ + +
+ ); +}; + +const root = ReactDOM.createRoot(document.getElementById("root")); + +root.render( + + + , +); +// [END maps_rgm_college_picker] diff --git a/dist/samples/rgm-college-picker/docs/style.css b/dist/samples/rgm-college-picker/docs/style.css new file mode 100644 index 0000000000..a840256293 --- /dev/null +++ b/dist/samples/rgm-college-picker/docs/style.css @@ -0,0 +1,64 @@ +/** + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_rgm_college_picker] */ +body { + margin: 0; + font-family: sans-serif; +} + +#root { + width: 100vw; + height: 100vh; +} + +.App { + --gmpx-color-surface: #f6f5ff; + --gmpx-color-on-primary: #f8e8ff; + --gmpx-color-on-surface: #000; + --gmpx-color-on-surface-variant: #636268; + --gmpx-color-primary: #8a5cf4; + --gmpx-fixed-panel-height-column-layout: 420px; + --gmpx-fixed-panel-width-row-layout: 340px; + background: var(--gmpx-color-surface); + inset: 0; + position: fixed; +} + +.MainContainer { + display: flex; + flex-direction: column; +} + +.SplitLayoutContainer { + height: 100%; +} + +.CollegePicker { + --gmpx-color-surface: #fff; + flex-grow: 1; + margin: 1rem; +} + +.CloseButton { + display: block; + margin: 1rem; +} + +/* [END maps_rgm_college_picker] */ \ No newline at end of file diff --git a/dist/samples/rgm-college-picker/iframe/index.html b/dist/samples/rgm-college-picker/iframe/index.html new file mode 100644 index 0000000000..d50f807100 --- /dev/null +++ b/dist/samples/rgm-college-picker/iframe/index.html @@ -0,0 +1,17 @@ + + + + + React Google Maps - College Picker Appd + + + + + +
+ + diff --git a/dist/samples/rgm-college-picker/jsfiddle/demo.css b/dist/samples/rgm-college-picker/jsfiddle/demo.css new file mode 100644 index 0000000000..1718f77172 --- /dev/null +++ b/dist/samples/rgm-college-picker/jsfiddle/demo.css @@ -0,0 +1,62 @@ +/** + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +body { + margin: 0; + font-family: sans-serif; +} + +#root { + width: 100vw; + height: 100vh; +} + +.App { + --gmpx-color-surface: #f6f5ff; + --gmpx-color-on-primary: #f8e8ff; + --gmpx-color-on-surface: #000; + --gmpx-color-on-surface-variant: #636268; + --gmpx-color-primary: #8a5cf4; + --gmpx-fixed-panel-height-column-layout: 420px; + --gmpx-fixed-panel-width-row-layout: 340px; + background: var(--gmpx-color-surface); + inset: 0; + position: fixed; +} + +.MainContainer { + display: flex; + flex-direction: column; +} + +.SplitLayoutContainer { + height: 100%; +} + +.CollegePicker { + --gmpx-color-surface: #fff; + flex-grow: 1; + margin: 1rem; +} + +.CloseButton { + display: block; + margin: 1rem; +} + diff --git a/dist/samples/rgm-college-picker/jsfiddle/demo.details b/dist/samples/rgm-college-picker/jsfiddle/demo.details new file mode 100644 index 0000000000..c0597a96fa --- /dev/null +++ b/dist/samples/rgm-college-picker/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: React Google Maps - College Picker Appd +authors: + - Justin Poehnelt +tags: + - google maps +load_type: h +description: Sample code for Google Maps Platform JavaScript API diff --git a/dist/samples/rgm-college-picker/jsfiddle/demo.html b/dist/samples/rgm-college-picker/jsfiddle/demo.html new file mode 100644 index 0000000000..1218c641d9 --- /dev/null +++ b/dist/samples/rgm-college-picker/jsfiddle/demo.html @@ -0,0 +1,17 @@ + + + + + React Google Maps - College Picker Appd + + + + +
+ + + diff --git a/dist/samples/rgm-college-picker/jsfiddle/demo.jsx b/dist/samples/rgm-college-picker/jsfiddle/demo.jsx new file mode 100644 index 0000000000..2ec4c4230b --- /dev/null +++ b/dist/samples/rgm-college-picker/jsfiddle/demo.jsx @@ -0,0 +1,112 @@ +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +import React, { useState, useRef } from "https://cdn.skypack.dev/react@^18.2.0"; +import ReactDOM from "https://cdn.skypack.dev/react-dom@^18.2.0/client"; +import { + AdvancedMarker, + Map, + Pin, + APIProvider, +} from "https://cdn.skypack.dev/@vis.gl/react-google-maps@latest"; +import * as GMPX from "https://cdn.skypack.dev/@googlemaps/extended-component-library@^0.6.10/react"; +const API_KEY = globalThis.GOOGLE_MAPS_API_KEY ?? "YOUR_API_KEY"; +const DEFAULT_CENTER = { lat: -34.397, lng: 150.644 }; +const DEFAULT_ZOOM = 4; +const DEFAULT_ZOOM_WITH_LOCATION = 16; + +/** + * Sample app that helps users locate a college on the map, with place info such + * as ratings, photos, and reviews displayed on the side. + */ +const App = () => { + const overlayLayoutRef = useRef(null); + const pickerRef = useRef(null); + const [college, setCollege] = useState(undefined); + return ( +
+ + +
+ +
+ { + if (!pickerRef.current?.value) { + setCollege(undefined); + } else { + setCollege(pickerRef.current?.value); + } + }} + /> + + overlayLayoutRef.current?.showOverlay()} + > + See Reviews + + + Directions + + +
+
+ overlayLayoutRef.current?.hideOverlay()} + > + Close + + + + +
+ +
+
+ + {college?.location && ( + + + + )} + +
+ + +
+ ); +}; + +const root = ReactDOM.createRoot(document.getElementById("root")); + +root.render( + + + , +); diff --git a/dist/samples/rgm-college-picker/playground/index.html b/dist/samples/rgm-college-picker/playground/index.html new file mode 100644 index 0000000000..ba7179d431 --- /dev/null +++ b/dist/samples/rgm-college-picker/playground/index.html @@ -0,0 +1,19 @@ + + + React Google Maps - College Picker Appd + + + + + + + + +
+ + + diff --git a/dist/samples/rgm-college-picker/playground/index.tsx b/dist/samples/rgm-college-picker/playground/index.tsx new file mode 100644 index 0000000000..e575708f4d --- /dev/null +++ b/dist/samples/rgm-college-picker/playground/index.tsx @@ -0,0 +1,136 @@ +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState, useRef } from 'react'; +import ReactDOM from 'react-dom/client'; +import { AdvancedMarker, Map, Pin, APIProvider } from '@vis.gl/react-google-maps'; +import * as GMPX from '@googlemaps/extended-component-library/react'; +import { OverlayLayout } from '@googlemaps/extended-component-library/overlay_layout.js'; +import { PlacePicker } from '@googlemaps/extended-component-library/place_picker.js'; + +/* Google Maps JS SDK typings, which are + * published as `@types/google.maps`. However, sometimes there is a delay + * in published typings. Components should use types from this file so we + * can centrally shim/unshim them when necessary. + */ + +export declare interface AuthorAttribution { + displayName: string; + photoURI: string|null; + uri: string|null; +} + +export declare type Photo = Omit& { + authorAttributions: AuthorAttribution[]; +}; + +export declare type Review = + Omit& { + authorAttribution: AuthorAttribution|null; +}; + +export declare interface Place extends Omit< + google.maps.places.Place, + 'photos'|'reviews'|'fetchFields'|'accessibilityOptions'> { + photos?: Photo[]; + reviews?: Review[]; + accessibilityOptions?: {hasWheelchairAccessibleEntrance: boolean|null}|null; + fetchFields: (options: google.maps.places.FetchFieldsRequest) => + Promise<{place: Place}>; +} + +const API_KEY = + globalThis.GOOGLE_MAPS_API_KEY ?? ("YOUR_API_KEY"); +const DEFAULT_CENTER = { lat: -34.397, lng: 150.644 }; +const DEFAULT_ZOOM = 4; +const DEFAULT_ZOOM_WITH_LOCATION = 16; +/** + * Sample app that helps users locate a college on the map, with place info such + * as ratings, photos, and reviews displayed on the side. + */ +const App = () => { + const overlayLayoutRef = useRef(null); + const pickerRef = useRef(null); + const [college, setCollege] = useState(undefined); + + return ( +
+ + +
+ +
+ { + if (!pickerRef.current?.value) { + setCollege(undefined); + } else { + setCollege(pickerRef.current?.value); + } + }} + /> + + overlayLayoutRef.current?.showOverlay()} + > + See Reviews + + + Directions + + +
+
+ overlayLayoutRef.current?.hideOverlay()} + > + Close + + + + +
+ +
+
+ + {college?.location && ( + + + + )} + +
+ + +
+ ); +}; + +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render( + + + +); diff --git a/dist/samples/rgm-college-picker/playground/package.json b/dist/samples/rgm-college-picker/playground/package.json new file mode 100644 index 0000000000..486b962654 --- /dev/null +++ b/dist/samples/rgm-college-picker/playground/package.json @@ -0,0 +1,8 @@ +{ + "dependencies": { + "@vis.gl/react-google-maps": "latest", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "vite": "^5.0.13" + } +} \ No newline at end of file diff --git a/dist/samples/rgm-college-picker/playground/playground.ts.json b/dist/samples/rgm-college-picker/playground/playground.ts.json new file mode 100644 index 0000000000..4926d7f154 --- /dev/null +++ b/dist/samples/rgm-college-picker/playground/playground.ts.json @@ -0,0 +1,20 @@ +{ + "files": { + "index.ts": { + "label": "TypeScript" + }, + "style.css": { + "label": "CSS" + }, + "index.html": { + "label": "HTML" + }, + "../../../types/google-maps/index.d.ts": { + "label": "@types/google.maps", + "hidden": true + }, + "package.json": { + "label": "Dependencies" + } + } +} \ No newline at end of file diff --git a/dist/samples/rgm-college-picker/playground/style.css b/dist/samples/rgm-college-picker/playground/style.css new file mode 100644 index 0000000000..1718f77172 --- /dev/null +++ b/dist/samples/rgm-college-picker/playground/style.css @@ -0,0 +1,62 @@ +/** + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +body { + margin: 0; + font-family: sans-serif; +} + +#root { + width: 100vw; + height: 100vh; +} + +.App { + --gmpx-color-surface: #f6f5ff; + --gmpx-color-on-primary: #f8e8ff; + --gmpx-color-on-surface: #000; + --gmpx-color-on-surface-variant: #636268; + --gmpx-color-primary: #8a5cf4; + --gmpx-fixed-panel-height-column-layout: 420px; + --gmpx-fixed-panel-width-row-layout: 340px; + background: var(--gmpx-color-surface); + inset: 0; + position: fixed; +} + +.MainContainer { + display: flex; + flex-direction: column; +} + +.SplitLayoutContainer { + height: 100%; +} + +.CollegePicker { + --gmpx-color-surface: #fff; + flex-grow: 1; + margin: 1rem; +} + +.CloseButton { + display: block; + margin: 1rem; +} +