Skip to content

Commit 864b464

Browse files
anglarettanglarett
committed
feat: add react place details component
1 parent 4f42c48 commit 864b464

File tree

9 files changed

+921
-7
lines changed

9 files changed

+921
-7
lines changed

‎package-lock.json‎

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

‎samples/react-ui-kit-place-details/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Google Maps JavaScript Sample
2+
3+
This sample is generated from @googlemaps/js-samples located at
4+
https://github.com/googlemaps-samples/js-api-samples.
5+
6+
## Setup
7+
8+
### Before starting run:
9+
10+
`$npm i`
11+
12+
### Run an example on a local web server
13+
14+
First `cd` to the folder for the sample to run, then:
15+
16+
`$npm start`
17+
18+
### Build an individual example
19+
20+
From `samples/`:
21+
22+
`$npm run build --workspace=sample-name/`
23+
24+
### Build all of the examples.
25+
26+
From `samples/`:
27+
`$npm run build-all`
28+
29+
## Feedback
30+
31+
For feedback related to this sample, please open a new issue on
32+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2025 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START react_ui_kit_place_details] -->
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 - Places UI Kit Example</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 '@vis.gl/react-google-maps/examples.css';
32+
import '@vis.gl/react-google-maps/examples.js';
33+
import {renderToDom} from './src/app';
34+
35+
renderToDom(document.querySelector('#app'));
36+
</script>
37+
</body>
38+
</html>
39+
<!-- [START react_ui_kit_place_details] -->

‎samples/react-ui-kit-place-details/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "@js-api-samples/react-ui-kit-place-details",
3+
"version": "1.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"start": "vite",
7+
"build": "tsc && vite build",
8+
"test": "tsc",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@vis.gl/react-google-maps": "latest",
13+
"react": "^19.0.0",
14+
"react-dom": "^19.0.0"
15+
},
16+
"devDependencies": {
17+
"@types/react": "^18.3.1",
18+
"@types/react-dom": "^18.3.0",
19+
"typescript": "^5.5.3",
20+
"vite": "^5.3.4"
21+
}
22+
}

‎samples/react-ui-kit-place-details/screenshots/gmp-place-details.png‎

789 KB
Loading

‎samples/react-ui-kit-place-details/src/app.jsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
// [START react_ui_kit_place_details]
7+
import React from 'react';
8+
import { createRoot } from 'react-dom/client';
9+
import { APIProvider, useMapsLibrary } from '@vis.gl/react-google-maps';
10+
import './styles.css';
11+
const API_KEY = globalThis.GOOGLE_MAPS_API_KEY ?? process.env.GOOGLE_MAPS_API_KEY;
12+
if (!API_KEY) {
13+
console.error('Missing Google Maps API key');
14+
}
15+
const PlaceDetails = ({ placeId }) => {
16+
const places = useMapsLibrary('places');
17+
if (!places) {
18+
return null;
19+
}
20+
return (<div className="place-details-container">
21+
<gmp-place-details>
22+
<gmp-place-details-place-request place={placeId}/>
23+
<gmp-place-content-config>
24+
<gmp-place-address></gmp-place-address>
25+
<gmp-place-rating></gmp-place-rating>
26+
<gmp-place-type></gmp-place-type>
27+
<gmp-place-price></gmp-place-price>
28+
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
29+
<gmp-place-opening-hours></gmp-place-opening-hours>
30+
<gmp-place-website></gmp-place-website>
31+
<gmp-place-phone-number></gmp-place-phone-number>
32+
<gmp-place-summary></gmp-place-summary>
33+
<gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
34+
<gmp-place-reviews></gmp-place-reviews>
35+
<gmp-place-feature-list></gmp-place-feature-list>
36+
<gmp-place-media lightbox-preferred></gmp-place-media>
37+
<gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
38+
</gmp-place-content-config>
39+
</gmp-place-details>
40+
</div>);
41+
};
42+
const App = () => {
43+
return (<APIProvider apiKey={API_KEY} libraries={['places']}>
44+
<div className="places-ui-kit">
45+
<PlaceDetails placeId="ChIJC8HakaIRkFQRiOgkgdHmqkk"/>
46+
</div>
47+
</APIProvider>);
48+
};
49+
export default App;
50+
export function renderToDom(container) {
51+
const root = createRoot(container);
52+
root.render(<React.StrictMode>
53+
<App />
54+
</React.StrictMode>);
55+
}
56+
// [END react_ui_kit_place_details]

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
// [START react_ui_kit_place_details]
7+
import React 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 =
14+
globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
15+
16+
if (!API_KEY) {
17+
console.error('Missing Google Maps API key');
18+
}
19+
20+
type PlaceDetailsProps = {
21+
placeId: string;
22+
};
23+
24+
// Renders place details using a place ID.
25+
const PlaceDetails = ({placeId}: PlaceDetailsProps) => {
26+
const places = useMapsLibrary('places');
27+
28+
// Wait for the places library to load.
29+
if (!places) {
30+
return null;
31+
}
32+
33+
return (
34+
<div className="place-details-container">
35+
<gmp-place-details>
36+
<gmp-place-details-place-request place={placeId} />
37+
<gmp-place-content-config>
38+
<gmp-place-address></gmp-place-address>
39+
<gmp-place-rating></gmp-place-rating>
40+
<gmp-place-type></gmp-place-type>
41+
<gmp-place-price></gmp-place-price>
42+
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
43+
<gmp-place-opening-hours></gmp-place-opening-hours>
44+
<gmp-place-website></gmp-place-website>
45+
<gmp-place-phone-number></gmp-place-phone-number>
46+
<gmp-place-summary></gmp-place-summary>
47+
<gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
48+
<gmp-place-reviews></gmp-place-reviews>
49+
<gmp-place-feature-list></gmp-place-feature-list>
50+
<gmp-place-media lightbox-preferred></gmp-place-media>
51+
<gmp-place-attribution
52+
light-scheme-color="gray"
53+
dark-scheme-color="white"></gmp-place-attribution>
54+
</gmp-place-content-config>
55+
</gmp-place-details>
56+
</div>
57+
);
58+
};
59+
60+
const App = () => {
61+
return (
62+
<APIProvider apiKey={API_KEY} libraries={['places']}>
63+
<div className="places-ui-kit">
64+
<PlaceDetails placeId="ChIJC8HakaIRkFQRiOgkgdHmqkk" />
65+
</div>
66+
</APIProvider>
67+
);
68+
};
69+
70+
export default App;
71+
72+
export function renderToDom(container: HTMLElement) {
73+
const root = createRoot(container);
74+
75+
root.render(
76+
<React.StrictMode>
77+
<App />
78+
</React.StrictMode>
79+
);
80+
}
81+
// [END react_ui_kit_place_details]
82+

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
/* [START react_ui_kit_place_details] */
7+
#map {
8+
height: 100%;
9+
}
10+
11+
gmp-map {
12+
height: 100%;
13+
}
14+
15+
.widget-container {
16+
background-color: black;
17+
padding: 1rem;
18+
border-radius: 0.5rem;
19+
max-height: calc(100% - 2rem);
20+
overflow: auto;
21+
}
22+
23+
.place-details-container {
24+
position: relative;
25+
width: 360px;
26+
margin: auto;
27+
margin-top:20px;
28+
max-height: 720px;
29+
overflow: auto;
30+
}
31+
/* [END react_ui_kit_place_details] */

‎samples/react-ui-kit-place-details/tsconfig.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "esnext",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"lib": [
8+
"es2015",
9+
"esnext",
10+
"es6",
11+
"dom",
12+
"dom.iterable"
13+
],
14+
"moduleResolution": "node",
15+
"jsx": "react-jsx",
16+
"allowSyntheticDefaultImports": true
17+
}
18+
}

0 commit comments

Comments
 (0)