feat: Updates Place Autocomplete examples for GA launch. (#273)

Author: willum070

samples/place-autocomplete-element/index.html

@@ -17,7 +17,7 @@
 
     <!-- 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: "beta"});</script>
+        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </body>
 </html>
 <!-- [END maps_place_autocomplete_element] -->

samples/place-autocomplete-element/index.ts

@@ -18,7 +18,6 @@
 async function initMap(): Promise<void> {
     // [START maps_place_autocomplete_element_add]
     // Request needed libraries.
-    //@ts-ignore
     await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
     // Create the input HTML element, and append it.
     //@ts-ignore
@@ -39,9 +38,9 @@ async function initMap(): Promise<void> {
     // [START maps_place_autocomplete_element_listener]
     // Add the gmp-placeselect listener, and display the results.
     //@ts-ignore
-    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { // TODO: gmp-placeselect -> gmp-select; place -> placePrediction.
+    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
+        const place = placePrediction.toPlace();
         await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
-
         selectedPlaceTitle.textContent = 'Selected Place:';
         selectedPlaceInfo.textContent = JSON.stringify(
             place.toJSON(), /* replacer */ null, /* space */ 2);

samples/place-autocomplete-map/index.html

@@ -20,7 +20,7 @@
 
     <!-- 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: "beta"});</script>
+        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </body>
 </html>
 <!-- [END maps_place_autocomplete_map] -->

samples/place-autocomplete-map/index.ts

@@ -18,6 +18,7 @@
 let map: google.maps.Map;
 let marker: google.maps.marker.AdvancedMarkerElement;
 let infoWindow: google.maps.InfoWindow;
+let center = { lat: 40.749933, lng: -73.98633 }; // New York City
 async function initMap(): Promise<void> {
     // Request needed libraries.
     //@ts-ignore
@@ -28,7 +29,7 @@ async function initMap(): Promise<void> {
 
     // Initialize the map.
     map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
-        center: { lat: 40.749933, lng: -73.98633 },
+        center,
         zoom: 13,
         mapId: '4504f8b37365c3d0',
         mapTypeControl: false,
@@ -38,6 +39,7 @@ async function initMap(): Promise<void> {
     const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
     //@ts-ignore
     placeAutocomplete.id = 'place-autocomplete-input';
+    placeAutocomplete.locationBias = center;
 
     const card = document.getElementById('place-autocomplete-card') as HTMLElement;
     //@ts-ignore
@@ -55,7 +57,8 @@ async function initMap(): Promise<void> {
     // [START maps_place_autocomplete_map_listener]
     // Add the gmp-placeselect listener, and display the results on the map.
     //@ts-ignore
-    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { // TODO: gmp-placeselect -> gmp-select; place -> placePrediction.
+    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
+        const place = placePrediction.toPlace();
         await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
 
         // If the place has a geometry, then present it on a map.