Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[autocomplete][docs] Improve Google Maps search example #44708

Merged
merged 3 commits into from
Feb 4, 2025

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Dec 9, 2024

Initially, I thought I could quickly handle https://developers.google.com/maps/documentation/javascript/places-migration-autocomplete. It was much harder than expected 😅

Preview: https://deploy-preview-44708--material-ui.netlify.app/material-ui/react-autocomplete/#google-maps-place

I have tried to make the demo crash, like in #35391 but couldn't find a way.

We can use https://console.cloud.google.com/google/maps-apis/metrics?hl=en&inv=1&invt=Abjs3A&project=material-ui-docs to keep track of the API usage, make sure it's still OK.


As for why work on this, see https://github.com/NiazMorshed2007/shadcn-address-autocomplete/, unless the community builds this, we need to stay up to date to stay relevant.


Side note, we are supposed to give logo attribution: https://developers.google.com/maps/documentation/javascript/policies#logo

If your application uses search fields with or without autocomplete, the logo must be displayed inline.

e.g. https://developers.google.com/maps/documentation/javascript/place-autocomplete-new

SCR-20241215-tpel

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation component: autocomplete This is the name of the generic UI component, not the React module! labels Dec 9, 2024
@mui-bot
Copy link

mui-bot commented Dec 9, 2024

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against e40322d

@@ -1,10 +1,7 @@
export default function loadScript(src: string, position: HTMLElement | null) {
export default function loadScript(src: string, position: HTMLElement) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code style, no defensive logic in places where it's not their business logic to have.

@@ -147,25 +154,29 @@ export default function GoogleMaps() {
);
return (
<li key={key} {...optionProps}>
<Grid container sx={{ alignItems: 'center' }}>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Migrate to Grid2, one more. We should really migrate the whole codebase.

Comment on lines -159 to +246
sx={{ fontWeight: part.highlight ? 'bold' : 'regular' }}
sx={{
fontWeight: part.highlight
? 'fontWeightBold'
: 'fontWeightRegular',
}}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rely on the design token, not hard-coded values.

import { debounce } from '@mui/material/utils';
import throttle from 'lodash/throttle';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trying to go back to a better UX after #35545.

@oliviertassinari oliviertassinari merged commit a85cd3e into mui:master Feb 4, 2025
22 checks passed
@oliviertassinari oliviertassinari deleted the new-google-maps-api branch February 4, 2025 22:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants