Addressed comments for imports and element placement

Author: ejhaselden

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

@@ -22,39 +22,7 @@
 
         <div class="container">
             <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
-            <gmp-map
-                center="-37.813,144.963"
-                zoom="16"
-                map-id="DEMO_MAP_ID"
-                disable-default-ui>
-                <!--
-                  The gmp-place-details-compact element is styled inline because it is
-                  conditionally rendered and moved into the info window, which is
-                  part of the map's shadow DOM.
-                -->
-                <gmp-place-details-compact
-                    orientation="horizontal"
-                    truncation-preferred
-                    style="
-                        width: 400px;
-                        padding: 0;
-                        margin: 0;
-                        border: none;
-                        background-color: transparent;
-                        color-scheme: light;
-                    ">
-                    <gmp-place-details-place-request></gmp-place-details-place-request>
-                    <gmp-place-content-config>
-                        <gmp-place-media></gmp-place-media>
-                        <gmp-place-rating></gmp-place-rating>
-                        <gmp-place-price></gmp-place-price>
-                        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
-                        <gmp-place-open-now-status></gmp-place-open-now-status>
-                        <gmp-place-attribution
-                            light-scheme-color="gray"
-                            dark-scheme-color="white"></gmp-place-attribution>
-                    </gmp-place-content-config>
-                </gmp-place-details-compact>
+            <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
             </gmp-map>
             <div class="ui-panel">
                 <div class="controls">
@@ -79,6 +47,35 @@
             </div>
         </div>
 
+        <!--
+        The gmp-place-details-compact element is styled inline because it is
+        conditionally rendered and moved into the info window, which is
+        part of the map's shadow DOM.
+    -->
+        <gmp-place-details-compact
+            orientation="horizontal"
+            truncation-preferred
+            style="
+                width: 400px;
+                padding: 0;
+                margin: 0;
+                border: none;
+                background-color: transparent;
+                color-scheme: light;
+            ">
+            <gmp-place-details-place-request></gmp-place-details-place-request>
+            <gmp-place-content-config>
+                <gmp-place-media></gmp-place-media>
+                <gmp-place-rating></gmp-place-rating>
+                <gmp-place-price></gmp-place-price>
+                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
+                <gmp-place-open-now-status></gmp-place-open-now-status>
+                <gmp-place-attribution
+                    light-scheme-color="gray"
+                    dark-scheme-color="white"></gmp-place-attribution>
+            </gmp-place-content-config>
+        </gmp-place-details-compact>
+
         <!--[END maps_ui_kit_place_search_nearby_map] -->
     </body>
 </html>

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

@@ -27,22 +27,15 @@ let infoWindow: google.maps.InfoWindow;
 // The init function is called when the page loads.
 async function init(): Promise<void> {
     // Import the necessary libraries from the Google Maps API.
-    const [{ InfoWindow }, { Place }, markerLib, coreLib] = await Promise.all([
+    const [{ InfoWindow }, { Place }] = await Promise.all([
         google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,
         google.maps.importLibrary(
             'places'
         ) as Promise<google.maps.PlacesLibrary>,
-        google.maps.importLibrary(
-            'marker'
-        ) as Promise<google.maps.MarkerLibrary>,
-        google.maps.importLibrary('core') as Promise<google.maps.CoreLibrary>,
     ]);
 
-    const AdvancedMarkerElement = markerLib.AdvancedMarkerElement;
-
-    const LatLngBounds = coreLib.LatLngBounds;
-
     // Create a new info window and set its content to the place details element.
+    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
     infoWindow = new InfoWindow({
         content: placeDetails,
         ariaLabel: 'Place Details',
@@ -55,33 +48,26 @@ async function init(): Promise<void> {
         streetViewControl: false,
     });
 
-    // Add a click listener to the map to hide the info window when the map is clicked.
-    map.innerMap.addListener('click', () => infoWindow.close());
     /* [START maps_ui_kit_place_search_nearby_event] */
     // Add event listeners to the type select and place search elements.
-    typeSelect.addEventListener('change', () =>
-        searchPlaces(AdvancedMarkerElement, LatLngBounds)
-    );
+    typeSelect.addEventListener('change', () => searchPlaces());
 
     placeSearch.addEventListener('gmp-select', (event: Event) => {
         const { place } = event as any;
         markers.get(place.id)?.click();
         if (place.location) {
-            map.innerMap.setCenter(place.location);
+            map.center = place.location;
         }
     });
     placeSearch.addEventListener('gmp-load', () => {
-        addMarkers(AdvancedMarkerElement, LatLngBounds);
+        addMarkers();
     });
 
-    searchPlaces(AdvancedMarkerElement, LatLngBounds);
+    searchPlaces();
 }
 /* [END maps_ui_kit_place_search_nearby_event] */
 // The searchPlaces function is called when the user changes the type select or when the page loads.
-function searchPlaces(
-    AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement,
-    LatLngBounds: typeof google.maps.LatLngBounds
-) {
+async function searchPlaces() {
     // Close the info window and clear the markers.
     infoWindow.close();
     for (const marker of markers.values()) {
@@ -91,23 +77,27 @@ function searchPlaces(
 
     // Set the place search query and add an event listener to the place search element.
     if (typeSelect.value) {
-        const center = map.innerMap.getCenter()!;
+        const center = map.center!;
         placeSearchQuery.locationRestriction = {
-            center: { lat: center.lat(), lng: center.lng() },
+            center,
             radius: 50000, // 50km radius
         };
         placeSearchQuery.locationBias = {
-            center: { lat: center.lat(), lng: center.lng() },
+            center,
         };
         placeSearchQuery.includedTypes = [typeSelect.value];
     }
 }
 
 // The addMarkers function is called when the place search element loads.
-async function addMarkers(
-    AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement,
-    LatLngBounds: typeof google.maps.LatLngBounds
-) {
+async function addMarkers() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
+        google.maps.importLibrary(
+            'marker'
+        ) as Promise<google.maps.MarkerLibrary>,
+        google.maps.importLibrary('core') as Promise<google.maps.CoreLibrary>,
+    ]);
     const bounds = new LatLngBounds();
 
     if (placeSearch.places.length === 0) {