googlemaps-samples · willum070 · Sep 30, 2025 · Sep 30, 2025
diff --git a/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DYsp_gI5.css b/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DYsp_gI5.css
diff --git a/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DwWFQETP.js b/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DwWFQETP.js
diff --git a/dist/samples/react-ui-kit-place-details-compact/dist/index.html b/dist/samples/react-ui-kit-place-details-compact/dist/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_react_ui_kit_place_details_compact] -->
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <title>React - UI Kit Place Details Compact</title>
+    <meta name="description" content="Places UI Kit Example" />
+    <style>
+      body {
+        margin: 0;
+        font-family: sans-serif;
+      }
+      #app {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+    <script type="module" crossorigin src="./assets/index-DwWFQETP.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-DYsp_gI5.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+<!-- [END maps_react_ui_kit_place_details_compact] -->
diff --git a/dist/samples/react-ui-kit-place-details-compact/docs/index.html b/dist/samples/react-ui-kit-place-details-compact/docs/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_react_ui_kit_place_details_compact] -->
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <title>React - UI Kit Place Details Compact</title>
+    <meta name="description" content="Places UI Kit Example" />
+    <style>
+      body {
+        margin: 0;
+        font-family: sans-serif;
+      }
+      #app {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import {renderToDom} from './src/app';
+
+      renderToDom(document.querySelector('#app'));
+    </script>
+  </body>
+</html>
+<!-- [END maps_react_ui_kit_place_details_compact] -->
diff --git a/dist/samples/react-ui-kit-place-details-compact/docs/src/app.js b/dist/samples/react-ui-kit-place-details-compact/docs/src/app.js
@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+{ /* [START maps_react_ui_kit_place_details_compact] */ }
+import React, { useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { APIProvider, useMapsLibrary } from '@vis.gl/react-google-maps';
+import './styles.css';
+const API_KEY = "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8";
+// Renders place details using a place ID.
+const PlaceDetails = ({ placeId }) => {
+    const places = useMapsLibrary('places');
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!places || !containerRef.current) {
+            return;
+        }
+        // Create the gmp-place-details-compact element.
+        const placeDetails = document.createElement('gmp-place-details-compact');
+        // Set the orientation.
+        placeDetails.setAttribute('orientation', 'horizontal');
+        // Create the gmp-place-details-place-request element.
+        const placeRequest = document.createElement('gmp-place-details-place-request');
+        // Set the place on the place request element.
+        placeRequest.setAttribute('place', placeId);
+        // Append the place request to the place details element.
+        placeDetails.appendChild(placeRequest);
+        // Create and append the content config and its children.
+        const contentConfig = document.createElement('gmp-place-content-config');
+        contentConfig.innerHTML = `
+      <gmp-place-media lightbox-preferred></gmp-place-media>
+      <gmp-place-rating></gmp-place-rating>
+      <gmp-place-type></gmp-place-type>
+      <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></gmp-place-attribution>
+    `;
+        placeDetails.appendChild(contentConfig);
+        // Append the place details element to the container.
+        containerRef.current.innerHTML = ''; // Clear previous content
+        containerRef.current.appendChild(placeDetails);
+    }, [places, placeId]);
+    return _jsx("div", { ref: containerRef, className: "place-details-container" });
+};
+const App = () => {
+    return (_jsx(APIProvider, { apiKey: API_KEY, libraries: ['places'], children: _jsx("div", { className: "places-ui-kit", children: _jsx(PlaceDetails, { placeId: "ChIJ5bx0qiVu5kcRs_dMpI5ttiY" }) }) }));
+};
+export default App;
+export function renderToDom(container) {
+    const root = createRoot(container);
+    root.render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));
+}
+{ /* [END maps_react_ui_kit_place_details_compact] */ }
diff --git a/dist/samples/react-ui-kit-place-details-compact/docs/src/app.tsx b/dist/samples/react-ui-kit-place-details-compact/docs/src/app.tsx
@@ -0,0 +1,88 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+{/* [START maps_react_ui_kit_place_details_compact] */}
+import React, {useEffect, useRef} from 'react';
+import {createRoot} from 'react-dom/client';
+import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps';
+
+import './styles.css';
+
+const API_KEY = "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8";
+
+type PlaceDetailsProps = {
+  placeId: string;
+};
+
+// Renders place details using a place ID.
+const PlaceDetails = ({placeId}: PlaceDetailsProps) => {
+  const places = useMapsLibrary('places');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!places || !containerRef.current) {
+      return;
+    }
+    // Create the gmp-place-details-compact element.
+    const placeDetails = document.createElement('gmp-place-details-compact');
+
+    // Set the orientation.
+    placeDetails.setAttribute('orientation', 'horizontal');
+
+    // Create the gmp-place-details-place-request element.
+    const placeRequest = document.createElement(
+      'gmp-place-details-place-request',
+    );
+
+    // Set the place on the place request element.
+    placeRequest.setAttribute('place', placeId);
+
+    // Append the place request to the place details element.
+    placeDetails.appendChild(placeRequest);
+
+    // Create and append the content config and its children.
+    const contentConfig = document.createElement('gmp-place-content-config');
+    contentConfig.innerHTML = `
+      <gmp-place-media lightbox-preferred></gmp-place-media>
+      <gmp-place-rating></gmp-place-rating>
+      <gmp-place-type></gmp-place-type>
+      <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></gmp-place-attribution>
+    `;
+    placeDetails.appendChild(contentConfig);
+
+    // Append the place details element to the container.
+    containerRef.current.innerHTML = ''; // Clear previous content
+    containerRef.current.appendChild(placeDetails);
+  }, [places, placeId]);
+
+  return <div ref={containerRef} className="place-details-container" />;
+};
+
+const App = () => {
+  return (
+    <APIProvider apiKey={API_KEY} libraries={['places']}>
+      <div className="places-ui-kit">
+        <PlaceDetails placeId="ChIJ5bx0qiVu5kcRs_dMpI5ttiY" />
+      </div>
+    </APIProvider>
+  );
+};
+
+export default App;
+
+export function renderToDom(container: HTMLElement) {
+  const root = createRoot(container);
+
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
+{/* [END maps_react_ui_kit_place_details_compact] */}
+
diff --git a/dist/samples/react-ui-kit-place-details-compact/docs/src/styles.css b/dist/samples/react-ui-kit-place-details-compact/docs/src/styles.css
@@ -0,0 +1,50 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_react_ui_kit_place_details_compact] */
+html,
+body {
+  display: flex;
+  width: 100%;
+  height: 400px;
+  margin: 0;
+}
+
+h1 {
+  font-size: 16px;
+  text-align: center;
+}
+
+#map-container {
+    box-sizing: border-box;
+    width: 100%;
+}
+
+gmp-place-details-compact {
+  --gmp-mat-color-on-surface: light-dark(black, white);
+  --gmp-mat-color-surface: light-dark(white, black);
+  --gmp-mat-font-family: Google Sans Text, sans-serif;
+  --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');
+
+  width: 360px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+gmp-place-details-compact::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
+}
+/* [END maps_react_ui_kit_place_details_compact] */