fix: Updates Place Search text demo. (#449)

* fix: Updates Place Search text demo.

* Update index.html

Removes size attribute from gmp-place-details element, as it is not needed.

Author: willum070

samples/ui-kit-place-search-text/index.html

@@ -24,11 +24,14 @@
           <gmp-place-list selectable style="display: none;"></gmp-place-list>
         </div>
       </div>
-      <gmp-place-details size="large" style="display: none;"></gmp-place-details>
+      <gmp-place-details style="display: none;">
+        <gmp-place-details-place-request></gmp-place-details-place-request>
+        <gmp-place-all-content></gmp-place-all-content> 
+      </gmp-place-details>
     </gmp-map>
     <!--[END maps_ui_kit_place_search_text_map] -->
     <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: "alpha"});</script>
   </body>
 </html>
-<!--[END maps_ui_kit_place_search_text] -->
+<!--[END maps_ui_kit_place_search_text] -->

samples/ui-kit-place-search-text/index.ts

@@ -11,12 +11,13 @@ const placeDetails = document.querySelector("gmp-place-details") as any;
 let marker = document.querySelector('gmp-advanced-marker') as any;
 const textSearchInput = document.getElementById('textSearchInput') as any;
 const textSearchButton = document.getElementById('textSearchButton') as HTMLButtonElement;
+const placeDetailsRequest = document.querySelector('gmp-place-details-place-request') as any;
 
 /* [END maps_ui_kit_place_search_text_query_selectors] */
 /* [START maps_ui_kit_place_search_text_init_map] */
 let markers = {};
 let infoWindow;
-let center = { lat: 37.395641, lng: -122.077627 };
+let center = { lat: 37.395641, lng: -122.077627 }; // Mountain View, CA.
 let bounds;
 
 async function initMap(): Promise<void>  {
@@ -32,21 +33,31 @@ async function initMap(): Promise<void>  {
     infoWindow = new google.maps.InfoWindow;
 
     // Center the map
-    let adjustedCenter = offsetLatLngRight(center, -0.005);
-    map.innerMap.panTo(adjustedCenter);
+    map.innerMap.panTo(center);
     map.innerMap.setZoom(14);
 
     map.innerMap.setOptions({
         mapTypeControl: false,
         clickableIcons: false,
     });
 
+    /* [START maps_ui_kit_place_search_tex_event_handlers] */
+    // Fire when the Place Details Element is loaded.
+    placeDetails.addEventListener('gmp-load', (event) => {
+        // Center the info window on the map.
+        map.innerMap.fitBounds(placeDetails.place.viewport, { top: 500, left: 400 });
+    });
+
+    // Handle clicks on the search button.
     textSearchButton.addEventListener('click', searchByTextRequest);
+
+    // Handle enter key on text input.
     textSearchInput.addEventListener('keydown', (event) => {
         if (event.key === 'Enter') {
             searchByTextRequest();
         }
     });
+    /* [END maps_ui_kit_place_search_tex_event_handlers] */
 }
 /* [END maps_ui_kit_place_search_text_init_map] */
 
@@ -83,12 +94,14 @@ async function addMarkers(){
             markers[place.id] = marker;
             bounds.extend(place.location);
             marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
-
+            
+            /* [START maps_ui_kit_place_search_text_click_event] */
             marker.addListener('gmp-click',(event) => {
                 if(infoWindow.isOpen){
                     infoWindow.close();
                 }
-                placeDetails.configureFromPlace(place);
+                // Set the Place Details request to the selected place.
+                placeDetailsRequest.place = place.id;
                 placeDetails.style.display = "block";
                 placeDetails.style.width = "350px";
                 infoWindow.setOptions({
@@ -103,18 +116,13 @@ async function addMarkers(){
                 });
 
             });
+            /* [END maps_ui_kit_place_search_text_click_event] */
             map.innerMap.setCenter(bounds.getCenter());
             map.innerMap.fitBounds(bounds);
         });
     }
 }
 /* [END maps_ui_kit_place_search_text_add_markers] */
 
-// Helper function to offset the map center.
-function offsetLatLngRight(latLng, longitudeOffset) {
-    const newLng = latLng.lng + longitudeOffset;
-    return new google.maps.LatLng(latLng.lat, newLng);
-}
-
 initMap();
 /* [END maps_ui_kit_place_search_text] */