feat: Adds UI Kit place details and place search examples.

willum070 · willum070 · commit dcc9109d5c49 · 2025-04-02T14:55:22.000-07:00
diff --git a/samples/ui-kit-place-details/index.html b/samples/ui-kit-place-details/index.html
@@ -14,12 +14,14 @@
   </head>
   <body>
     <h1>Click on the map to view place details</h1>
+    <!--[START maps_ui_kit_place_details_map] -->
     <gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID" style="height: 400px">
       <gmp-place-details
         size="x-large"
         slot="control-inline-start-block-start"></gmp-place-details>
       <gmp-advanced-marker></gmp-advanced-marker>
     </gmp-map>
+    <!--[END maps_ui_kit_place_details_map] -->
     <script
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps&callback=initMap&v=alpha"
       defer
diff --git a/samples/ui-kit-place-details/index.ts b/samples/ui-kit-place-details/index.ts
@@ -5,9 +5,11 @@
  */
 /* [START maps_ui_kit_place_details] */
 // Use querySelector to select elements for interaction.
+/* [START maps_ui_kit_place_details_query_selector] */
 const map = document.querySelector('gmp-map') as any;
 const placeDetails = document.querySelector('gmp-place-details') as any;
 const marker = document.querySelector('gmp-advanced-marker') as any;
+/* [END maps_ui_kit_place_details_query_selector] */
 
 async function initMap(): Promise<void> {
     // Request needed libraries.
@@ -22,6 +24,7 @@ async function initMap(): Promise<void> {
   // Hide the map type control.
   map.innerMap.setOptions({mapTypeControl: false});
 
+  /* [START maps_ui_kit_place_details_event] */
   // Add an event listener to handle map clicks.
   map.innerMap.addListener('click', async (event) => {
     marker.position = null;
@@ -39,6 +42,7 @@ async function initMap(): Promise<void> {
     marker.style.display = 'block';
   });
 }
+/* [END maps_ui_kit_place_details_event] */
 
 // Helper function for geolocation.
 async function findCurrentLocation() {
diff --git a/samples/ui-kit-place-search/index.html b/samples/ui-kit-place-search/index.html
@@ -14,6 +14,7 @@
   </head>
   <body>
     <h1>Place List Nearby Search with Google Maps</h1>
+    <!--[START maps_ui_kit_place_search_map] -->
     <gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
       <div class="overlay" slot="control-inline-start-block-start">
         <div class="controls">
@@ -32,6 +33,7 @@ <h1>Place List Nearby Search with Google Maps</h1>
       </div>
       <gmp-place-details size="large"></gmp-place-details>
     </gmp-map>
+    <!--[END maps_ui_kit_place_search_map] -->
     <script
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps&callback=initMap&v=alpha"
       defer
diff --git a/samples/ui-kit-place-search/index.ts b/samples/ui-kit-place-search/index.ts
@@ -4,14 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* [START maps_ui_kit_place_search] */
+/* [START maps_ui_kit_place_search_query_selectors] */
 const map = document.querySelector("gmp-map") as any;
 const placeList = document.querySelector("gmp-place-list") as any;
 const typeSelect = document.querySelector(".type-select") as any;
-const searchButton = document.querySelector(".search-button") as any;
 const placeDetails = document.querySelector("gmp-place-details") as any;
 let marker = document.querySelector('gmp-advanced-marker') as any;
-let infowindow;
+/* [END maps_ui_kit_place_search_query_selectors] */
 let markers = {};
+let infowindow;
 let mapCenter;
 
 async function initMap(): Promise<void>  {
@@ -36,7 +37,7 @@ async function initMap(): Promise<void>  {
         clickableIcons: false,
     });
 
-    //searchButton.addEventListener("click", () => {
+    /* [START maps_ui_kit_place_search_event] */
     typeSelect.addEventListener("change", (event) => {
         // First remove all existing markers.
         for(marker in markers){
@@ -58,6 +59,7 @@ async function initMap(): Promise<void>  {
             });
         }
     });
+    /* [END maps_ui_kit_place_search_event] */
 }
 
 async function addMarkers(){
