Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ <h1>Maps JSAPI Samples</h1>
<li><a href='/samples/place-autocomplete-element/dist'>place-autocomplete-element</a></li>
<li><a href='/samples/place-autocomplete-map/dist'>place-autocomplete-map</a></li>
<li><a href='/samples/place-text-search/dist'>place-text-search</a></li>
<li><a href='/samples/ui-kit-customization/dist'>ui-kit-customization</a></li>
<li><a href='/samples/ui-kit-place-details/dist'>ui-kit-place-details</a></li>
<li><a href='/samples/ui-kit-place-details-compact/dist'>ui-kit-place-details-compact</a></li>
<li><a href='/samples/ui-kit-place-search-nearby/dist'>ui-kit-place-search-nearby</a></li>
Expand Down
13 changes: 13 additions & 0 deletions dist/samples/ui-kit-customization/app/.eslintsrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"extends": [
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"rules": {
"@typescript-eslint/ban-ts-comment": 0,
"@typescript-eslint/no-this-alias": 1,
"@typescript-eslint/no-empty-function": 1,
"@typescript-eslint/explicit-module-boundary-types": 1,
"@typescript-eslint/no-unused-vars": 1
}
}
33 changes: 33 additions & 0 deletions dist/samples/ui-kit-customization/app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# Google Maps JavaScript Sample

This sample is generated from @googlemaps/js-samples located at
https://github.com/googlemaps-samples/js-api-samples.

## Setup

### Before starting run:

`$npm i`

### Run an example on a local web server

First `cd` to the folder for the sample to run, then:

`$npm start`

### Build an individual example

From `samples/`:

`$npm run build --workspace=sample-name/`

### Build all of the examples.

From `samples/`:
`$npm run build-all`

## Feedback

For feedback related to this sample, please open a new issue on
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

248 changes: 248 additions & 0 deletions dist/samples/ui-kit-customization/app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
<!--
@license
Copyright 2025 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<!--[START maps_ui_kit_customization] -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="container">
<div class="controls">
<h1>Component settings</h1>
<section><label for="place">Search a
place</label><gmp-place-autocomplete></gmp-place-autocomplete>
</section>
<section><label for="place">Place ID</label><input type="text"
id="place-id" value="ChIJ3S-JXmauEmsRUcIaWtf4MzE" /></section>
<section><label for="component">Component</label><select
name="component" id="component">
<option selected value="gmp-place-details-compact">Place details
compact</option>
<option value="gmp-place-details">Place details full</option>
</select></section>
<section><label for="orientation">Orientation</label><select
name="orientation" id="orientation">
<option selected value="VERTICAL">Vertical</option>
<option value="HORIZONTAL">Horizontal</option>
</select></section>
<section><label for="truncationpreferred"><input type="checkbox"
class="" name="truncationpreferred" id="truncationpreferred"
value="truncation-preferred" />Truncation Preferred </label>
<p class="note">Select to truncate the place name and address to fit
on one line</p>
</section>
<section><label for="width">Width (150px - 450px)</label><input
type="range" id="width-slider" name="width" min="150" max="450"
step="10" value="350" /><span id="width-output">350px</span>
</section>
<hr />
<section>
<p class="heading">Content configuration</p>
<div><label><input type="radio" class="content-config" name="content"
id="content-standard" value="standard" />Standard content
</label><label><input checked type="radio" class="content-config"
name="content" id="content-all" value="all" />All contents
</label><label><input type="radio" class="content-config"
name="content" id="content-custom" value="custom" />Custom
content </label></div>
<div class="content-element-container"><label><input type="checkbox"
class="content-element" value="media" checked />Media
</label><label><input type="checkbox" class="content-element"
value="address" checked />Address </label><label><input
type="checkbox" class="content-element" value="rating"
checked />Rating </label><label><input type="checkbox"
class="content-element" value="type" checked />Type
</label><label><input type="checkbox" class="content-element"
value="price" checked />Price </label><label><input
type="checkbox" class="content-element"
value="accessible-entrance-icon" checked />Accessible Entrance
Icon </label><label><input type="checkbox" class="content-element"
value="open-now-status" checked />Open Now Status </label>
<label class="extra-content"><input
type="checkbox" class="content-element" value="opening-hours"
checked />Opening Hours </label><label
class="extra-content"><input type="checkbox"
class="content-element" value="website" checked />Website
</label><label class="extra-content"><input type="checkbox"
class="content-element" value="phone-number" checked />Phone
Number </label><label class="extra-content"><input
type="checkbox" class="content-element" value="summary"
checked />Summary </label><label class="extra-content"><input
type="checkbox" class="content-element"
value="type-specific-highlights" checked />Type Specific
Highlights </label><label class="extra-content"><input
type="checkbox" class="content-element" value="reviews"
checked />Reviews </label><label class="extra-content"><input
type="checkbox" class="content-element" value="plus-code"
checked />Plus Code </label><label
class="extra-content"><input type="checkbox"
class="content-element" value="feature-list" checked />Feature
List </label>
</div>
</section>
<hr />
<section>
<p class="heading">CSS Style Properties</p>
<div class="style-config">
<div><label>--gmp-mat-color-on-surface<br />(Regular text
color)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-on-surface"></div><a href="#"
class="reset" data-style="--gmp-mat-color-on-surface">Reset</a>
</div>
<div><label>--gmp-mat-color-on-surface-variant<br />(Less emphasized
text)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-on-surface-variant"></div><a href="#"
class="reset"
data-style="--gmp-mat-color-on-surface-variant">Reset</a>
</div>
<div><label>--gmp-mat-color-primary<br />(Review count and
links)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-primary"></div><a href="#" class="reset"
data-style="--gmp-mat-color-primary">Reset</a>
</div>
<div><label>--gmp-mat-color-info<br />(Accessible entrance
icon)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-info"></div><a href="#" class="reset"
data-style="--gmp-mat-color-info">Reset</a>
</div>
<div><label>--gmp-mat-color-neutral-container<br />(Container color
for image placeholder)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-neutral-container"></div><a href="#"
class="reset"
data-style="--gmp-mat-color-neutral-container">Reset</a>
</div>
<div><label>--gmp-mat-color-outline-decorative<br />(The element's
border)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-outline-decorative"></div> <a href="#"
class="reset"
data-style="--gmp-mat-color-outline-decorative">Reset</a>
</div>
<div> <label>--gmp-mat-color-positive<br />('Open' text in open now
status)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-positive"></div> <a href="#" class="reset"
data-style="--gmp-mat-color-positive">Reset</a>
</div>
<div> <label>--gmp-mat-color-negative<br />('Closed' text in open
now)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-negative"></div> <a href="#" class="reset"
data-style="--gmp-mat-color-negative">Reset</a>
</div>
<div> <label>--gmp-mat-color-on-secondary-container<br />(Text/icons
on Open In Map button)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-on-secondary-container"></div> <a href="#"
class="reset"
data-style="--gmp-mat-color-on-secondary-container">Reset</a>
</div>
<div> <label>--gmp-mat-color-secondary-container<br />(Background of
the Open in Maps button)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-secondary-container"></div> <a href="#"
class="reset"
data-style="--gmp-mat-color-secondary-container">Reset</a>
</div>
<div> <label>--gmp-mat-color-surface<br />(Backgrounds of the
element and attribution dialog)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-surface"></div> <a href="#" class="reset"
data-style="--gmp-mat-color-surface">Reset</a>
</div>
<div> <label>background-color<br />(Overrides the background color
of the element)</label>
<div class="color-wrapper"><input type="color"
id="background-color"></div> <a href="#" class="reset"
data-style="background-color">Reset</a>
</div>
<div> <label>--gmp-mat-color-disabled-surface<br />(Full: Empty
review stars)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-disabled-surface"></div> <a href="#"
class="reset"
data-style="--gmp-mat-color-disabled-surface">Reset</a>
</div>
<div> <label>--gmp-mat-color-on-neutral-container<br />(Full: Date
badge or EV charger availability badge when
unavailable)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-on-neutral-container"></div> <a href="#"
class="reset"
data-style="--gmp-mat-color-on-neutral-container">Reset</a>
</div>
<div> <label>--gmp-mat-color-on-positive-container<br />(Full: EV
charger availability badge when available)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-on-positive-container"></div> <a
href="#" class="reset"
data-style="--gmp-mat-color-on-positive-container">Reset</a>
</div>
<div> <label>--gmp-mat-color-positive-container<br />(Full:
Container color for EV charger availability badge when
available)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-color-positive-container"></div> <a href="#"
class="reset"
data-style="--gmp-mat-color-positive-container">Reset</a>
</div>
<div> <label>--gmp-mat-font-display-small<br />(Full: Place name
and text in About tab)</label>
<div class="color-wrapper"><input type="color"
id="--gmp-mat-font-display-small"></div> <a href="#"
class="reset"
data-style="--gmp-mat-font-display-small">Reset</a>
</div>
<div> <label>--gmp-mat-font-body-medium<br />(Body text in
attribution dialog)</label> <input type="text"
id="--gmp-mat-font-body-medium" value=""> </div>
<div> <label>--gmp-mat-font-body-small<br />(Address, rating,
type, pricin, open now status)</label> <input type="text"
id="--gmp-mat-font-body-small" value=""> </div>
<div> <label>--gmp-mat-font-family<br />(Base font
family)</label> <input type="text"
id="--gmp-mat-font-family" value=""> </div>
<div> <label>--gmp-mat-font-headline-medium<br />(Heading text
in attribution dialog)</label> <input type="text"
id="--gmp-mat-font-headline-medium" value=""> </div>
<div> <label>--gmp-mat-font-label-large<br />(Open in Maps
button and links)</label> <input type="text"
id="--gmp-mat-font-label-large" value=""> </div>
<div> <label>--gmp-mat-font-title-small<br />(Place
name)</label> <input type="text"
id="--gmp-mat-font-title-small" value=""> </div>
<div> <label>border<br />(Overrides the border of the
element)</label> <input type="text" id="border"> </div>
<div> <label>border-radius<br />(Overrides the border radius of
the element)</label> <input type="text" id="border-radius">
</div>
<div> <label>color-scheme<br />(Color scheme this element can be
rendered in)</label> <input type="text" id="color-scheme">
</div>
<div> <label>font-size<br />(Scales all text and icons in the
element)</label> <input type="text" id="font-size" value="">
</div>
</div>
</section>
</div>
<div class="contents">
<div class="widget-container"> </div>
</div>
</div>

<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))})
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>
<!--[END maps_ui_kit_customization] -->
Loading