googlemaps-samples · willum070 · Apr 3, 2025 · Mar 10, 2025 · Apr 2, 2025 · Mar 10, 2025
diff --git a/samples/ui-kit-place-details/README.md b/samples/ui-kit-place-details/README.md
@@ -0,0 +1,33 @@
+# Google Maps JavaScript Sample
+
+This sample is generated from @googlemaps/js-samples located at
+https://github.com/googlemaps-samples/js-api-samples.
+
+## Setup
+
+### Before starting run:
+
+`$npm i`
+
+### Run an example on a local web server
+
+First `cd` to the folder for the sample to run, then:
+
+`$npm start`
+
+### Build an individual example
+
+From `samples/`:
+
+`$npm run build --workspace=sample-name/`
+
+### Build all of the examples.
+
+From `samples/`:
+`$npm run build-all`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
+
diff --git a/samples/ui-kit-place-details/index.html b/samples/ui-kit-place-details/index.html
@@ -0,0 +1,31 @@
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_place_details] -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Click on the map to view place details</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css">
+    <script type="module" src="./index.js"></script>
+  </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
+    ></script>
+  </body>
+</html>
+<!--[END maps_ui_kit_place_details] -->
diff --git a/samples/ui-kit-place-details/index.ts b/samples/ui-kit-place-details/index.ts
@@ -0,0 +1,76 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [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.
+    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
+
+  // Calls the geolocation helper function to center the map on the current
+  // device location.
+  findCurrentLocation();
+
+  // 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;
+    event.stop();
+    placeDetails.style.visibility = 'visible';
+    if (event.placeId) {
+      // Fire when the user clicks a POI.
+      await placeDetails.configureFromPlace({id: event.placeId});
+    } else {
+      // Fire when the user clicks the map (not on a POI).
+      await placeDetails.configureFromLocation(event.latLng);
+    }
+    // Show the marker at the selected place.
+    marker.position = placeDetails.place.location;
+    marker.style.display = 'block';
+  });
+}
+/* [END maps_ui_kit_place_details_event] */
+
+// Helper function for geolocation.
+async function findCurrentLocation() {
+  const { LatLng } = await google.maps.importLibrary('core') as google.maps.CoreLibrary;
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const pos =
+              new LatLng(position.coords.latitude, position.coords.longitude);
+          map.innerMap.panTo(pos);
+          map.innerMap.setZoom(16);
+        },
+        () => {
+          console.log('The Geolocation service failed.');
+          map.innerMap.setZoom(16);
+        },
+    );
+  } else {
+    console.log('Your browser doesn\'t support geolocation');
+    map.innerMap.setZoom(16);
+  }
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+/* [END maps_ui_kit_place_details] */
+export {};
diff --git a/samples/ui-kit-place-details/package.json b/samples/ui-kit-place-details/package.json
@@ -0,0 +1,15 @@
+{
+    "name": "@js-api-samples/ui-kit-place-details",
+    "version": "1.0.0",
+    "scripts": {
+      "build": "tsc && bash ../jsfiddle.sh ui-kit-place-details && bash ../app.sh ui-kit-place-details && bash ../docs.sh ui-kit-place-details && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-details",
+      "test": "tsc && npm run build:vite --workspace=.",
+      "start": "tsc && vite build --base './' && vite",
+      "build:vite": "vite build --base './'",
+      "preview": "vite preview"
+    },
+    "dependencies": {
+
+    }
+  }
+
diff --git a/samples/ui-kit-place-details/style.css b/samples/ui-kit-place-details/style.css
@@ -0,0 +1,37 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_details] */
+/* 
+ * Optional: Makes the sample page fill the window. 
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+  font-size: 16px;
+  text-align: center;
+}
+
+gmp-map {
+  height: 400px;
+}
+
+gmp-place-details {
+  visibility: hidden;
+  background-color: #fff;
+  border-radius: 8px;
+  margin: 20px;
+  width: 400px;
+}
+
+gmp-advanced-marker {
+    display: none;
+}
+/* [END maps_ui_kit_place_details] */
diff --git a/samples/ui-kit-place-details/tsconfig.json b/samples/ui-kit-place-details/tsconfig.json
@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+      "module": "esnext",
+      "target": "esnext",
+      "strict": true,
+      "noImplicitAny": false,
+      "lib": [
+        "es2015",
+        "esnext",
+        "es6",
+        "dom",
+        "dom.iterable"
+      ],
+      "moduleResolution": "Node",
+      "jsx": "preserve"
+    }
+  }
diff --git a/samples/ui-kit-place-search/README.md b/samples/ui-kit-place-search/README.md
@@ -0,0 +1,33 @@
+# Google Maps JavaScript Sample
+
+This sample is generated from @googlemaps/js-samples located at
+https://github.com/googlemaps-samples/js-api-samples.
+
+## Setup
+
+### Before starting run:
+
+`$npm i`
+
+### Run an example on a local web server
+
+First `cd` to the folder for the sample to run, then:
+
+`$npm start`
+
+### Build an individual example
+
+From `samples/`:
+
+`$npm run build --workspace=sample-name/`
+
+### Build all of the examples.
+
+From `samples/`:
+`$npm run build-all`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
+
diff --git a/samples/ui-kit-place-search/index.html b/samples/ui-kit-place-search/index.html
@@ -0,0 +1,43 @@
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_place_search] -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Place List Nearby Search with Google Maps</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script type="module" src="./index.js"></script>
+  </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">
+          <select name="types" class="type-select">
+            <option value="">Select a place type</option>
+            <option value="cafe">Cafe</option>
+            <option value="restaurant">Restaurant</option>
+            <option value="electric_vehicle_charging_station">
+              EV charging station
+            </option>
+          </select>
+        </div>
+        <div class="list-container">
+          <gmp-place-list selectable></gmp-place-list>
+        </div>
+      </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
+    ></script>
+  </body>
+</html>
+<!--[END maps_ui_kit_place_search] -->