Skip to content

Commit 1341d0d

Browse files
ejhaseldenejhaselden
authored
Add Places UI Kit customization tool (#459)
1 parent fd5a259 commit 1341d0d

File tree

6 files changed

+824
-0
lines changed

6 files changed

+824
-0
lines changed

‎samples/ui-kit-customization/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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).
33+

‎samples/ui-kit-customization/index.html‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
<!--
2+
@license
3+
Copyright 2025 Google LLC. All Rights Reserved.
4+
SPDX-License-Identifier: Apache-2.0
5+
-->
6+
<!--[START maps_ui_kit_customization] -->
7+
<!DOCTYPE html>
8+
<html>
9+
<head>
10+
<meta charset="utf-8">
11+
<link rel="stylesheet" href="style.css">
12+
<script type="module" src="./index.js"></script>
13+
</head>
14+
<body>
15+
<div id="container">
16+
<div class="controls">
17+
<h1>Component settings</h1>
18+
<section><label for="place">Search a
19+
place</label><gmp-place-autocomplete></gmp-place-autocomplete>
20+
</section>
21+
<section><label for="place">Place ID</label><input type="text"
22+
id="place-id" value="ChIJ3S-JXmauEmsRUcIaWtf4MzE" /></section>
23+
<section><label for="component">Component</label><select
24+
name="component" id="component">
25+
<option selected value="gmp-place-details-compact">Place details
26+
compact</option>
27+
<option value="gmp-place-details">Place details full</option>
28+
</select></section>
29+
<section><label for="orientation">Orientation</label><select
30+
name="orientation" id="orientation">
31+
<option selected value="VERTICAL">Vertical</option>
32+
<option value="HORIZONTAL">Horizontal</option>
33+
</select></section>
34+
<section><label for="truncationpreferred"><input type="checkbox"
35+
class="" name="truncationpreferred" id="truncationpreferred"
36+
value="truncation-preferred" />Truncation Preferred </label>
37+
<p class="note">Select to truncate the place name and address to fit
38+
on one line</p>
39+
</section>
40+
<section><label for="width">Width (150px - 450px)</label><input
41+
type="range" id="width-slider" name="width" min="150" max="450"
42+
step="10" value="350" /><span id="width-output">350px</span>
43+
</section>
44+
<hr />
45+
<section>
46+
<p class="heading">Content configuration</p>
47+
<div><label><input type="radio" class="content-config" name="content"
48+
id="content-standard" value="standard" />Standard content
49+
</label><label><input checked type="radio" class="content-config"
50+
name="content" id="content-all" value="all" />All contents
51+
</label><label><input type="radio" class="content-config"
52+
name="content" id="content-custom" value="custom" />Custom
53+
content </label></div>
54+
<div class="content-element-container"><label><input type="checkbox"
55+
class="content-element" value="media" checked />Media
56+
</label><label><input type="checkbox" class="content-element"
57+
value="address" checked />Address </label><label><input
58+
type="checkbox" class="content-element" value="rating"
59+
checked />Rating </label><label><input type="checkbox"
60+
class="content-element" value="type" checked />Type
61+
</label><label><input type="checkbox" class="content-element"
62+
value="price" checked />Price </label><label><input
63+
type="checkbox" class="content-element"
64+
value="accessible-entrance-icon" checked />Accessible Entrance
65+
Icon </label><label><input type="checkbox" class="content-element"
66+
value="open-now-status" checked />Open Now Status </label>
67+
<label class="extra-content"><input
68+
type="checkbox" class="content-element" value="opening-hours"
69+
checked />Opening Hours </label><label
70+
class="extra-content"><input type="checkbox"
71+
class="content-element" value="website" checked />Website
72+
</label><label class="extra-content"><input type="checkbox"
73+
class="content-element" value="phone-number" checked />Phone
74+
Number </label><label class="extra-content"><input
75+
type="checkbox" class="content-element" value="summary"
76+
checked />Summary </label><label class="extra-content"><input
77+
type="checkbox" class="content-element"
78+
value="type-specific-highlights" checked />Type Specific
79+
Highlights </label><label class="extra-content"><input
80+
type="checkbox" class="content-element" value="reviews"
81+
checked />Reviews </label><label class="extra-content"><input
82+
type="checkbox" class="content-element" value="plus-code"
83+
checked />Plus Code </label><label
84+
class="extra-content"><input type="checkbox"
85+
class="content-element" value="feature-list" checked />Feature
86+
List </label>
87+
</div>
88+
</section>
89+
<hr />
90+
<section>
91+
<p class="heading">CSS Style Properties</p>
92+
<div class="style-config">
93+
<div><label>--gmp-mat-color-on-surface<br />(Regular text
94+
color)</label>
95+
<div class="color-wrapper"><input type="color"
96+
id="--gmp-mat-color-on-surface"></div><a href="#"
97+
class="reset" data-style="--gmp-mat-color-on-surface">Reset</a>
98+
</div>
99+
<div><label>--gmp-mat-color-on-surface-variant<br />(Less emphasized
100+
text)</label>
101+
<div class="color-wrapper"><input type="color"
102+
id="--gmp-mat-color-on-surface-variant"></div><a href="#"
103+
class="reset"
104+
data-style="--gmp-mat-color-on-surface-variant">Reset</a>
105+
</div>
106+
<div><label>--gmp-mat-color-primary<br />(Review count and
107+
links)</label>
108+
<div class="color-wrapper"><input type="color"
109+
id="--gmp-mat-color-primary"></div><a href="#" class="reset"
110+
data-style="--gmp-mat-color-primary">Reset</a>
111+
</div>
112+
<div><label>--gmp-mat-color-info<br />(Accessible entrance
113+
icon)</label>
114+
<div class="color-wrapper"><input type="color"
115+
id="--gmp-mat-color-info"></div><a href="#" class="reset"
116+
data-style="--gmp-mat-color-info">Reset</a>
117+
</div>
118+
<div><label>--gmp-mat-color-neutral-container<br />(Container color
119+
for image placeholder)</label>
120+
<div class="color-wrapper"><input type="color"
121+
id="--gmp-mat-color-neutral-container"></div><a href="#"
122+
class="reset"
123+
data-style="--gmp-mat-color-neutral-container">Reset</a>
124+
</div>
125+
<div><label>--gmp-mat-color-outline-decorative<br />(The element's
126+
border)</label>
127+
<div class="color-wrapper"><input type="color"
128+
id="--gmp-mat-color-outline-decorative"></div> <a href="#"
129+
class="reset"
130+
data-style="--gmp-mat-color-outline-decorative">Reset</a>
131+
</div>
132+
<div> <label>--gmp-mat-color-positive<br />('Open' text in open now
133+
status)</label>
134+
<div class="color-wrapper"><input type="color"
135+
id="--gmp-mat-color-positive"></div> <a href="#" class="reset"
136+
data-style="--gmp-mat-color-positive">Reset</a>
137+
</div>
138+
<div> <label>--gmp-mat-color-negative<br />('Closed' text in open
139+
now)</label>
140+
<div class="color-wrapper"><input type="color"
141+
id="--gmp-mat-color-negative"></div> <a href="#" class="reset"
142+
data-style="--gmp-mat-color-negative">Reset</a>
143+
</div>
144+
<div> <label>--gmp-mat-color-on-secondary-container<br />(Text/icons
145+
on Open In Map button)</label>
146+
<div class="color-wrapper"><input type="color"
147+
id="--gmp-mat-color-on-secondary-container"></div> <a href="#"
148+
class="reset"
149+
data-style="--gmp-mat-color-on-secondary-container">Reset</a>
150+
</div>
151+
<div> <label>--gmp-mat-color-secondary-container<br />(Background of
152+
the Open in Maps button)</label>
153+
<div class="color-wrapper"><input type="color"
154+
id="--gmp-mat-color-secondary-container"></div> <a href="#"
155+
class="reset"
156+
data-style="--gmp-mat-color-secondary-container">Reset</a>
157+
</div>
158+
<div> <label>--gmp-mat-color-surface<br />(Backgrounds of the
159+
element and attribution dialog)</label>
160+
<div class="color-wrapper"><input type="color"
161+
id="--gmp-mat-color-surface"></div> <a href="#" class="reset"
162+
data-style="--gmp-mat-color-surface">Reset</a>
163+
</div>
164+
<div> <label>background-color<br />(Overrides the background color
165+
of the element)</label>
166+
<div class="color-wrapper"><input type="color"
167+
id="background-color"></div> <a href="#" class="reset"
168+
data-style="background-color">Reset</a>
169+
</div>
170+
<div> <label>--gmp-mat-color-disabled-surface<br />(Full: Empty
171+
review stars)</label>
172+
<div class="color-wrapper"><input type="color"
173+
id="--gmp-mat-color-disabled-surface"></div> <a href="#"
174+
class="reset"
175+
data-style="--gmp-mat-color-disabled-surface">Reset</a>
176+
</div>
177+
<div> <label>--gmp-mat-color-on-neutral-container<br />(Full: Date
178+
badge or EV charger availability badge when
179+
unavailable)</label>
180+
<div class="color-wrapper"><input type="color"
181+
id="--gmp-mat-color-on-neutral-container"></div> <a href="#"
182+
class="reset"
183+
data-style="--gmp-mat-color-on-neutral-container">Reset</a>
184+
</div>
185+
<div> <label>--gmp-mat-color-on-positive-container<br />(Full: EV
186+
charger availability badge when available)</label>
187+
<div class="color-wrapper"><input type="color"
188+
id="--gmp-mat-color-on-positive-container"></div> <a
189+
href="#" class="reset"
190+
data-style="--gmp-mat-color-on-positive-container">Reset</a>
191+
</div>
192+
<div> <label>--gmp-mat-color-positive-container<br />(Full:
193+
Container color for EV charger availability badge when
194+
available)</label>
195+
<div class="color-wrapper"><input type="color"
196+
id="--gmp-mat-color-positive-container"></div> <a href="#"
197+
class="reset"
198+
data-style="--gmp-mat-color-positive-container">Reset</a>
199+
</div>
200+
<div> <label>--gmp-mat-font-display-small<br />(Full: Place name
201+
and text in About tab)</label>
202+
<div class="color-wrapper"><input type="color"
203+
id="--gmp-mat-font-display-small"></div> <a href="#"
204+
class="reset"
205+
data-style="--gmp-mat-font-display-small">Reset</a>
206+
</div>
207+
<div> <label>--gmp-mat-font-body-medium<br />(Body text in
208+
attribution dialog)</label> <input type="text"
209+
id="--gmp-mat-font-body-medium" value=""> </div>
210+
<div> <label>--gmp-mat-font-body-small<br />(Address, rating,
211+
type, pricin, open now status)</label> <input type="text"
212+
id="--gmp-mat-font-body-small" value=""> </div>
213+
<div> <label>--gmp-mat-font-family<br />(Base font
214+
family)</label> <input type="text"
215+
id="--gmp-mat-font-family" value=""> </div>
216+
<div> <label>--gmp-mat-font-headline-medium<br />(Heading text
217+
in attribution dialog)</label> <input type="text"
218+
id="--gmp-mat-font-headline-medium" value=""> </div>
219+
<div> <label>--gmp-mat-font-label-large<br />(Open in Maps
220+
button and links)</label> <input type="text"
221+
id="--gmp-mat-font-label-large" value=""> </div>
222+
<div> <label>--gmp-mat-font-title-small<br />(Place
223+
name)</label> <input type="text"
224+
id="--gmp-mat-font-title-small" value=""> </div>
225+
<div> <label>border<br />(Overrides the border of the
226+
element)</label> <input type="text" id="border"> </div>
227+
<div> <label>border-radius<br />(Overrides the border radius of
228+
the element)</label> <input type="text" id="border-radius">
229+
</div>
230+
<div> <label>color-scheme<br />(Color scheme this element can be
231+
rendered in)</label> <input type="text" id="color-scheme">
232+
</div>
233+
<div> <label>font-size<br />(Scales all text and icons in the
234+
element)</label> <input type="text" id="font-size" value="">
235+
</div>
236+
</div>
237+
</section>
238+
</div>
239+
<div class="contents">
240+
<div class="widget-container"> </div>
241+
</div>
242+
</div>
243+
244+
<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))})
245+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
246+
</body>
247+
</html>
248+
<!--[END maps_ui_kit_customization] -->

0 commit comments

Comments
 (0)