feat: rgm college picker, mod res to bundler, dep on react-google-maps (

#1714) * feat: rgm college picker, mod res to bundler, dep on react-google-maps * added region tags
googlemaps · May 4, 2024 · 556a93b · 556a93b
1 parent 2f9807c
commit 556a93b
Show file tree

Hide file tree

Showing 7 changed files with 319 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,14 +86,15 @@
   "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",
     "@googlemaps/typescript-guards": "^2.0.3",
     "@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
@@ -0,0 +1,21 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+
+{% extends '../../src/_includes/layout.njk'%}
+
+{% block polyfill %}{% endblock %}
+
+{% block resources %}
+  <link rel="stylesheet" type="text/css" href="./style.css">
+{% endblock %}
+
+{% block api %}{% endblock %}
+
+{% block html %}
+    <div id="root"></div>
+    <script type="module" src="./index"></script>
+{% endblock %}
diff --git a/samples/rgm-college-picker/index.tsx 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<google.maps.places.Photo, 'attributions'>& {
+  authorAttributions: AuthorAttribution[];
+};
+
+export declare type Review =
+    Omit<google.maps.places.Review, 'author'|'authorURI'|'authorPhotoURI'>& {
+  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<OverlayLayout>(null);
+  const pickerRef = useRef<PlacePicker>(null);
+  const [college, setCollege] = useState<Place | undefined>(undefined);
+
+  return (
+    <div className="App">
+      <APIProvider apiKey={API_KEY} version='beta' >
+        <GMPX.SplitLayout rowReverse rowLayoutMinWidth={700}>
+          <div className="SplitLayoutContainer" slot="fixed">
+            <GMPX.OverlayLayout ref={overlayLayoutRef}>
+              <div className="MainContainer" slot="main">
+                <GMPX.PlacePicker
+                  className="CollegePicker"
+                  ref={pickerRef}
+                  forMap="gmap"
+                  country={['us', 'ca']}
+                  type="university"
+                  placeholder="Enter a college in the US or Canada"
+                  onPlaceChange={() => {
+                    if (!pickerRef.current?.value) {
+                      setCollege(undefined);
+                    } else {
+                      setCollege(pickerRef.current?.value);
+                    }
+                  }}
+                />
+                <GMPX.PlaceOverview
+                  size="large"
+                  place={college}
+                  googleLogoAlreadyDisplayed
+                >
+                  <GMPX.IconButton
+                    slot="action"
+                    variant="filled"
+                    onClick={() => overlayLayoutRef.current?.showOverlay()}
+                  >
+                    See Reviews
+                  </GMPX.IconButton>
+                  <GMPX.PlaceDirectionsButton slot="action" variant="filled">
+                    Directions
+                  </GMPX.PlaceDirectionsButton>
+                </GMPX.PlaceOverview>
+              </div>
+              <div slot="overlay">
+                <GMPX.IconButton
+                  className="CloseButton"
+                  onClick={() => overlayLayoutRef.current?.hideOverlay()}
+                >
+                  Close
+                </GMPX.IconButton>
+                <GMPX.PlaceDataProvider place={college}>
+                  <GMPX.PlaceReviews />
+                </GMPX.PlaceDataProvider>
+              </div>
+            </GMPX.OverlayLayout>
+          </div>
+          <div className="SplitLayoutContainer" slot="main">
+            <Map
+              id="gmap"
+              mapId="8c732c82e4ec29d9"
+              center={college?.location ?? DEFAULT_CENTER}
+              zoom={college?.location ? DEFAULT_ZOOM_WITH_LOCATION : DEFAULT_ZOOM}
+            >
+              {college?.location && (
+                <AdvancedMarker position={college?.location}>
+                  <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
+                </AdvancedMarker>
+              )}
+            </Map>
+          </div>
+        </GMPX.SplitLayout>
+      </APIProvider>
+    </div>
+  );
+};
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+// [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
@@ -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"]
+  }
diff --git a/samples/rgm-college-picker/style.scss 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] */
+
+
+
+