googlemaps-samples · ejhaselden · May 16, 2025 · willum070 · May 16, 2025
diff --git a/samples/ui-kit-place-search-details/README.md b/samples/ui-kit-place-search-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-search-details/index.html b/samples/ui-kit-place-search-details/index.html
@@ -0,0 +1,38 @@
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_place_search_details] -->
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Place List Text Search with Google Maps</title>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <h1>Place List Text Search with Google Maps</h1>
+ <gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
+ <div class="overlay" slot="control-inline-start-block-start">
+ <div class="controls">
+ <input type="text" class="query-input" />
+ <button class="search-button">Search</button>
+ </div>
+ <div class="list-container">
+ <gmp-place-list selectable></gmp-place-list>
+ </div>
+ </div>
+ <gmp-place-details size="x-large"></gmp-place-details>
+ </gmp-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: "AIzaSyDIyre-_GFhQO5n5GJj3srqztDN1CQKGlI",
+ v: "alpha"
+ });
+ </script>
+ <script type="text/JavaScript" src="app.js"></script>
+ </body>
+</html>
+<!--[END maps_ui_kit_place_search_details] -->
diff --git a/samples/ui-kit-place-search-details/index.ts b/samples/ui-kit-place-search-details/index.ts
@@ -0,0 +1,129 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_search_details] */
+
+const map = document.querySelector("gmp-map") as HTMLDivElement & { innerMap: google.maps.Map };
+const placeList = document.querySelector("gmp-place-list") as HTMLElement & {
+ places: google.maps.places.Place[];
+ configureFromSearchByTextRequest: (request: google.maps.places.TextSearchRequest) => Promise<void>;
+};
+const queryInput = document.querySelector(".query-input") as HTMLInputElement;
+const searchButton = document.querySelector(".search-button") as HTMLButtonElement;
+const placeDetails = document.querySelector("gmp-place-details") as HTMLElement & {
+ configureFromPlace: (place: google.maps.places.Place) => void;
+};
+
+// Explicitly type the markers object to store AdvancedMarkerElement instances keyed by string (place ID)
+let markers: { [key: string]: google.maps.marker.AdvancedMarkerElement } = {};
+let infowindow: google.maps.InfoWindow;
+
+async function init(): Promise<void> {
+ // Import libraries and assert their types for better type checking
+ await google.maps.importLibrary("places") as google.maps.places.PlacesLibrary;
+ const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.maps.MapsLibrary;
+
+ infowindow = new InfoWindow();
+
+ findCurrentLocation();
+
+ // The 'innerMap' property on 'gmp-map' is custom, so we assert it exists
+ map.innerMap.setOptions({
+ mapTypeControl: false,
+ clickableIcons: false,
+ });
+
+ searchButton.addEventListener("click", () => {
+ // Clear existing markers from the map
+ for (const markerId in markers) {
+ markers[markerId].map = null;
+ }
+ markers = {}; // Reset the markers object
+
+ if (queryInput.value) {
+ placeList.style.display = 'block';
+ placeList.configureFromSearchByTextRequest({
+ textQuery: queryInput.value,
+ locationBias: map.innerMap.getBounds() as google.maps.LatLngBounds // Asserting type for getBounds()
+ }).then(addMarkers);
+ }
+ });
+
+ // Type the 'place' object in the event listener
+ placeList.addEventListener("gmp-placeselect", ({ place }: { place: google.maps.places.Place }) => {
+ // Ensure the marker exists before trying to click it
+ if (markers[place.id]) {
+ markers[place.id].click();
+ }
+ });
+}
+
+async function addMarkers(): Promise<void> {
+ const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.marker.MarkerLibrary;
+ const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.core.CoreLibrary;
+ const bounds = new LatLngBounds();
+
+ if (placeList.places.length > 0) {
+ placeList.places.forEach((place: google.maps.places.Place) => { // Explicitly type 'place' in forEach
+ const marker = new AdvancedMarkerElement({
+ map: map.innerMap,
+ position: place.location as google.maps.LatLng // Assert position as LatLng
+ });
+ marker.metadata = { id: place.id };
+ markers[place.id] = marker;
+ bounds.extend(place.location as google.maps.LatLng); // Assert location as LatLng
+
+ marker.addListener('click', () => { // No need for 'event' parameter if not used
+ if (infowindow.isOpen) {
+ infowindow.close();
+ }
+ placeDetails.style.display = 'block';
+ placeDetails.configureFromPlace(place);
+ placeDetails.style.width = "350px";
+ infowindow.setOptions({
+ content: placeDetails
+ });
+ infowindow.open({
+ anchor: marker,
+ map: map.innerMap
+ });
+
+ // Type the 'event' parameter for gmp-load if it's custom
+ placeDetails.addEventListener('gmp-load', () => {
+ // Assert place.viewport as LatLngBounds for fitBounds
+ map.innerMap.fitBounds(place.viewport as google.maps.LatLngBounds, {
+ top: placeDetails.offsetHeight || 206,
+ left: 200
+ });
+ });
+ });
+ map.innerMap.setCenter(bounds.getCenter());
+ map.innerMap.fitBounds(bounds);
+ });
+ }
+}
+
+async function findCurrentLocation(): Promise<void> {
+ const { LatLng } = await google.maps.importLibrary("core") as google.maps.core.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);
+ }
+}
+
+init();
+/* [END maps_ui_kit_place_search_details] */
diff --git a/samples/ui-kit-place-search-details/package.json b/samples/ui-kit-place-search-details/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "@js-api-samples/ui-kit-place-details-compact",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "tsc && bash ../jsfiddle.sh ui-kit-place-details-compact && bash ../app.sh ui-kit-place-details-compact && bash ../docs.sh ui-kit-place-details-compact && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-details-compact",
+ "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-search-details/style.css b/samples/ui-kit-place-search-details/style.css
@@ -0,0 +1,78 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_search_details] */
+html,
+body {
+ height: 100%;
+ margin: 0;
+}
+
+body {
+ display: flex; 
+ flex-direction: column;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+ font-size: 16px;
+ text-align: center;
+}
+
+gmp-map {
+ box-sizing: border-box;
+ padding: 0 20px 20px;
+}
+
+.overlay {
+ margin: 20px;
+ width: 400px;
+}
+
+.controls {
+ display: flex; 
+ gap: 10px;
+ margin-bottom: 10px;
+ height: 32px;
+}
+
+.search-button {
+ background-color: #5491f5;
+ color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ width: 100px;
+}
+
+.query-input {
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ flex-grow: 1;
+ padding: 10px;
+}
+
+.list-container {
+ height: 600px;
+ overflow: auto;
+ border-radius: 10px;
+}
+
+gmp-place-list {
+ background-color: #fff;
+ display: none;
+}
+
+gmp-place-details {
+ width: 320px;
+ display: none;
+}
+
+.vAygCK-api-load-alpha-banner{
+ display: none;
+} 
+
+/* [END maps_ui_kit_place_search_details_style] */
+
+/* [END maps_ui_kit_place_search_details] */
diff --git a/samples/ui-kit-place-search-details/tsconfig.json b/samples/ui-kit-place-search-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-details_compact/README.md b/samples/ui-kit-place-search-details_compact/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-details_compact/index.html b/samples/ui-kit-place-search-details_compact/index.html
@@ -0,0 +1,42 @@
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_place_search_details_compact] -->
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GMP Places UI Kit: Place text search with Google Maps</title>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div id="wrapper">
+ <div id="map-container"></div>
+ <div class="controls">
+ <input type="text" class="query-input" />
+ <button class="search-button">Search</button>
+ </div>
+ <div class="list-container">
+ <gmp-place-list selectable></gmp-place-list>
+ </div>
+<pre class="prettyprint"><code> &lt;div id=&#34;details-container&#34;&gt;
+ &lt;gmp-place-details-compact orientation=&#34;vertical&#34;&gt;
+ &lt;gmp-place-details-place-request&gt;&lt;/gmp-place-details-place-request&gt; 
+ &lt;gmp-place-all-content&gt;&lt;/gmp-place-all-content&gt;
+ &lt;/gmp-place-details-compact&gt;
+ &lt;/div&gt;
+&lt;/div&gt; 
+
+&lt;script&gt;
+ (g=&gt;{var h,a,k,p=&#34;The Google Maps JavaScript API&#34;,c=&#34;google&#34;,l=&#34;importLibrary&#34;,q=&#34;__ib__&#34;,m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=&gt;h||(h=new Promise(async(f,n)=&gt;{await (a=m.createElement(&#34;script&#34;));e.set(&#34;libraries&#34;,[...r]+&#34;&#34;);for(k in g)e.set(k.replace(/[A-Z]/g,t=&gt;&#34;_&#34;+t[0].toLowerCase()),g[k]);e.set(&#34;callback&#34;,c+&#34;.maps.&#34;+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=&gt;h=n(Error(p+&#34; could not load.&#34;));a.nonce=m.querySelector(&#34;script[nonce]&#34;)?.nonce||&#34;&#34;;m.head.append(a)}));d[l]?console.warn(p+&#34; only loads once. Ignoring:&#34;,g):d[l]=(f,...n)=&gt;r.add(f)&amp;&amp;u().then(()=&gt;d[l](f,...n))})({
+ key: &#34;AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&#34;,
+ v: &#34;alpha&#34;
+ });
+&lt;/script&gt;
+&lt;script type=&#34;text/JavaScript&#34; src=&#34;app.js&#34;&gt;&lt;/script&gt;
+</code></pre>
+<p></body>
+</html>
+<!--[END maps_ui_kit_place_search_details_compact] -->