Update Places UI Kit Nearby Search #880
Conversation
| <!-- prettier-ignore --> | ||
| <script> | ||
| (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) | ||
| ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly", internalUsageAttributionIds: "gmp_mcp_codeassist_v0.1_github"}); |
There was a problem hiding this comment.
internalUsageAttributionIds maybe should be removed? (leave that to show external usage of MCP?)
| <label for="type-select">Select a place type:</label> | ||
| <select id="type-select" class="type-select"> | ||
| <option value="cafe" selected>Cafe</option> | ||
| <option value="restaurant">Restaurant</option> | ||
| <option value="electric_vehicle_charging_station"> | ||
| EV charging station | ||
| </option> | ||
| <option value="electric_vehicle_charging_station" | ||
| >EV charging station</option | ||
| > |
There was a problem hiding this comment.
this may be simpler with label wrapping vs for-id.
TBD when seeing the desired UI
| <gmp-place-details-compact orientation="horizontal" | ||
| truncation-preferred | ||
| style="width: 400px; | ||
| padding: 0; |
There was a problem hiding this comment.
maybe add a comment for why this is inline style instead of stylesheet?
| const { InfoWindow } = (await google.maps.importLibrary( | ||
| 'maps' | ||
| )) as google.maps.MapsLibrary | ||
| await google.maps.importLibrary('places') | ||
| const markerLib = (await google.maps.importLibrary( | ||
| 'marker' | ||
| )) as google.maps.MarkerLibrary | ||
| const coreLib = (await google.maps.importLibrary( | ||
| 'core' | ||
| )) as google.maps.CoreLibrary |
There was a problem hiding this comment.
maybe have these load in parallel, instead of in sequence?
| AdvancedMarkerElement = markerLib.AdvancedMarkerElement | ||
| LatLngBounds = coreLib.LatLngBounds |
There was a problem hiding this comment.
suggest {} = ... destructuring inline above instead
| map.innerMap.setCenter(bounds.getCenter()) | ||
| map.innerMap.fitBounds(bounds) |
There was a problem hiding this comment.
interesting - does this particular set of calls produce a particularly desired effect? (I usually just see fitBounds or setBounds called - but no extra setCenter)
| // The hideInfoWindow function is called when the user clicks on the map. | ||
| function hideInfoWindow() { | ||
| infoWindow.close() | ||
| placeDetails.style.visibility = 'hidden' |
There was a problem hiding this comment.
once the placeDetails is moved to inside the IW, it will naturally only be shown when the IW is visible.
consider removing this function, omitting code that handles placeDetails's visibility, and just controlling the set via the IW
| margin: 0; | ||
| border-radius: 10px; | ||
| border: none; | ||
| visibility: hidden; |
There was a problem hiding this comment.
with other suggestions above, can omit setting/changing visibility on gmp-place-search
| gmp-place-details-compact { | ||
| max-height: 300px; | ||
| border: none; | ||
| visibility: hidden; | ||
| color-scheme: light; | ||
| } |
There was a problem hiding this comment.
are these ignored because gmp-place-details-compact moves into the shadow DOM? (can remove?)
| infoWindow.close() | ||
|
|
||
| for (const marker of markers.values()) { | ||
| marker.map = null |
There was a problem hiding this comment.
| marker.map = null | |
| marker.remove(); |
tiny tiny bit better practice, I think
| .type-select { | ||
| width: 100%; | ||
| height: 32px; | ||
| border: 1px solid #000; | ||
| border-radius: 10px; | ||
| flex-grow: 1; | ||
| padding: 0 10px; | ||
| } |
There was a problem hiding this comment.
do we need all these styles?
(noticed here, but maybe a general pass to trim the stylesheet down in the sprit of the Unless the sample is about styling/customization, minimize styling/customization to demonstrate the “out of the box” experience. guideline)
No description provided.