Update Places UI Kit Nearby Search demo #824
Conversation
|
Here is the summary of changes. You are about to add 2 region tags.
You are about to delete 2 region tags.
This comment is generated by snippet-bot.
|
willum070
left a comment
willum070
left a comment
There was a problem hiding this comment.
Nice work! Don't forget to add show_ts=false in your js_sample macro tag.
| <option value="restaurant">Restaurant</option> | ||
| <option value="electric_vehicle_charging_station" | ||
| >EV charging station</option | ||
| > |
| </div> | ||
| <div class="list-container"> | ||
| <gmp-place-search orientation="vertical" selectable> | ||
| <gmp-place-all-content> </gmp-place-all-content> |
There was a problem hiding this comment.
| <gmp-place-all-content> </gmp-place-all-content> | |
| <gmp-place-all-content></gmp-place-all-content> |
| <script type="module" src="./index.js"></script> | ||
| <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"}); |
There was a problem hiding this comment.
fwiw v=weekly is the default. it's not a required apart. though I do notice all our demos seem to include it. I'm not sure if that's an intentional choice or not?
| </div> | ||
| </gmp-map> | ||
| <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID"></gmp-map> | ||
| <div class="controls"> |
There was a problem hiding this comment.
I'm seeing a really big change here - the controls are no longer inside the <gmp-map>, no longer using our official slot="control-*" API
There was a problem hiding this comment.
... that said, looking more at this demo I'm thinking it would actually be better for this to move outside the map (both structurally, and visually). see later comment on this.
| <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID"></gmp-map> | ||
| <div class="controls"> | ||
| <select name="types" class="type-select"> | ||
| <option value="">Select a place type</option> |
There was a problem hiding this comment.
I would highly recommend not having this blank option, and instead default to a real option - that way the demo shows the API without user interaction.
| gMap.panTo(pos); | ||
| gMap.setZoom(16); |
There was a problem hiding this comment.
this could be set off the gmp-map directly instead of the .innerMap
| ); | ||
| } else { | ||
| console.log("Your browser doesn't support geolocation"); | ||
| gMap.setZoom(16); |
There was a problem hiding this comment.
I'll come back to this file later -I suspect a lot of changes here as the other comments are addressed.
| placeDetailsPopup.position = place.location; | ||
| placeDetailsPopup.map = gMap; | ||
|
|
||
| gMap.fitBounds(place.viewport, {top: 0, left: 400}); |
There was a problem hiding this comment.
fwiw, the IW API will autopen when the IW opens. this line can go away with that change
| </gmp-map> | ||
| <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID"></gmp-map> | ||
| <div class="controls"> | ||
| <select name="types" class="type-select"> |
There was a problem hiding this comment.
| <select name="types" class="type-select"> | |
| <select class="type-select"> |
I don't think name is doing anything in this demo?
3 participants
Revised in accordance with demo style guidelines and updated loader version to "weekly"