Skip to content

Commit 0605920

Browse files
googlemaps-botgooglemaps-bot
authored
Update dist folder [skip ci] (#808)
1 parent 3833c35 commit 0605920

File tree

43 files changed

+2442
-8
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2442
-8
lines changed

‎dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DYsp_gI5.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DwWFQETP.js‎

Lines changed: 57 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/samples/react-ui-kit-place-details-compact/dist/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2025 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_react_ui_kit_place_details_compact] -->
8+
9+
<html lang="en">
10+
<head>
11+
<meta charset="utf-8" />
12+
<meta
13+
name="viewport"
14+
content="width=device-width, initial-scale=1.0, user-scalable=no" />
15+
<title>React - UI Kit Place Details Compact</title>
16+
<meta name="description" content="Places UI Kit Example" />
17+
<style>
18+
body {
19+
margin: 0;
20+
font-family: sans-serif;
21+
}
22+
#app {
23+
width: 100vw;
24+
height: 100vh;
25+
}
26+
</style>
27+
<script type="module" crossorigin src="./assets/index-DwWFQETP.js"></script>
28+
<link rel="stylesheet" crossorigin href="./assets/index-DYsp_gI5.css">
29+
</head>
30+
<body>
31+
<div id="app"></div>
32+
</body>
33+
</html>
34+
<!-- [END maps_react_ui_kit_place_details_compact] -->

‎dist/samples/react-ui-kit-place-details-compact/docs/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2025 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_react_ui_kit_place_details_compact] -->
8+
9+
<html lang="en">
10+
<head>
11+
<meta charset="utf-8" />
12+
<meta
13+
name="viewport"
14+
content="width=device-width, initial-scale=1.0, user-scalable=no" />
15+
<title>React - UI Kit Place Details Compact</title>
16+
<meta name="description" content="Places UI Kit Example" />
17+
<style>
18+
body {
19+
margin: 0;
20+
font-family: sans-serif;
21+
}
22+
#app {
23+
width: 100vw;
24+
height: 100vh;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div id="app"></div>
30+
<script type="module">
31+
import {renderToDom} from './src/app';
32+
33+
renderToDom(document.querySelector('#app'));
34+
</script>
35+
</body>
36+
</html>
37+
<!-- [END maps_react_ui_kit_place_details_compact] -->

‎dist/samples/react-ui-kit-place-details-compact/docs/src/app.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { jsx as _jsx } from "react/jsx-runtime";
2+
/*
3+
* @license
4+
* Copyright 2025 Google LLC. All Rights Reserved.
5+
* SPDX-License-Identifier: Apache-2.0
6+
*/
7+
{ /* [START maps_react_ui_kit_place_details_compact] */ }
8+
import React, { useEffect, useRef } from 'react';
9+
import { createRoot } from 'react-dom/client';
10+
import { APIProvider, useMapsLibrary } from '@vis.gl/react-google-maps';
11+
import './styles.css';
12+
const API_KEY = "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8";
13+
// Renders place details using a place ID.
14+
const PlaceDetails = ({ placeId }) => {
15+
const places = useMapsLibrary('places');
16+
const containerRef = useRef(null);
17+
useEffect(() => {
18+
if (!places || !containerRef.current) {
19+
return;
20+
}
21+
// Create the gmp-place-details-compact element.
22+
const placeDetails = document.createElement('gmp-place-details-compact');
23+
// Set the orientation.
24+
placeDetails.setAttribute('orientation', 'horizontal');
25+
// Create the gmp-place-details-place-request element.
26+
const placeRequest = document.createElement('gmp-place-details-place-request');
27+
// Set the place on the place request element.
28+
placeRequest.setAttribute('place', placeId);
29+
// Append the place request to the place details element.
30+
placeDetails.appendChild(placeRequest);
31+
// Create and append the content config and its children.
32+
const contentConfig = document.createElement('gmp-place-content-config');
33+
contentConfig.innerHTML = `
34+
<gmp-place-media lightbox-preferred></gmp-place-media>
35+
<gmp-place-rating></gmp-place-rating>
36+
<gmp-place-type></gmp-place-type>
37+
<gmp-place-price></gmp-place-price>
38+
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
39+
<gmp-place-open-now-status></gmp-place-open-now-status>
40+
<gmp-place-attribution></gmp-place-attribution>
41+
`;
42+
placeDetails.appendChild(contentConfig);
43+
// Append the place details element to the container.
44+
containerRef.current.innerHTML = ''; // Clear previous content
45+
containerRef.current.appendChild(placeDetails);
46+
}, [places, placeId]);
47+
return _jsx("div", { ref: containerRef, className: "place-details-container" });
48+
};
49+
const App = () => {
50+
return (_jsx(APIProvider, { apiKey: API_KEY, libraries: ['places'], children: _jsx("div", { className: "places-ui-kit", children: _jsx(PlaceDetails, { placeId: "ChIJ5bx0qiVu5kcRs_dMpI5ttiY" }) }) }));
51+
};
52+
export default App;
53+
export function renderToDom(container) {
54+
const root = createRoot(container);
55+
root.render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));
56+
}
57+
{ /* [END maps_react_ui_kit_place_details_compact] */ }

‎dist/samples/react-ui-kit-place-details-compact/docs/src/app.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
{/* [START maps_react_ui_kit_place_details_compact] */}
7+
import React, {useEffect, useRef} from 'react';
8+
import {createRoot} from 'react-dom/client';
9+
import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps';
10+
11+
import './styles.css';
12+
13+
const API_KEY = "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8";
14+
15+
type PlaceDetailsProps = {
16+
placeId: string;
17+
};
18+
19+
// Renders place details using a place ID.
20+
const PlaceDetails = ({placeId}: PlaceDetailsProps) => {
21+
const places = useMapsLibrary('places');
22+
const containerRef = useRef<HTMLDivElement>(null);
23+
24+
useEffect(() => {
25+
if (!places || !containerRef.current) {
26+
return;
27+
}
28+
// Create the gmp-place-details-compact element.
29+
const placeDetails = document.createElement('gmp-place-details-compact');
30+
31+
// Set the orientation.
32+
placeDetails.setAttribute('orientation', 'horizontal');
33+
34+
// Create the gmp-place-details-place-request element.
35+
const placeRequest = document.createElement(
36+
'gmp-place-details-place-request',
37+
);
38+
39+
// Set the place on the place request element.
40+
placeRequest.setAttribute('place', placeId);
41+
42+
// Append the place request to the place details element.
43+
placeDetails.appendChild(placeRequest);
44+
45+
// Create and append the content config and its children.
46+
const contentConfig = document.createElement('gmp-place-content-config');
47+
contentConfig.innerHTML = `
48+
<gmp-place-media lightbox-preferred></gmp-place-media>
49+
<gmp-place-rating></gmp-place-rating>
50+
<gmp-place-type></gmp-place-type>
51+
<gmp-place-price></gmp-place-price>
52+
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
53+
<gmp-place-open-now-status></gmp-place-open-now-status>
54+
<gmp-place-attribution></gmp-place-attribution>
55+
`;
56+
placeDetails.appendChild(contentConfig);
57+
58+
// Append the place details element to the container.
59+
containerRef.current.innerHTML = ''; // Clear previous content
60+
containerRef.current.appendChild(placeDetails);
61+
}, [places, placeId]);
62+
63+
return <div ref={containerRef} className="place-details-container" />;
64+
};
65+
66+
const App = () => {
67+
return (
68+
<APIProvider apiKey={API_KEY} libraries={['places']}>
69+
<div className="places-ui-kit">
70+
<PlaceDetails placeId="ChIJ5bx0qiVu5kcRs_dMpI5ttiY" />
71+
</div>
72+
</APIProvider>
73+
);
74+
};
75+
76+
export default App;
77+
78+
export function renderToDom(container: HTMLElement) {
79+
const root = createRoot(container);
80+
81+
root.render(
82+
<React.StrictMode>
83+
<App />
84+
</React.StrictMode>
85+
);
86+
}
87+
{/* [END maps_react_ui_kit_place_details_compact] */}
88+

‎dist/samples/react-ui-kit-place-details-compact/docs/src/styles.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
/* [START maps_react_ui_kit_place_details_compact] */
7+
html,
8+
body {
9+
display: flex;
10+
width: 100%;
11+
height: 400px;
12+
margin: 0;
13+
}
14+
15+
h1 {
16+
font-size: 16px;
17+
text-align: center;
18+
}
19+
20+
#map-container {
21+
box-sizing: border-box;
22+
width: 100%;
23+
}
24+
25+
gmp-place-details-compact {
26+
--gmp-mat-color-on-surface: light-dark(black, white);
27+
--gmp-mat-color-surface: light-dark(white, black);
28+
--gmp-mat-font-family: Google Sans Text, sans-serif;
29+
--gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');
30+
31+
width: 360px;
32+
border: none;
33+
padding: 0;
34+
margin: 0;
35+
position: relative;
36+
}
37+
38+
gmp-place-details-compact::after {
39+
content: "";
40+
position: absolute;
41+
top: 100%;
42+
left: 50%;
43+
transform: translateX(-50%);
44+
width: 0;
45+
height: 0;
46+
border-left: 16px solid transparent;
47+
border-right: 16px solid transparent;
48+
border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
49+
}
50+
/* [END maps_react_ui_kit_place_details_compact] */

0 commit comments

Comments
 (0)