diff --git a/package-lock.json b/package-lock.json index e0972ef160..a262b7f3bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.3.0", "@fortawesome/free-solid-svg-icons": "^6.5.1", + "@googlemaps/extended-component-library": "^0.6.10", "@googlemaps/js-api-loader": "^1.15.1", "@googlemaps/markerclusterer": "2.3.1", "@googlemaps/react-wrapper": "^1.1.35", @@ -1337,6 +1338,53 @@ "node": ">=6" } }, + "node_modules/@googlemaps/extended-component-library": { + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/@googlemaps/extended-component-library/-/extended-component-library-0.6.10.tgz", + "integrity": "sha512-mm7eSDoZ17ONQLCF60BimNyKs/3LsnZMA/bM2DWKtEjP7HhYnCbJiK3hQgtIaYTUZmO/a12Wtrd4ESlHkFRwZw==", + "dependencies": { + "@lit/context": "^1.0.0", + "@lit/react": "^1.0.0", + "lit": "^3.0.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@googlemaps/extended-component-library/node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, + "node_modules/@googlemaps/extended-component-library/node_modules/lit": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz", + "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==", + "dependencies": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.0.4", + "lit-html": "^3.1.2" + } + }, + "node_modules/@googlemaps/extended-component-library/node_modules/lit-element": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz", + "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.1.2" + } + }, + "node_modules/@googlemaps/extended-component-library/node_modules/lit-html": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz", + "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/@googlemaps/js-api-loader": { "version": "1.16.2", "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz", @@ -2299,9 +2347,33 @@ "dev": true }, "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz", + "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==" + }, + "node_modules/@lit/context": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz", - "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==" + "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.1.tgz", + "integrity": "sha512-q/Rw7oWSJidUP43f/RUPwqZ6f5VlY8HzinTWxL/gW1Hvm2S5q2hZvV+qM8WFcC+oLNNknc3JKsd5TwxLk1hbdg==", + "dependencies": { + "@lit/reactive-element": "^1.6.2 || ^2.0.0" + } + }, + "node_modules/@lit/context/node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, + "node_modules/@lit/react": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.5.tgz", + "integrity": "sha512-RSHhrcuSMa4vzhqiTenzXvtQ6QDq3hSPsnHHO3jaPmmvVFeoNNm4DHoQ0zLdKAUvY3wP3tTENSUf7xpyVfrDEA==", + "peerDependencies": { + "@types/react": "17 || 18" + } }, "node_modules/@lit/reactive-element": { "version": "1.6.1", @@ -4050,14 +4122,12 @@ "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/react": { "version": "18.2.21", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -4076,8 +4146,7 @@ "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", - "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", - "dev": true + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" }, "node_modules/@types/semver": { "version": "7.3.13", @@ -5560,8 +5629,7 @@ "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/debug": { "version": "4.3.4", diff --git a/package.json b/package.json index 33f74abd73..dd463832ec 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.3.0", "@fortawesome/free-solid-svg-icons": "^6.5.1", - "@vis.gl/react-google-maps": "latest", + "@googlemaps/extended-component-library": "^0.6.10", "@googlemaps/js-api-loader": "^1.15.1", "@googlemaps/markerclusterer": "2.3.1", "@googlemaps/react-wrapper": "^1.1.35", @@ -94,6 +94,7 @@ "@material/mwc-button": "^0.27.0", "@material/select": "^14.0.0", "@tweenjs/tween.js": "^21.0.0", + "@vis.gl/react-google-maps": "latest", "clsx": "^2.1.1", "fast-equals": "^3.0.3", "playground-elements": "^0.18.1", diff --git a/samples/rgm-college-picker/index.njk b/samples/rgm-college-picker/index.njk new file mode 100644 index 0000000000..ae13d5bfed --- /dev/null +++ b/samples/rgm-college-picker/index.njk @@ -0,0 +1,21 @@ + + + +{% extends '../../src/_includes/layout.njk'%} + +{% block polyfill %}{% endblock %} + +{% block resources %} + +{% endblock %} + +{% block api %}{% endblock %} + +{% block html %} +
+ +{% endblock %} diff --git a/samples/rgm-college-picker/index.tsx b/samples/rgm-college-picker/index.tsx new file mode 100644 index 0000000000..3fb9241f0a --- /dev/null +++ b/samples/rgm-college-picker/index.tsx @@ -0,0 +1,138 @@ +/** + * @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'; +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( + + + +); +// [END maps_rgm_college_picker] diff --git a/samples/rgm-college-picker/rgm-college-picker.json b/samples/rgm-college-picker/rgm-college-picker.json new file mode 100644 index 0000000000..e1bb42a47a --- /dev/null +++ b/samples/rgm-college-picker/rgm-college-picker.json @@ -0,0 +1,15 @@ +{ + "title": "React Google Maps - College Picker Appd", + "libraries": [], + "version": "weekly", + "tag": "rgm_college_picker", + "name": "rgm-college-picker", + "pagination": { + "data": "mode", + "size": 1, + "alias": "mode" + }, + "tsx": true, + "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}", + "dependencies": ["@vis.gl/react-google-maps", "react", "react-dom", "vite"] + } \ No newline at end of file diff --git a/samples/rgm-college-picker/style.scss b/samples/rgm-college-picker/style.scss new file mode 100644 index 0000000000..1bd2ca34c6 --- /dev/null +++ b/samples/rgm-college-picker/style.scss @@ -0,0 +1,65 @@ +/** + * 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/tsconfig.json b/tsconfig.json index c7465eb9be..0c32e636cd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "strict": true, "noImplicitAny": false, "lib": ["esnext", "es6", "dom", "dom.iterable"], - "moduleResolution": "Node", + "moduleResolution": "Bundler", "jsx": "preserve", "esModuleInterop": true, "experimentalDecorators": true