fix: rgm ac example (#1712)

googlemaps · May 3, 2024 · 6f12ad0 · 6f12ad0
1 parent 43e3b32
commit 6f12ad0
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 1 deletion.
diff --git a/samples/rgm-autocomplete/index.njk b/samples/rgm-autocomplete/index.njk
@@ -0,0 +1,18 @@
+<!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="app"></div>
+  <script type="module" src="./index"></script>
+{% endblock %}
+
diff --git a/samples/rgm-autocomplete/index.tsx b/samples/rgm-autocomplete/index.tsx
@@ -0,0 +1,119 @@
+/*
+ * Copyright 2024 Google LLC. All Rights Reserved.
+ *
+ * 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.
+ */
+// [START maps_rgm_autocomplete]
+import React, {useState, useEffect, useRef} from 'react';
+import {createRoot} from 'react-dom/client';
+import {
+    APIProvider, 
+    ControlPosition, 
+    MapControl, 
+    AdvancedMarker, 
+    Map, 
+    useMap, 
+    useMapsLibrary, 
+    useAdvancedMarkerRef,
+    AdvancedMarkerRef
+} from '@vis.gl/react-google-maps';
+
+const API_KEY =
+  globalThis.GOOGLE_MAPS_API_KEY ?? ("YOUR_API_KEY");
+
+const App = () => {
+    const [selectedPlace, setSelectedPlace] = 
+        useState<google.maps.places.PlaceResult | null>(null);
+    const [markerRef, marker] = useAdvancedMarkerRef();
+
+    return ( 
+        <APIProvider apiKey={API_KEY}>
+            <Map
+                mapId={'bf51a910020fa25a'}
+                defaultZoom={3}
+                defaultCenter={{ lat: 22.54992, lng: 0 }}
+                gestureHandling={'greedy'}
+                disableDefaultUI={true}
+            >
+                <AdvancedMarker ref={markerRef} position={null} />
+            </Map>
+            <MapControl position={ControlPosition.TOP}>
+                <div className="autocomplete-control">
+                    <PlaceAutocomplete onPlaceSelect={setSelectedPlace} />
+                </div>
+            </MapControl>
+            <MapHandler place={selectedPlace} marker={marker} />
+        </APIProvider>
+    );
+};
+
+interface MapHandlerProps {
+    place: google.maps.places.PlaceResult | null;
+    marker: google.maps.marker.AdvancedMarkerElement | null;
+  }
+
+const MapHandler = ({ place, marker }: MapHandlerProps) => {
+    const map = useMap();
+
+    useEffect(() => {
+      if (!map || !place || !marker) return;
+
+      if (place.geometry?.viewport) {
+        map.fitBounds(place.geometry?.viewport);
+      }
+      marker.position = place.geometry?.location;
+    }, [map, place, marker]);
+
+    return null;
+  };
+
+interface PlaceAutocompleteProps {
+    onPlaceSelect: (place: google.maps.places.PlaceResult | null) => void;
+}
+
+const PlaceAutocomplete = ({onPlaceSelect}: PlaceAutocompleteProps) => {
+    const [placeAutocomplete, setPlaceAutocomplete] =
+      useState<google.maps.places.Autocomplete | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const places = useMapsLibrary('places');
+
+    useEffect(() => {
+      if (!places || !inputRef.current) return;
+
+      const options = {
+        fields: ['geometry', 'name', 'formatted_address']
+      };
+
+      setPlaceAutocomplete(new places.Autocomplete(inputRef.current, options));
+    }, [places]);
+
+    useEffect(() => {
+      if (!placeAutocomplete) return;
+
+      placeAutocomplete.addListener('place_changed', () => {
+        onPlaceSelect(placeAutocomplete.getPlace());
+      });
+    }, [onPlaceSelect, placeAutocomplete]);
+
+    return (
+      <div className="autocomplete-container">
+        <input ref={inputRef} />
+      </div>
+    );
+  };
+
+const root = createRoot(document.getElementById('app')!);
+root.render(<App />);
+
+export default App;
+// [END maps_rgm_autocomplete]
diff --git a/samples/rgm-autocomplete/rgm-autocomplete.json b/samples/rgm-autocomplete/rgm-autocomplete.json
@@ -0,0 +1,15 @@
+{
+    "title": "React Google Maps - Autocomplete",
+    "libraries": [],
+    "version": "weekly",
+    "tag": "rgm_autocomplete",
+    "name": "rgm-autocomplete",
+    "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-autocomplete/style.scss b/samples/rgm-autocomplete/style.scss
@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* [START maps_rgm_autocomplete] */
+body {
+    margin: 0;
+    font-family: sans-serif;
+  }
+  #app {
+    width: 100vw;
+    height: 100vh;
+  }
+
+.autocomplete-container input,
+.autocomplete-control {
+  box-sizing: border-box;
+}
+
+.autocomplete-control {
+  margin: 24px;
+  background: #fff;
+}
+
+.autocomplete-container {
+  width: 300px;
+}
+.autocomplete-container input {
+  width: 100%;
+  height: 40px;
+  padding: 0 12px;
+  font-size: 18px;
+}
+
+.autocomplete-container .custom-list {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.autocomplete-container .custom-list-item {
+  padding: 8px;
+}
+
+.autocomplete-container .custom-list-item:hover {
+  background: lightgrey;
+  cursor: pointer;
+}
+/* [END maps_rgm_autocomplete] */
diff --git a/samples/rgm-basic-map/index.tsx b/samples/rgm-basic-map/index.tsx
@@ -16,7 +16,6 @@
 // [START maps_rgm_basic_map]
 import React from 'react';
 import {createRoot} from 'react-dom/client';
-
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 
 const API_KEY =