Skip to content

Commit f177411

Browse files
googlemaps-botgooglemaps-bot
authored
Update dist folder [skip ci] (#596)
1 parent 0f10dc4 commit f177411

File tree

15 files changed

+1366
-457
lines changed

15 files changed

+1366
-457
lines changed

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

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

0 commit comments

Comments
 (0)