From 601756eed3a05c514153e70605d5f31bbd3cf9a9 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 2 May 2024 11:35:58 -0700 Subject: [PATCH 001/117] docs: Adds region tags and scale attribute (#1710) * Fix: Adds region tags and scale attribute Adds region tags for documentation; adds scale 1.5. * Update index.ts --- samples/advanced-markers-accessibility/index.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/samples/advanced-markers-accessibility/index.ts b/samples/advanced-markers-accessibility/index.ts index 7acaaacae4..c560200ee5 100644 --- a/samples/advanced-markers-accessibility/index.ts +++ b/samples/advanced-markers-accessibility/index.ts @@ -49,15 +49,17 @@ async function initMap() { tourStops.forEach(({position, title}, i) => { const pin = new PinElement({ glyph: `${i + 1}`, + scale: 1.5, }); - + // [START maps_advanced_markers_accessibility_marker] const marker = new AdvancedMarkerElement({ position, map, title: `${i + 1}. ${title}`, content: pin.element, }); - + // [END maps_advanced_markers_accessibility_marker] + // [START maps_advanced_markers_accessibility_event_listener] // Add a click listener for each marker, and set up the info window. marker.addListener('click', ({ domEvent, latLng }) => { const { target } = domEvent; @@ -65,6 +67,7 @@ async function initMap() { infoWindow.setContent(marker.title); infoWindow.open(marker.map, marker); }); + // [END maps_advanced_markers_accessibility_event_listener] }); } From 43e3b3234e96ccbbf7e474e2165af127aedb00fb Mon Sep 17 00:00:00 2001 From: googlemaps-bot Date: Thu, 2 May 2024 18:37:46 +0000 Subject: [PATCH 002/117] chore: update dist folder [skip ci] --- dist/samples/advanced-markers-accessibility/app/index.ts | 3 +-- dist/samples/advanced-markers-accessibility/docs/index.js | 5 +++++ .../samples/advanced-markers-accessibility/iframe/index.html | 2 +- dist/samples/advanced-markers-accessibility/jsfiddle/demo.js | 1 + .../advanced-markers-accessibility/playground/index.ts | 3 +-- 5 files changed, 9 insertions(+), 5 deletions(-) diff --git a/dist/samples/advanced-markers-accessibility/app/index.ts b/dist/samples/advanced-markers-accessibility/app/index.ts index dfa117f783..6d51cbcdb0 100644 --- a/dist/samples/advanced-markers-accessibility/app/index.ts +++ b/dist/samples/advanced-markers-accessibility/app/index.ts @@ -48,15 +48,14 @@ async function initMap() { tourStops.forEach(({position, title}, i) => { const pin = new PinElement({ glyph: `${i + 1}`, + scale: 1.5, }); - const marker = new AdvancedMarkerElement({ position, map, title: `${i + 1}. ${title}`, content: pin.element, }); - // Add a click listener for each marker, and set up the info window. marker.addListener('click', ({ domEvent, latLng }) => { const { target } = domEvent; diff --git a/dist/samples/advanced-markers-accessibility/docs/index.js b/dist/samples/advanced-markers-accessibility/docs/index.js index a376a6ca67..4824e2c187 100644 --- a/dist/samples/advanced-markers-accessibility/docs/index.js +++ b/dist/samples/advanced-markers-accessibility/docs/index.js @@ -47,7 +47,9 @@ async function initMap() { tourStops.forEach(({ position, title }, i) => { const pin = new PinElement({ glyph: `${i + 1}`, + scale: 1.5, }); + // [START maps_advanced_markers_accessibility_marker] const marker = new AdvancedMarkerElement({ position, map, @@ -55,6 +57,8 @@ async function initMap() { content: pin.element, }); + // [END maps_advanced_markers_accessibility_marker] + // [START maps_advanced_markers_accessibility_event_listener] // Add a click listener for each marker, and set up the info window. marker.addListener("click", ({ domEvent, latLng }) => { const { target } = domEvent; @@ -63,6 +67,7 @@ async function initMap() { infoWindow.setContent(marker.title); infoWindow.open(marker.map, marker); }); + // [END maps_advanced_markers_accessibility_event_listener] }); } diff --git a/dist/samples/advanced-markers-accessibility/iframe/index.html b/dist/samples/advanced-markers-accessibility/iframe/index.html index 6fa19a0f0f..a91815d3c1 100644 --- a/dist/samples/advanced-markers-accessibility/iframe/index.html +++ b/dist/samples/advanced-markers-accessibility/iframe/index.html @@ -9,7 +9,7 @@ Advanced Marker Accessibility - + diff --git a/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js index 012eb3a650..a6ede7ba54 100644 --- a/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js @@ -46,6 +46,7 @@ async function initMap() { tourStops.forEach(({ position, title }, i) => { const pin = new PinElement({ glyph: `${i + 1}`, + scale: 1.5, }); const marker = new AdvancedMarkerElement({ position, diff --git a/dist/samples/advanced-markers-accessibility/playground/index.ts b/dist/samples/advanced-markers-accessibility/playground/index.ts index 3d0e17fb12..e70c44f0aa 100644 --- a/dist/samples/advanced-markers-accessibility/playground/index.ts +++ b/dist/samples/advanced-markers-accessibility/playground/index.ts @@ -45,15 +45,14 @@ async function initMap() { tourStops.forEach(({ position, title }, i) => { const pin = new PinElement({ glyph: `${i + 1}`, + scale: 1.5, }); - const marker = new AdvancedMarkerElement({ position, map, title: `${i + 1}. ${title}`, content: pin.element, }); - // Add a click listener for each marker, and set up the info window. marker.addListener("click", ({ domEvent, latLng }) => { const { target } = domEvent; From 6f12ad0461b3562f3cfa35983908133c83b173f0 Mon Sep 17 00:00:00 2001 From: Kenneth Nevarez Date: Fri, 3 May 2024 14:23:16 -0700 Subject: [PATCH 003/117] fix: rgm ac example (#1712) --- samples/rgm-autocomplete/index.njk | 18 +++ samples/rgm-autocomplete/index.tsx | 119 ++++++++++++++++++ .../rgm-autocomplete/rgm-autocomplete.json | 15 +++ samples/rgm-autocomplete/style.scss | 52 ++++++++ samples/rgm-basic-map/index.tsx | 1 - 5 files changed, 204 insertions(+), 1 deletion(-) create mode 100644 samples/rgm-autocomplete/index.njk create mode 100644 samples/rgm-autocomplete/index.tsx create mode 100644 samples/rgm-autocomplete/rgm-autocomplete.json create mode 100644 samples/rgm-autocomplete/style.scss diff --git a/samples/rgm-autocomplete/index.njk b/samples/rgm-autocomplete/index.njk new file mode 100644 index 0000000000..c6e683113b --- /dev/null +++ b/samples/rgm-autocomplete/index.njk @@ -0,0 +1,18 @@ + + + +{% extends '../../src/_includes/layout.njk'%} +{% block polyfill %}{% endblock %} +{% block resources %} + +{% endblock %} +{% block api %}{% endblock %} +{% block html %} +
+ +{% endblock %} + diff --git a/samples/rgm-autocomplete/index.tsx b/samples/rgm-autocomplete/index.tsx new file mode 100644 index 0000000000..0f88326266 --- /dev/null +++ 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(null); + const [markerRef, marker] = useAdvancedMarkerRef(); + + return ( + + + + + +
+ +
+
+ +
+ ); +}; + +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(null); + const inputRef = useRef(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 ( +
+ +
+ ); + }; + +const root = createRoot(document.getElementById('app')!); +root.render(); + +export default App; +// [END maps_rgm_autocomplete] diff --git a/samples/rgm-autocomplete/rgm-autocomplete.json b/samples/rgm-autocomplete/rgm-autocomplete.json new file mode 100644 index 0000000000..818efcb05e --- /dev/null +++ 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"] + } \ No newline at end of file diff --git a/samples/rgm-autocomplete/style.scss b/samples/rgm-autocomplete/style.scss new file mode 100644 index 0000000000..5fb9deab54 --- /dev/null +++ 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 index 792227f864..4ce1204a86 100644 --- 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 = From 8942541c0626ac6e5779d768d7141a3b28c4f34c Mon Sep 17 00:00:00 2001 From: googlemaps-bot Date: Fri, 3 May 2024 21:25:04 +0000 Subject: [PATCH 004/117] chore: update dist folder [skip ci] --- dist/index.html | 29 +++++ dist/samples/rgm-autocomplete/app/.env | 1 + .../rgm-autocomplete/app/.eslintrc.json | 13 ++ dist/samples/rgm-autocomplete/app/.gitignore | 4 + dist/samples/rgm-autocomplete/app/README.md | 22 ++++ dist/samples/rgm-autocomplete/app/env.d.ts | 12 ++ dist/samples/rgm-autocomplete/app/index.html | 17 +++ dist/samples/rgm-autocomplete/app/index.tsx | 117 ++++++++++++++++++ .../samples/rgm-autocomplete/app/package.json | 40 ++++++ dist/samples/rgm-autocomplete/app/style.css | 52 ++++++++ .../rgm-autocomplete/app/tsconfig.json | 16 +++ .../rgm-autocomplete/app/vite.config.js | 11 ++ dist/samples/rgm-autocomplete/docs/index.html | 19 +++ dist/samples/rgm-autocomplete/docs/index.jsx | 102 +++++++++++++++ dist/samples/rgm-autocomplete/docs/style.css | 54 ++++++++ .../rgm-autocomplete/iframe/index.html | 17 +++ .../rgm-autocomplete/jsfiddle/demo.css | 52 ++++++++ .../rgm-autocomplete/jsfiddle/demo.details | 7 ++ .../rgm-autocomplete/jsfiddle/demo.html | 17 +++ .../rgm-autocomplete/jsfiddle/demo.jsx | 100 +++++++++++++++ .../rgm-autocomplete/playground/index.html | 19 +++ .../rgm-autocomplete/playground/index.tsx | 117 ++++++++++++++++++ .../rgm-autocomplete/playground/package.json | 8 ++ .../playground/playground.ts.json | 20 +++ .../rgm-autocomplete/playground/style.css | 47 +++++++ dist/samples/rgm-basic-map/app/index.tsx | 1 - .../rgm-basic-map/playground/index.tsx | 1 - 27 files changed, 913 insertions(+), 2 deletions(-) create mode 100644 dist/samples/rgm-autocomplete/app/.env create mode 100644 dist/samples/rgm-autocomplete/app/.eslintrc.json create mode 100644 dist/samples/rgm-autocomplete/app/.gitignore create mode 100644 dist/samples/rgm-autocomplete/app/README.md create mode 100644 dist/samples/rgm-autocomplete/app/env.d.ts create mode 100644 dist/samples/rgm-autocomplete/app/index.html create mode 100644 dist/samples/rgm-autocomplete/app/index.tsx create mode 100644 dist/samples/rgm-autocomplete/app/package.json create mode 100644 dist/samples/rgm-autocomplete/app/style.css create mode 100644 dist/samples/rgm-autocomplete/app/tsconfig.json create mode 100644 dist/samples/rgm-autocomplete/app/vite.config.js create mode 100644 dist/samples/rgm-autocomplete/docs/index.html create mode 100644 dist/samples/rgm-autocomplete/docs/index.jsx create mode 100644 dist/samples/rgm-autocomplete/docs/style.css create mode 100644 dist/samples/rgm-autocomplete/iframe/index.html create mode 100644 dist/samples/rgm-autocomplete/jsfiddle/demo.css create mode 100644 dist/samples/rgm-autocomplete/jsfiddle/demo.details create mode 100644 dist/samples/rgm-autocomplete/jsfiddle/demo.html create mode 100644 dist/samples/rgm-autocomplete/jsfiddle/demo.jsx create mode 100644 dist/samples/rgm-autocomplete/playground/index.html create mode 100644 dist/samples/rgm-autocomplete/playground/index.tsx create mode 100644 dist/samples/rgm-autocomplete/playground/package.json create mode 100644 dist/samples/rgm-autocomplete/playground/playground.ts.json create mode 100644 dist/samples/rgm-autocomplete/playground/style.css diff --git a/dist/index.html b/dist/index.html index cd99e5dd78..2b02e569cd 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5241,6 +5241,35 @@

rectangle-zoom

+
+

rgm-autocomplete

+ +
+

rgm-basic-map

+
+

rgm-college-picker

+ +
+

split-map-panes