diff --git a/dist/index.html b/dist/index.html index 94357c56..97ea3ed4 100644 --- a/dist/index.html +++ b/dist/index.html @@ -43,6 +43,7 @@

Maps JSAPI Samples

  • place-autocomplete-element
  • place-autocomplete-map
  • place-text-search
    • +
  • ui-kit-customization
  • ui-kit-place-details
  • ui-kit-place-details-compact
  • ui-kit-place-search-nearby
    • diff --git a/dist/samples/ui-kit-customization/app/.eslintsrc.json b/dist/samples/ui-kit-customization/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/ui-kit-customization/app/.eslintsrc.json @@ -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 + } +} diff --git a/dist/samples/ui-kit-customization/app/README.md b/dist/samples/ui-kit-customization/app/README.md new file mode 100644 index 00000000..62904810 --- /dev/null +++ b/dist/samples/ui-kit-customization/app/README.md @@ -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). + diff --git a/dist/samples/ui-kit-customization/app/index.html b/dist/samples/ui-kit-customization/app/index.html new file mode 100644 index 00000000..72b10958 --- /dev/null +++ b/dist/samples/ui-kit-customization/app/index.html @@ -0,0 +1,248 @@ + + + + + + + + + + +
    +
    +

    Component settings

    +
    +
    +
    +
    +
    +
    +

    Select to truncate the place name and address to fit + on one line

    +
    +
    350px +
    +
    +
    +

    Content configuration

    +
    +
    + +
    +
    +
    +
    +

    CSS Style Properties

    +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/dist/samples/ui-kit-customization/app/index.ts b/dist/samples/ui-kit-customization/app/index.ts new file mode 100644 index 00000000..e838dde1 --- /dev/null +++ b/dist/samples/ui-kit-customization/app/index.ts @@ -0,0 +1,347 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_customization] */ +const searchPlace = document.querySelector('gmp-place-autocomplete') as any; +const componentType = document.getElementById("component") as any; +const layoutOrientation = document.getElementById("orientation") as any; + +const widgetContainer = document.querySelector(".widget-container") as any; +const contentConfig = document.querySelectorAll(".content-config") as any; +const contentElemContainer = document.querySelector( + ".content-element-container") as any; +const contentElem = document.querySelectorAll(".content-element") as any; +const contentsExtra = document.querySelectorAll('.extra-content') as any; + + +const styleColors = document.querySelectorAll("input[type='color']") as any; +const styleText = document.querySelectorAll(".style-config input[type='text']") as any; +const placeId = document.getElementById("place-id") as any; +const widthSlider = document.getElementById("width-slider") as any; +const truncationControl = document.getElementById("truncationpreferred") as any; +const styleReset = document.querySelectorAll(".reset") as any; + +let settings = { + "placeId": "ChIJ3S-JXmauEmsRUcIaWtf4MzE", + "element": "gmp-place-details-compact", + "orientation": "VERTICAL", + "all": true, + "standard": false, + "custom": false, + "contentType": "all", + "truncationPreferred": false, + "contents": { + "media": true, + "address": true, + "rating": true, + "type": true, + "price": true, + "accessible-entrance-icon": true, + "open-now-status": true, + "attribution": true + }, + "extraContents": { + "website": true, + "phone-number": true, + "opening-hours": true, + "summary": true, + "type-specific-highlights": true, + "reviews": true, + "plus-code": true, + "feature-list": true + } +}; + +let customizedStyle = { + "--gmp-mat-color-info": "", + "--gmp-mat-color-negative": "", + "--gmp-mat-color-neutral-container": "", + "--gmp-mat-color-on-secondary-container": "", + "--gmp-mat-color-on-surface": "", + "--gmp-mat-color-surface": "", + "--gmp-mat-color-on-surface-variant": "", + "--gmp-mat-color-outline-decorative": "", + "--gmp-mat-color-positive": "", + "--gmp-mat-color-primary": "", + "--gmp-mat-color-secondary-container": "", + "--gmp-mat-color-disabled-surface": "", + "--gmp-mat-font-body-medium": "", + "--gmp-mat-font-body-small": "", + "--gmp-mat-font-family": "", + "--gmp-mat-font-headline-medium": "", + "--gmp-mat-font-label-large": "", + "--gmp-mat-font-title-small": "", + "--gmp-mat-color-on-neutral-container": "", + "--gmp-mat-color-on-positive-container": "", + "--gmp-mat-color-positive-container": "", + "--gmp-mat-font-display-small": "", + "background-color": "", + "border": "", + "border-radius": "", + "font-size": "" +} + +let placeElement, placeRequest, gmpPlaceAll, gmpPlaceStandard, gmpContentConfig, + gmpContentConfigFull; + + +async function init() { + await google.maps.importLibrary("places"); + + placeRequest = document.createElement('gmp-place-details-place-request'); + gmpPlaceAll = document.createElement('gmp-place-all-content'); + gmpPlaceStandard = document.createElement('gmp-place-standard-content'); + gmpContentConfig = document.createElement('gmp-place-content-config'); + + + detailsConstructor(); //Construct the place details element + initSearchPlace(); //Initialize Autocomplete search + widgetSelector(); //Handlers for controls + styleCustomization(); //css properties +} + +/* Initialize Autocomplete for searching places */ +function initSearchPlace() { + searchPlace.addEventListener('gmp-select', ({ + placePrediction + }) => { + placePrediction.toPlace().fetchFields({ + fields: ['id'] + }).then((place) => { + placeId.value = place.place.id; + settings.placeId = placeId.value; + updateWidget(); + }); + }); + +} + +function widgetSelector() { + /* Place ID input */ + placeId.addEventListener("input", () => { + settings.placeId = placeId.value; + updateWidget(); + }); + + /* Select a component */ + componentType.addEventListener("change", () => { + settings.element = componentType.value; + + if (componentType.value == "gmp-place-details") { + layoutOrientation.disabled = + true; //horizontal orientation is not available for full version for now + settings.truncationPreferred = false; + truncationControl.disabled = true; + if (settings.custom) { + //display extra content elements config for full version + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + } else { + layoutOrientation.disabled = false; + settings.truncationPreferred = false; + truncationControl.disabled = false; + if (settings.custom) { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } + } + detailsConstructor(); + }); + + /* Select widget orientation */ + layoutOrientation.addEventListener("change", () => { + settings.orientation = layoutOrientation.value; + updateWidget(); + }); + + /* Apply Truncation to widget */ + truncationControl.addEventListener("change", () => { + settings.truncationPreferred = truncationControl.checked; + updateWidget(); + }); + + /* Switch between Standard, All, Custom radio buttons */ + contentConfig.forEach((config) => { + config.addEventListener("change", (event) => { + switch (event.target.value) { + case 'standard': + contentElemContainer.style.display = "none"; + settings.all = false; + settings.standard = true; + settings.custom = false; + break; + case 'all': + contentElemContainer.style.display = "none"; + settings.all = true; + settings.standard = false; + settings.custom = false; + break; + case 'custom': + contentElemContainer.style.display = "grid"; + settings.all = false; + settings.standard = false; + settings.custom = true; + if (settings.element == "gmp-place-details-compact") { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } else if (settings.element == "gmp-place-details") { + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + break; + } + updateWidget(); + }); + }); + + contentElem.forEach((element) => { + element.addEventListener("change", (event) => { + settings.contents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); + + contentsExtra.forEach((element) => { + element.addEventListener("change", (event) => { + settings.extraContents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); + +} + +function styleCustomization() { + styleColors.forEach((style) => { + style.addEventListener("input", (event) => { + customizedStyle[event.target.id] = event.target.value; + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + + styleReset.forEach((item) => { + item.addEventListener("click", (event) => { + event.preventDefault(); + // @ts-ignore + document.getElementById(event.target.dataset.style).value = + "#000000"; + placeElement.style.removeProperty(event.target.dataset.style); + }); + + }); + + styleText.forEach((style) => { + style.addEventListener("input", (event) => { + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + + widthSlider.addEventListener("input", (event) => { + placeElement.style.width = `${event.target.value}px`; + // @ts-ignore + document.getElementById("width-output").innerHTML = + `${event.target.value}px`; + }); +} + + + +/* Construct Place Details widgets */ +function detailsConstructor() { + /* Create the Element(compact or full) */ + placeElement = document.createElement(settings.element); + updateWidget(); +} + + +/* Update the widget */ +function updateWidget() { + placeRequest.place = settings.placeId; + placeElement.orientation = settings.orientation; + placeElement.truncationPreferred = settings.truncationPreferred; + + widgetContainer.innerHTML = ''; + widgetContainer.appendChild(placeElement); + + placeElement.innerHTML = ''; + placeElement.appendChild(placeRequest); + + if (placeElement.contains(gmpPlaceStandard)) { + placeElement.removeChild(gmpPlaceStandard) + } + if (placeElement.contains(gmpPlaceAll)) { + placeElement.removeChild(gmpPlaceAll) + } + if (placeElement.contains(gmpContentConfig)) { + placeElement.removeChild(gmpContentConfig) + } + + //Configure elements for compact layout + gmpContentConfig.innerHTML = ''; + for (let property in settings.contents) { + if (settings.contents[property]) { + //include content + if (!gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.appendChild(document.createElement( + `gmp-place-${property}`)); + } + } else { + //remove content + if (gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.removeChild(gmpContentConfig.querySelector( + `gmp-place-${property}`)); + } + } + } + + //Configure elements for full layout + gmpContentConfigFull = gmpContentConfig.cloneNode(true); + for (let property in settings.extraContents) { + if (settings.extraContents[property]) { + //include content + if (!gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.appendChild(document.createElement( + `gmp-place-${property}`)); + } + } else { + //remove content + if (gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.removeChild(gmpContentConfigFull.querySelector( + `gmp-place-${property}`)); + } + } + } + + if (settings.all) { + placeElement.appendChild(gmpPlaceAll); + } + + if (settings.standard) { + placeElement.appendChild(gmpPlaceStandard); + } + + if (settings.custom) { + if (settings.element == "gmp-place-details-compact") { + placeElement.appendChild(gmpContentConfig); + } + + if (settings.element == "gmp-place-details") { + placeElement.appendChild(gmpContentConfigFull); + } + + } + + +} + + +init(); +/* [END maps_ui_kit_customization] */ diff --git a/dist/samples/ui-kit-customization/app/package.json b/dist/samples/ui-kit-customization/app/package.json new file mode 100644 index 00000000..3a291e9c --- /dev/null +++ b/dist/samples/ui-kit-customization/app/package.json @@ -0,0 +1,15 @@ +{ + "name": "@js-api-samples/ui-kit-customization", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh ui-kit-customization && bash ../app.sh ui-kit-customization && bash ../docs.sh ui-kit-customization && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-customization", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } + } + diff --git a/dist/samples/ui-kit-customization/app/style.css b/dist/samples/ui-kit-customization/app/style.css new file mode 100644 index 00000000..03d945c3 --- /dev/null +++ b/dist/samples/ui-kit-customization/app/style.css @@ -0,0 +1,164 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_customization] */ +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; +} + +body { + font: 400 16px / 24px Google Sans, sans-serif; +} + +h1 { + font-size: 1rem; +} + +input[type="text"], +select { + border: 1px solid #ccc; + padding: 10px 8px; + border-radius: 5px; + width: 100%; +} + +input[type="text"] { + width: 96%; +} + +label { + display: block; + color: #4a5568; + font-size: 0.8rem; + margin: 8px 0 3px 0; +} + +p.note { + color: #4a5568; + font-size: 0.8rem; + line-height: 0.8rem; + margin: 0; +} + +hr { + border: 1px solid #eee; + border-radius: 50%; +} + +a.reset, +span { + color: #4a5568; + font-size: 0.8rem; +} + +#container { + display: flex; + gap: 30px; + align-items: flex-start; +} + +.controls { + width: 40%; + padding: 20px; + max-height: 1000px; + overflow: scroll; +} + +section { + margin: 10px 0px; + padding: 0 0 5px 0; +} + +gmp-place-autocomplete { + display: inline-block; + width: 100%; +} + +.content-element-container { + padding-left: 20px; + display: none; + grid-template-columns: auto auto; +} + +.content-element-container div { + display: grid; + grid-template-columns: auto auto; +} + +.content-element-container label { + margin: 0; +} + +.extra-content { + display: none; +} + +.content-elements, +.style-config { + display: grid; + grid-template-columns: auto auto; +} + +.style-config label { + display: block; + line-height: 15px; + margin-right: 15px; +} + +.style-config .color-wrapper { + display: inline-block; + width: 50px; + height: 27px; + overflow: hidden; + vertical-align: middle; + margin-right: 5px; +} + +.style-config input[type="color"] { + display: block; + width: 100%; + height: 100%; + border: none; +} + +.style-config .reset { + display: inline-block; + vertical-align: middle; +} + +.style-config input[type="text"] { + display: block; + width: 80%; + margin-top: 4px; +} + +.style-config { + row-gap: 10px; +} + +.widget-container { + margin: 20px 0; + width: auto; +} + +.contents { + width: 50%; +} + +gmp-place-details-compact, +gmp-place-details { + width: 350px; + margin: 0 auto 10px auto; +} + +.vAygCK-api-load-alpha-banner { + display: none; +} +/* [END maps_ui_kit_customization] */ diff --git a/dist/samples/ui-kit-customization/app/tsconfig.json b/dist/samples/ui-kit-customization/app/tsconfig.json new file mode 100644 index 00000000..09179087 --- /dev/null +++ b/dist/samples/ui-kit-customization/app/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } + } \ No newline at end of file diff --git a/dist/samples/ui-kit-customization/dist/assets/index-BUHsTvap.js b/dist/samples/ui-kit-customization/dist/assets/index-BUHsTvap.js new file mode 100644 index 00000000..7978c2d1 --- /dev/null +++ b/dist/samples/ui-kit-customization/dist/assets/index-BUHsTvap.js @@ -0,0 +1,5 @@ +(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const a of document.querySelectorAll('link[rel="modulepreload"]'))C(a);new MutationObserver(a=>{for(const o of a)if(o.type==="childList")for(const y of o.addedNodes)y.tagName==="LINK"&&y.rel==="modulepreload"&&C(y)}).observe(document,{childList:!0,subtree:!0});function s(a){const o={};return a.integrity&&(o.integrity=a.integrity),a.referrerPolicy&&(o.referrerPolicy=a.referrerPolicy),a.crossOrigin==="use-credentials"?o.credentials="include":a.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function C(a){if(a.ep)return;a.ep=!0;const o=s(a);fetch(a.href,o)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const S=document.querySelector("gmp-place-autocomplete"),h=document.getElementById("component"),m=document.getElementById("orientation"),b=document.querySelector(".widget-container"),q=document.querySelectorAll(".content-config"),E=document.querySelector(".content-element-container"),P=document.querySelectorAll(".content-element"),d=document.querySelectorAll(".extra-content"),I=document.querySelectorAll("input[type='color']"),w=document.querySelectorAll(".style-config input[type='text']"),g=document.getElementById("place-id"),x=document.getElementById("width-slider"),u=document.getElementById("truncationpreferred"),$=document.querySelectorAll(".reset");let e={placeId:"ChIJ3S-JXmauEmsRUcIaWtf4MzE",element:"gmp-place-details-compact",orientation:"VERTICAL",all:!0,standard:!1,custom:!1,truncationPreferred:!1,contents:{media:!0,address:!0,rating:!0,type:!0,price:!0,"accessible-entrance-icon":!0,"open-now-status":!0,attribution:!0},extraContents:{website:!0,"phone-number":!0,"opening-hours":!0,summary:!0,"type-specific-highlights":!0,reviews:!0,"plus-code":!0,"feature-list":!0}},A={"--gmp-mat-color-info":"","--gmp-mat-color-negative":"","--gmp-mat-color-neutral-container":"","--gmp-mat-color-on-secondary-container":"","--gmp-mat-color-on-surface":"","--gmp-mat-color-surface":"","--gmp-mat-color-on-surface-variant":"","--gmp-mat-color-outline-decorative":"","--gmp-mat-color-positive":"","--gmp-mat-color-primary":"","--gmp-mat-color-secondary-container":"","--gmp-mat-color-disabled-surface":"","--gmp-mat-font-body-medium":"","--gmp-mat-font-body-small":"","--gmp-mat-font-family":"","--gmp-mat-font-headline-medium":"","--gmp-mat-font-label-large":"","--gmp-mat-font-title-small":"","--gmp-mat-color-on-neutral-container":"","--gmp-mat-color-on-positive-container":"","--gmp-mat-color-positive-container":"","--gmp-mat-font-display-small":"","background-color":"",border:"","border-radius":"","font-size":""},r,v,p,f,l,i;async function B(){await google.maps.importLibrary("places"),v=document.createElement("gmp-place-details-place-request"),p=document.createElement("gmp-place-all-content"),f=document.createElement("gmp-place-standard-content"),l=document.createElement("gmp-place-content-config"),L(),O(),T(),M()}function O(){S.addEventListener("gmp-select",({placePrediction:t})=>{t.toPlace().fetchFields({fields:["id"]}).then(n=>{g.value=n.place.id,e.placeId=g.value,c()})})}function T(){g.addEventListener("input",()=>{e.placeId=g.value,c()}),h.addEventListener("change",()=>{e.element=h.value,h.value=="gmp-place-details"?(m.disabled=!0,e.truncationPreferred=!1,u.disabled=!0,e.custom&&d.forEach(t=>{t.style.display="block"})):(m.disabled=!1,e.truncationPreferred=!1,u.disabled=!1,e.custom&&d.forEach(t=>{t.style.display="none"})),L()}),m.addEventListener("change",()=>{e.orientation=m.value,c()}),u.addEventListener("change",()=>{e.truncationPreferred=u.checked,c()}),q.forEach(t=>{t.addEventListener("change",n=>{switch(n.target.value){case"standard":E.style.display="none",e.all=!1,e.standard=!0,e.custom=!1;break;case"all":E.style.display="none",e.all=!0,e.standard=!1,e.custom=!1;break;case"custom":E.style.display="grid",e.all=!1,e.standard=!1,e.custom=!0,e.element=="gmp-place-details-compact"?d.forEach(s=>{s.style.display="none"}):e.element=="gmp-place-details"&&d.forEach(s=>{s.style.display="block"});break}c()})}),P.forEach(t=>{t.addEventListener("change",n=>{e.contents[n.target.value]=n.target.checked,c()})}),d.forEach(t=>{t.addEventListener("change",n=>{e.extraContents[n.target.value]=n.target.checked,c()})})}function M(){I.forEach(t=>{t.addEventListener("input",n=>{A[n.target.id]=n.target.value,r.style.setProperty(n.target.id,n.target.value)})}),$.forEach(t=>{t.addEventListener("click",n=>{n.preventDefault(),document.getElementById(n.target.dataset.style).value="#000000",r.style.removeProperty(n.target.dataset.style)})}),w.forEach(t=>{t.addEventListener("input",n=>{r.style.setProperty(n.target.id,n.target.value)})}),x.addEventListener("input",t=>{r.style.width=`${t.target.value}px`,document.getElementById("width-output").innerHTML=`${t.target.value}px`})}function L(){r=document.createElement(e.element),c()}function c(){v.place=e.placeId,r.orientation=e.orientation,r.truncationPreferred=e.truncationPreferred,b.innerHTML="",b.appendChild(r),r.innerHTML="",r.appendChild(v),r.contains(f)&&r.removeChild(f),r.contains(p)&&r.removeChild(p),r.contains(l)&&r.removeChild(l),l.innerHTML="";for(let t in e.contents)e.contents[t]?l.querySelector(`gmp-place-${t}`)||l.appendChild(document.createElement(`gmp-place-${t}`)):l.querySelector(`gmp-place-${t}`)&&l.removeChild(l.querySelector(`gmp-place-${t}`));i=l.cloneNode(!0);for(let t in e.extraContents)e.extraContents[t]?i.querySelector(`gmp-place-${t}`)||i.appendChild(document.createElement(`gmp-place-${t}`)):i.querySelector(`gmp-place-${t}`)&&i.removeChild(i.querySelector(`gmp-place-${t}`));e.all&&r.appendChild(p),e.standard&&r.appendChild(f),e.custom&&(e.element=="gmp-place-details-compact"&&r.appendChild(l),e.element=="gmp-place-details"&&r.appendChild(i))}B(); diff --git a/dist/samples/ui-kit-customization/dist/assets/index-DLFjn6mf.css b/dist/samples/ui-kit-customization/dist/assets/index-DLFjn6mf.css new file mode 100644 index 00000000..40c39de0 --- /dev/null +++ b/dist/samples/ui-kit-customization/dist/assets/index-DLFjn6mf.css @@ -0,0 +1,5 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */html,body{height:100%;margin:0}body{font:400 16px/24px Google Sans,sans-serif}h1{font-size:1rem}input[type=text],select{border:1px solid #ccc;padding:10px 8px;border-radius:5px;width:100%}input[type=text]{width:96%}label{display:block;color:#4a5568;font-size:.8rem;margin:8px 0 3px}p.note{color:#4a5568;font-size:.8rem;line-height:.8rem;margin:0}hr{border:1px solid #eee;border-radius:50%}a.reset,span{color:#4a5568;font-size:.8rem}#container{display:flex;gap:30px;align-items:flex-start}.controls{width:40%;padding:20px;max-height:1000px;overflow:scroll}section{margin:10px 0;padding:0 0 5px}gmp-place-autocomplete{display:inline-block;width:100%}.content-element-container{padding-left:20px;display:none;grid-template-columns:auto auto}.content-element-container div{display:grid;grid-template-columns:auto auto}.content-element-container label{margin:0}.extra-content{display:none}.content-elements,.style-config{display:grid;grid-template-columns:auto auto}.style-config label{display:block;line-height:15px;margin-right:15px}.style-config .color-wrapper{display:inline-block;width:50px;height:27px;overflow:hidden;vertical-align:middle;margin-right:5px}.style-config input[type=color]{display:block;width:100%;height:100%;border:none}.style-config .reset{display:inline-block;vertical-align:middle}.style-config input[type=text]{display:block;width:80%;margin-top:4px}.style-config{row-gap:10px}.widget-container{margin:20px 0;width:auto}.contents{width:50%}gmp-place-details-compact,gmp-place-details{width:350px;margin:0 auto 10px}.vAygCK-api-load-alpha-banner{display:none} diff --git a/dist/samples/ui-kit-customization/dist/index.html b/dist/samples/ui-kit-customization/dist/index.html new file mode 100644 index 00000000..e45a6646 --- /dev/null +++ b/dist/samples/ui-kit-customization/dist/index.html @@ -0,0 +1,248 @@ + + + + + + + + + + +
    +
    +

    Component settings

    +
    +
    +
    +
    +
    +
    +

    Select to truncate the place name and address to fit + on one line

    +
    +
    350px +
    +
    +
    +

    Content configuration

    +
    +
    + +
    +
    +
    +
    +

    CSS Style Properties

    +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/dist/samples/ui-kit-customization/docs/index.html b/dist/samples/ui-kit-customization/docs/index.html new file mode 100644 index 00000000..72b10958 --- /dev/null +++ b/dist/samples/ui-kit-customization/docs/index.html @@ -0,0 +1,248 @@ + + + + + + + + + + +
    +
    +

    Component settings

    +
    +
    +
    +
    +
    +
    +

    Select to truncate the place name and address to fit + on one line

    +
    +
    350px +
    +
    +
    +

    Content configuration

    +
    +
    + +
    +
    +
    +
    +

    CSS Style Properties

    +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/dist/samples/ui-kit-customization/docs/index.js b/dist/samples/ui-kit-customization/docs/index.js new file mode 100644 index 00000000..5d6e7c72 --- /dev/null +++ b/dist/samples/ui-kit-customization/docs/index.js @@ -0,0 +1,298 @@ +"use strict"; +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_customization] */ +const searchPlace = document.querySelector('gmp-place-autocomplete'); +const componentType = document.getElementById("component"); +const layoutOrientation = document.getElementById("orientation"); +const widgetContainer = document.querySelector(".widget-container"); +const contentConfig = document.querySelectorAll(".content-config"); +const contentElemContainer = document.querySelector(".content-element-container"); +const contentElem = document.querySelectorAll(".content-element"); +const contentsExtra = document.querySelectorAll('.extra-content'); +const styleColors = document.querySelectorAll("input[type='color']"); +const styleText = document.querySelectorAll(".style-config input[type='text']"); +const placeId = document.getElementById("place-id"); +const widthSlider = document.getElementById("width-slider"); +const truncationControl = document.getElementById("truncationpreferred"); +const styleReset = document.querySelectorAll(".reset"); +let settings = { + "placeId": "ChIJ3S-JXmauEmsRUcIaWtf4MzE", + "element": "gmp-place-details-compact", + "orientation": "VERTICAL", + "all": true, + "standard": false, + "custom": false, + "contentType": "all", + "truncationPreferred": false, + "contents": { + "media": true, + "address": true, + "rating": true, + "type": true, + "price": true, + "accessible-entrance-icon": true, + "open-now-status": true, + "attribution": true + }, + "extraContents": { + "website": true, + "phone-number": true, + "opening-hours": true, + "summary": true, + "type-specific-highlights": true, + "reviews": true, + "plus-code": true, + "feature-list": true + } +}; +let customizedStyle = { + "--gmp-mat-color-info": "", + "--gmp-mat-color-negative": "", + "--gmp-mat-color-neutral-container": "", + "--gmp-mat-color-on-secondary-container": "", + "--gmp-mat-color-on-surface": "", + "--gmp-mat-color-surface": "", + "--gmp-mat-color-on-surface-variant": "", + "--gmp-mat-color-outline-decorative": "", + "--gmp-mat-color-positive": "", + "--gmp-mat-color-primary": "", + "--gmp-mat-color-secondary-container": "", + "--gmp-mat-color-disabled-surface": "", + "--gmp-mat-font-body-medium": "", + "--gmp-mat-font-body-small": "", + "--gmp-mat-font-family": "", + "--gmp-mat-font-headline-medium": "", + "--gmp-mat-font-label-large": "", + "--gmp-mat-font-title-small": "", + "--gmp-mat-color-on-neutral-container": "", + "--gmp-mat-color-on-positive-container": "", + "--gmp-mat-color-positive-container": "", + "--gmp-mat-font-display-small": "", + "background-color": "", + "border": "", + "border-radius": "", + "font-size": "" +}; +let placeElement, placeRequest, gmpPlaceAll, gmpPlaceStandard, gmpContentConfig, gmpContentConfigFull; +async function init() { + await google.maps.importLibrary("places"); + placeRequest = document.createElement('gmp-place-details-place-request'); + gmpPlaceAll = document.createElement('gmp-place-all-content'); + gmpPlaceStandard = document.createElement('gmp-place-standard-content'); + gmpContentConfig = document.createElement('gmp-place-content-config'); + detailsConstructor(); //Construct the place details element + initSearchPlace(); //Initialize Autocomplete search + widgetSelector(); //Handlers for controls + styleCustomization(); //css properties +} +/* Initialize Autocomplete for searching places */ +function initSearchPlace() { + searchPlace.addEventListener('gmp-select', ({ placePrediction }) => { + placePrediction.toPlace().fetchFields({ + fields: ['id'] + }).then((place) => { + placeId.value = place.place.id; + settings.placeId = placeId.value; + updateWidget(); + }); + }); +} +function widgetSelector() { + /* Place ID input */ + placeId.addEventListener("input", () => { + settings.placeId = placeId.value; + updateWidget(); + }); + /* Select a component */ + componentType.addEventListener("change", () => { + settings.element = componentType.value; + if (componentType.value == "gmp-place-details") { + layoutOrientation.disabled = + true; //horizontal orientation is not available for full version for now + settings.truncationPreferred = false; + truncationControl.disabled = true; + if (settings.custom) { + //display extra content elements config for full version + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + } + else { + layoutOrientation.disabled = false; + settings.truncationPreferred = false; + truncationControl.disabled = false; + if (settings.custom) { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } + } + detailsConstructor(); + }); + /* Select widget orientation */ + layoutOrientation.addEventListener("change", () => { + settings.orientation = layoutOrientation.value; + updateWidget(); + }); + /* Apply Truncation to widget */ + truncationControl.addEventListener("change", () => { + settings.truncationPreferred = truncationControl.checked; + updateWidget(); + }); + /* Switch between Standard, All, Custom radio buttons */ + contentConfig.forEach((config) => { + config.addEventListener("change", (event) => { + switch (event.target.value) { + case 'standard': + contentElemContainer.style.display = "none"; + settings.all = false; + settings.standard = true; + settings.custom = false; + break; + case 'all': + contentElemContainer.style.display = "none"; + settings.all = true; + settings.standard = false; + settings.custom = false; + break; + case 'custom': + contentElemContainer.style.display = "grid"; + settings.all = false; + settings.standard = false; + settings.custom = true; + if (settings.element == "gmp-place-details-compact") { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } + else if (settings.element == "gmp-place-details") { + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + break; + } + updateWidget(); + }); + }); + contentElem.forEach((element) => { + element.addEventListener("change", (event) => { + settings.contents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); + contentsExtra.forEach((element) => { + element.addEventListener("change", (event) => { + settings.extraContents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); +} +function styleCustomization() { + styleColors.forEach((style) => { + style.addEventListener("input", (event) => { + customizedStyle[event.target.id] = event.target.value; + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + styleReset.forEach((item) => { + item.addEventListener("click", (event) => { + event.preventDefault(); + // @ts-ignore + document.getElementById(event.target.dataset.style).value = + "#000000"; + placeElement.style.removeProperty(event.target.dataset.style); + }); + }); + styleText.forEach((style) => { + style.addEventListener("input", (event) => { + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + widthSlider.addEventListener("input", (event) => { + placeElement.style.width = `${event.target.value}px`; + // @ts-ignore + document.getElementById("width-output").innerHTML = + `${event.target.value}px`; + }); +} +/* Construct Place Details widgets */ +function detailsConstructor() { + /* Create the Element(compact or full) */ + placeElement = document.createElement(settings.element); + updateWidget(); +} +/* Update the widget */ +function updateWidget() { + placeRequest.place = settings.placeId; + placeElement.orientation = settings.orientation; + placeElement.truncationPreferred = settings.truncationPreferred; + widgetContainer.innerHTML = ''; + widgetContainer.appendChild(placeElement); + placeElement.innerHTML = ''; + placeElement.appendChild(placeRequest); + if (placeElement.contains(gmpPlaceStandard)) { + placeElement.removeChild(gmpPlaceStandard); + } + if (placeElement.contains(gmpPlaceAll)) { + placeElement.removeChild(gmpPlaceAll); + } + if (placeElement.contains(gmpContentConfig)) { + placeElement.removeChild(gmpContentConfig); + } + //Configure elements for compact layout + gmpContentConfig.innerHTML = ''; + for (let property in settings.contents) { + if (settings.contents[property]) { + //include content + if (!gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.appendChild(document.createElement(`gmp-place-${property}`)); + } + } + else { + //remove content + if (gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.removeChild(gmpContentConfig.querySelector(`gmp-place-${property}`)); + } + } + } + //Configure elements for full layout + gmpContentConfigFull = gmpContentConfig.cloneNode(true); + for (let property in settings.extraContents) { + if (settings.extraContents[property]) { + //include content + if (!gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.appendChild(document.createElement(`gmp-place-${property}`)); + } + } + else { + //remove content + if (gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.removeChild(gmpContentConfigFull.querySelector(`gmp-place-${property}`)); + } + } + } + if (settings.all) { + placeElement.appendChild(gmpPlaceAll); + } + if (settings.standard) { + placeElement.appendChild(gmpPlaceStandard); + } + if (settings.custom) { + if (settings.element == "gmp-place-details-compact") { + placeElement.appendChild(gmpContentConfig); + } + if (settings.element == "gmp-place-details") { + placeElement.appendChild(gmpContentConfigFull); + } + } +} +init(); +/* [END maps_ui_kit_customization] */ diff --git a/dist/samples/ui-kit-customization/docs/index.ts b/dist/samples/ui-kit-customization/docs/index.ts new file mode 100644 index 00000000..e838dde1 --- /dev/null +++ b/dist/samples/ui-kit-customization/docs/index.ts @@ -0,0 +1,347 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_customization] */ +const searchPlace = document.querySelector('gmp-place-autocomplete') as any; +const componentType = document.getElementById("component") as any; +const layoutOrientation = document.getElementById("orientation") as any; + +const widgetContainer = document.querySelector(".widget-container") as any; +const contentConfig = document.querySelectorAll(".content-config") as any; +const contentElemContainer = document.querySelector( + ".content-element-container") as any; +const contentElem = document.querySelectorAll(".content-element") as any; +const contentsExtra = document.querySelectorAll('.extra-content') as any; + + +const styleColors = document.querySelectorAll("input[type='color']") as any; +const styleText = document.querySelectorAll(".style-config input[type='text']") as any; +const placeId = document.getElementById("place-id") as any; +const widthSlider = document.getElementById("width-slider") as any; +const truncationControl = document.getElementById("truncationpreferred") as any; +const styleReset = document.querySelectorAll(".reset") as any; + +let settings = { + "placeId": "ChIJ3S-JXmauEmsRUcIaWtf4MzE", + "element": "gmp-place-details-compact", + "orientation": "VERTICAL", + "all": true, + "standard": false, + "custom": false, + "contentType": "all", + "truncationPreferred": false, + "contents": { + "media": true, + "address": true, + "rating": true, + "type": true, + "price": true, + "accessible-entrance-icon": true, + "open-now-status": true, + "attribution": true + }, + "extraContents": { + "website": true, + "phone-number": true, + "opening-hours": true, + "summary": true, + "type-specific-highlights": true, + "reviews": true, + "plus-code": true, + "feature-list": true + } +}; + +let customizedStyle = { + "--gmp-mat-color-info": "", + "--gmp-mat-color-negative": "", + "--gmp-mat-color-neutral-container": "", + "--gmp-mat-color-on-secondary-container": "", + "--gmp-mat-color-on-surface": "", + "--gmp-mat-color-surface": "", + "--gmp-mat-color-on-surface-variant": "", + "--gmp-mat-color-outline-decorative": "", + "--gmp-mat-color-positive": "", + "--gmp-mat-color-primary": "", + "--gmp-mat-color-secondary-container": "", + "--gmp-mat-color-disabled-surface": "", + "--gmp-mat-font-body-medium": "", + "--gmp-mat-font-body-small": "", + "--gmp-mat-font-family": "", + "--gmp-mat-font-headline-medium": "", + "--gmp-mat-font-label-large": "", + "--gmp-mat-font-title-small": "", + "--gmp-mat-color-on-neutral-container": "", + "--gmp-mat-color-on-positive-container": "", + "--gmp-mat-color-positive-container": "", + "--gmp-mat-font-display-small": "", + "background-color": "", + "border": "", + "border-radius": "", + "font-size": "" +} + +let placeElement, placeRequest, gmpPlaceAll, gmpPlaceStandard, gmpContentConfig, + gmpContentConfigFull; + + +async function init() { + await google.maps.importLibrary("places"); + + placeRequest = document.createElement('gmp-place-details-place-request'); + gmpPlaceAll = document.createElement('gmp-place-all-content'); + gmpPlaceStandard = document.createElement('gmp-place-standard-content'); + gmpContentConfig = document.createElement('gmp-place-content-config'); + + + detailsConstructor(); //Construct the place details element + initSearchPlace(); //Initialize Autocomplete search + widgetSelector(); //Handlers for controls + styleCustomization(); //css properties +} + +/* Initialize Autocomplete for searching places */ +function initSearchPlace() { + searchPlace.addEventListener('gmp-select', ({ + placePrediction + }) => { + placePrediction.toPlace().fetchFields({ + fields: ['id'] + }).then((place) => { + placeId.value = place.place.id; + settings.placeId = placeId.value; + updateWidget(); + }); + }); + +} + +function widgetSelector() { + /* Place ID input */ + placeId.addEventListener("input", () => { + settings.placeId = placeId.value; + updateWidget(); + }); + + /* Select a component */ + componentType.addEventListener("change", () => { + settings.element = componentType.value; + + if (componentType.value == "gmp-place-details") { + layoutOrientation.disabled = + true; //horizontal orientation is not available for full version for now + settings.truncationPreferred = false; + truncationControl.disabled = true; + if (settings.custom) { + //display extra content elements config for full version + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + } else { + layoutOrientation.disabled = false; + settings.truncationPreferred = false; + truncationControl.disabled = false; + if (settings.custom) { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } + } + detailsConstructor(); + }); + + /* Select widget orientation */ + layoutOrientation.addEventListener("change", () => { + settings.orientation = layoutOrientation.value; + updateWidget(); + }); + + /* Apply Truncation to widget */ + truncationControl.addEventListener("change", () => { + settings.truncationPreferred = truncationControl.checked; + updateWidget(); + }); + + /* Switch between Standard, All, Custom radio buttons */ + contentConfig.forEach((config) => { + config.addEventListener("change", (event) => { + switch (event.target.value) { + case 'standard': + contentElemContainer.style.display = "none"; + settings.all = false; + settings.standard = true; + settings.custom = false; + break; + case 'all': + contentElemContainer.style.display = "none"; + settings.all = true; + settings.standard = false; + settings.custom = false; + break; + case 'custom': + contentElemContainer.style.display = "grid"; + settings.all = false; + settings.standard = false; + settings.custom = true; + if (settings.element == "gmp-place-details-compact") { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } else if (settings.element == "gmp-place-details") { + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + break; + } + updateWidget(); + }); + }); + + contentElem.forEach((element) => { + element.addEventListener("change", (event) => { + settings.contents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); + + contentsExtra.forEach((element) => { + element.addEventListener("change", (event) => { + settings.extraContents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); + +} + +function styleCustomization() { + styleColors.forEach((style) => { + style.addEventListener("input", (event) => { + customizedStyle[event.target.id] = event.target.value; + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + + styleReset.forEach((item) => { + item.addEventListener("click", (event) => { + event.preventDefault(); + // @ts-ignore + document.getElementById(event.target.dataset.style).value = + "#000000"; + placeElement.style.removeProperty(event.target.dataset.style); + }); + + }); + + styleText.forEach((style) => { + style.addEventListener("input", (event) => { + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + + widthSlider.addEventListener("input", (event) => { + placeElement.style.width = `${event.target.value}px`; + // @ts-ignore + document.getElementById("width-output").innerHTML = + `${event.target.value}px`; + }); +} + + + +/* Construct Place Details widgets */ +function detailsConstructor() { + /* Create the Element(compact or full) */ + placeElement = document.createElement(settings.element); + updateWidget(); +} + + +/* Update the widget */ +function updateWidget() { + placeRequest.place = settings.placeId; + placeElement.orientation = settings.orientation; + placeElement.truncationPreferred = settings.truncationPreferred; + + widgetContainer.innerHTML = ''; + widgetContainer.appendChild(placeElement); + + placeElement.innerHTML = ''; + placeElement.appendChild(placeRequest); + + if (placeElement.contains(gmpPlaceStandard)) { + placeElement.removeChild(gmpPlaceStandard) + } + if (placeElement.contains(gmpPlaceAll)) { + placeElement.removeChild(gmpPlaceAll) + } + if (placeElement.contains(gmpContentConfig)) { + placeElement.removeChild(gmpContentConfig) + } + + //Configure elements for compact layout + gmpContentConfig.innerHTML = ''; + for (let property in settings.contents) { + if (settings.contents[property]) { + //include content + if (!gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.appendChild(document.createElement( + `gmp-place-${property}`)); + } + } else { + //remove content + if (gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.removeChild(gmpContentConfig.querySelector( + `gmp-place-${property}`)); + } + } + } + + //Configure elements for full layout + gmpContentConfigFull = gmpContentConfig.cloneNode(true); + for (let property in settings.extraContents) { + if (settings.extraContents[property]) { + //include content + if (!gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.appendChild(document.createElement( + `gmp-place-${property}`)); + } + } else { + //remove content + if (gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.removeChild(gmpContentConfigFull.querySelector( + `gmp-place-${property}`)); + } + } + } + + if (settings.all) { + placeElement.appendChild(gmpPlaceAll); + } + + if (settings.standard) { + placeElement.appendChild(gmpPlaceStandard); + } + + if (settings.custom) { + if (settings.element == "gmp-place-details-compact") { + placeElement.appendChild(gmpContentConfig); + } + + if (settings.element == "gmp-place-details") { + placeElement.appendChild(gmpContentConfigFull); + } + + } + + +} + + +init(); +/* [END maps_ui_kit_customization] */ diff --git a/dist/samples/ui-kit-customization/docs/style.css b/dist/samples/ui-kit-customization/docs/style.css new file mode 100644 index 00000000..03d945c3 --- /dev/null +++ b/dist/samples/ui-kit-customization/docs/style.css @@ -0,0 +1,164 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_customization] */ +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; +} + +body { + font: 400 16px / 24px Google Sans, sans-serif; +} + +h1 { + font-size: 1rem; +} + +input[type="text"], +select { + border: 1px solid #ccc; + padding: 10px 8px; + border-radius: 5px; + width: 100%; +} + +input[type="text"] { + width: 96%; +} + +label { + display: block; + color: #4a5568; + font-size: 0.8rem; + margin: 8px 0 3px 0; +} + +p.note { + color: #4a5568; + font-size: 0.8rem; + line-height: 0.8rem; + margin: 0; +} + +hr { + border: 1px solid #eee; + border-radius: 50%; +} + +a.reset, +span { + color: #4a5568; + font-size: 0.8rem; +} + +#container { + display: flex; + gap: 30px; + align-items: flex-start; +} + +.controls { + width: 40%; + padding: 20px; + max-height: 1000px; + overflow: scroll; +} + +section { + margin: 10px 0px; + padding: 0 0 5px 0; +} + +gmp-place-autocomplete { + display: inline-block; + width: 100%; +} + +.content-element-container { + padding-left: 20px; + display: none; + grid-template-columns: auto auto; +} + +.content-element-container div { + display: grid; + grid-template-columns: auto auto; +} + +.content-element-container label { + margin: 0; +} + +.extra-content { + display: none; +} + +.content-elements, +.style-config { + display: grid; + grid-template-columns: auto auto; +} + +.style-config label { + display: block; + line-height: 15px; + margin-right: 15px; +} + +.style-config .color-wrapper { + display: inline-block; + width: 50px; + height: 27px; + overflow: hidden; + vertical-align: middle; + margin-right: 5px; +} + +.style-config input[type="color"] { + display: block; + width: 100%; + height: 100%; + border: none; +} + +.style-config .reset { + display: inline-block; + vertical-align: middle; +} + +.style-config input[type="text"] { + display: block; + width: 80%; + margin-top: 4px; +} + +.style-config { + row-gap: 10px; +} + +.widget-container { + margin: 20px 0; + width: auto; +} + +.contents { + width: 50%; +} + +gmp-place-details-compact, +gmp-place-details { + width: 350px; + margin: 0 auto 10px auto; +} + +.vAygCK-api-load-alpha-banner { + display: none; +} +/* [END maps_ui_kit_customization] */ diff --git a/dist/samples/ui-kit-customization/jsfiddle/demo.css b/dist/samples/ui-kit-customization/jsfiddle/demo.css new file mode 100644 index 00000000..84001eda --- /dev/null +++ b/dist/samples/ui-kit-customization/jsfiddle/demo.css @@ -0,0 +1,164 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; +} + +body { + font: 400 16px / 24px Google Sans, sans-serif; +} + +h1 { + font-size: 1rem; +} + +input[type="text"], +select { + border: 1px solid #ccc; + padding: 10px 8px; + border-radius: 5px; + width: 100%; +} + +input[type="text"] { + width: 96%; +} + +label { + display: block; + color: #4a5568; + font-size: 0.8rem; + margin: 8px 0 3px 0; +} + +p.note { + color: #4a5568; + font-size: 0.8rem; + line-height: 0.8rem; + margin: 0; +} + +hr { + border: 1px solid #eee; + border-radius: 50%; +} + +a.reset, +span { + color: #4a5568; + font-size: 0.8rem; +} + +#container { + display: flex; + gap: 30px; + align-items: flex-start; +} + +.controls { + width: 40%; + padding: 20px; + max-height: 1000px; + overflow: scroll; +} + +section { + margin: 10px 0px; + padding: 0 0 5px 0; +} + +gmp-place-autocomplete { + display: inline-block; + width: 100%; +} + +.content-element-container { + padding-left: 20px; + display: none; + grid-template-columns: auto auto; +} + +.content-element-container div { + display: grid; + grid-template-columns: auto auto; +} + +.content-element-container label { + margin: 0; +} + +.extra-content { + display: none; +} + +.content-elements, +.style-config { + display: grid; + grid-template-columns: auto auto; +} + +.style-config label { + display: block; + line-height: 15px; + margin-right: 15px; +} + +.style-config .color-wrapper { + display: inline-block; + width: 50px; + height: 27px; + overflow: hidden; + vertical-align: middle; + margin-right: 5px; +} + +.style-config input[type="color"] { + display: block; + width: 100%; + height: 100%; + border: none; +} + +.style-config .reset { + display: inline-block; + vertical-align: middle; +} + +.style-config input[type="text"] { + display: block; + width: 80%; + margin-top: 4px; +} + +.style-config { + row-gap: 10px; +} + +.widget-container { + margin: 20px 0; + width: auto; +} + +.contents { + width: 50%; +} + +gmp-place-details-compact, +gmp-place-details { + width: 350px; + margin: 0 auto 10px auto; +} + +.vAygCK-api-load-alpha-banner { + display: none; +} + diff --git a/dist/samples/ui-kit-customization/jsfiddle/demo.details b/dist/samples/ui-kit-customization/jsfiddle/demo.details new file mode 100644 index 00000000..2e1d1726 --- /dev/null +++ b/dist/samples/ui-kit-customization/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: ui-kit-customization +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/ui-kit-customization/jsfiddle/demo.html b/dist/samples/ui-kit-customization/jsfiddle/demo.html new file mode 100644 index 00000000..d5a42b42 --- /dev/null +++ b/dist/samples/ui-kit-customization/jsfiddle/demo.html @@ -0,0 +1,248 @@ + + + + + + + + + + +
    +
    +

    Component settings

    +
    +
    +
    +
    +
    +
    +

    Select to truncate the place name and address to fit + on one line

    +
    +
    350px +
    +
    +
    +

    Content configuration

    +
    +
    + +
    +
    +
    +
    +

    CSS Style Properties

    +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    Reset +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/dist/samples/ui-kit-customization/jsfiddle/demo.js b/dist/samples/ui-kit-customization/jsfiddle/demo.js new file mode 100644 index 00000000..5d6e7c72 --- /dev/null +++ b/dist/samples/ui-kit-customization/jsfiddle/demo.js @@ -0,0 +1,298 @@ +"use strict"; +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_customization] */ +const searchPlace = document.querySelector('gmp-place-autocomplete'); +const componentType = document.getElementById("component"); +const layoutOrientation = document.getElementById("orientation"); +const widgetContainer = document.querySelector(".widget-container"); +const contentConfig = document.querySelectorAll(".content-config"); +const contentElemContainer = document.querySelector(".content-element-container"); +const contentElem = document.querySelectorAll(".content-element"); +const contentsExtra = document.querySelectorAll('.extra-content'); +const styleColors = document.querySelectorAll("input[type='color']"); +const styleText = document.querySelectorAll(".style-config input[type='text']"); +const placeId = document.getElementById("place-id"); +const widthSlider = document.getElementById("width-slider"); +const truncationControl = document.getElementById("truncationpreferred"); +const styleReset = document.querySelectorAll(".reset"); +let settings = { + "placeId": "ChIJ3S-JXmauEmsRUcIaWtf4MzE", + "element": "gmp-place-details-compact", + "orientation": "VERTICAL", + "all": true, + "standard": false, + "custom": false, + "contentType": "all", + "truncationPreferred": false, + "contents": { + "media": true, + "address": true, + "rating": true, + "type": true, + "price": true, + "accessible-entrance-icon": true, + "open-now-status": true, + "attribution": true + }, + "extraContents": { + "website": true, + "phone-number": true, + "opening-hours": true, + "summary": true, + "type-specific-highlights": true, + "reviews": true, + "plus-code": true, + "feature-list": true + } +}; +let customizedStyle = { + "--gmp-mat-color-info": "", + "--gmp-mat-color-negative": "", + "--gmp-mat-color-neutral-container": "", + "--gmp-mat-color-on-secondary-container": "", + "--gmp-mat-color-on-surface": "", + "--gmp-mat-color-surface": "", + "--gmp-mat-color-on-surface-variant": "", + "--gmp-mat-color-outline-decorative": "", + "--gmp-mat-color-positive": "", + "--gmp-mat-color-primary": "", + "--gmp-mat-color-secondary-container": "", + "--gmp-mat-color-disabled-surface": "", + "--gmp-mat-font-body-medium": "", + "--gmp-mat-font-body-small": "", + "--gmp-mat-font-family": "", + "--gmp-mat-font-headline-medium": "", + "--gmp-mat-font-label-large": "", + "--gmp-mat-font-title-small": "", + "--gmp-mat-color-on-neutral-container": "", + "--gmp-mat-color-on-positive-container": "", + "--gmp-mat-color-positive-container": "", + "--gmp-mat-font-display-small": "", + "background-color": "", + "border": "", + "border-radius": "", + "font-size": "" +}; +let placeElement, placeRequest, gmpPlaceAll, gmpPlaceStandard, gmpContentConfig, gmpContentConfigFull; +async function init() { + await google.maps.importLibrary("places"); + placeRequest = document.createElement('gmp-place-details-place-request'); + gmpPlaceAll = document.createElement('gmp-place-all-content'); + gmpPlaceStandard = document.createElement('gmp-place-standard-content'); + gmpContentConfig = document.createElement('gmp-place-content-config'); + detailsConstructor(); //Construct the place details element + initSearchPlace(); //Initialize Autocomplete search + widgetSelector(); //Handlers for controls + styleCustomization(); //css properties +} +/* Initialize Autocomplete for searching places */ +function initSearchPlace() { + searchPlace.addEventListener('gmp-select', ({ placePrediction }) => { + placePrediction.toPlace().fetchFields({ + fields: ['id'] + }).then((place) => { + placeId.value = place.place.id; + settings.placeId = placeId.value; + updateWidget(); + }); + }); +} +function widgetSelector() { + /* Place ID input */ + placeId.addEventListener("input", () => { + settings.placeId = placeId.value; + updateWidget(); + }); + /* Select a component */ + componentType.addEventListener("change", () => { + settings.element = componentType.value; + if (componentType.value == "gmp-place-details") { + layoutOrientation.disabled = + true; //horizontal orientation is not available for full version for now + settings.truncationPreferred = false; + truncationControl.disabled = true; + if (settings.custom) { + //display extra content elements config for full version + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + } + else { + layoutOrientation.disabled = false; + settings.truncationPreferred = false; + truncationControl.disabled = false; + if (settings.custom) { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } + } + detailsConstructor(); + }); + /* Select widget orientation */ + layoutOrientation.addEventListener("change", () => { + settings.orientation = layoutOrientation.value; + updateWidget(); + }); + /* Apply Truncation to widget */ + truncationControl.addEventListener("change", () => { + settings.truncationPreferred = truncationControl.checked; + updateWidget(); + }); + /* Switch between Standard, All, Custom radio buttons */ + contentConfig.forEach((config) => { + config.addEventListener("change", (event) => { + switch (event.target.value) { + case 'standard': + contentElemContainer.style.display = "none"; + settings.all = false; + settings.standard = true; + settings.custom = false; + break; + case 'all': + contentElemContainer.style.display = "none"; + settings.all = true; + settings.standard = false; + settings.custom = false; + break; + case 'custom': + contentElemContainer.style.display = "grid"; + settings.all = false; + settings.standard = false; + settings.custom = true; + if (settings.element == "gmp-place-details-compact") { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } + else if (settings.element == "gmp-place-details") { + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + break; + } + updateWidget(); + }); + }); + contentElem.forEach((element) => { + element.addEventListener("change", (event) => { + settings.contents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); + contentsExtra.forEach((element) => { + element.addEventListener("change", (event) => { + settings.extraContents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); +} +function styleCustomization() { + styleColors.forEach((style) => { + style.addEventListener("input", (event) => { + customizedStyle[event.target.id] = event.target.value; + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + styleReset.forEach((item) => { + item.addEventListener("click", (event) => { + event.preventDefault(); + // @ts-ignore + document.getElementById(event.target.dataset.style).value = + "#000000"; + placeElement.style.removeProperty(event.target.dataset.style); + }); + }); + styleText.forEach((style) => { + style.addEventListener("input", (event) => { + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + widthSlider.addEventListener("input", (event) => { + placeElement.style.width = `${event.target.value}px`; + // @ts-ignore + document.getElementById("width-output").innerHTML = + `${event.target.value}px`; + }); +} +/* Construct Place Details widgets */ +function detailsConstructor() { + /* Create the Element(compact or full) */ + placeElement = document.createElement(settings.element); + updateWidget(); +} +/* Update the widget */ +function updateWidget() { + placeRequest.place = settings.placeId; + placeElement.orientation = settings.orientation; + placeElement.truncationPreferred = settings.truncationPreferred; + widgetContainer.innerHTML = ''; + widgetContainer.appendChild(placeElement); + placeElement.innerHTML = ''; + placeElement.appendChild(placeRequest); + if (placeElement.contains(gmpPlaceStandard)) { + placeElement.removeChild(gmpPlaceStandard); + } + if (placeElement.contains(gmpPlaceAll)) { + placeElement.removeChild(gmpPlaceAll); + } + if (placeElement.contains(gmpContentConfig)) { + placeElement.removeChild(gmpContentConfig); + } + //Configure elements for compact layout + gmpContentConfig.innerHTML = ''; + for (let property in settings.contents) { + if (settings.contents[property]) { + //include content + if (!gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.appendChild(document.createElement(`gmp-place-${property}`)); + } + } + else { + //remove content + if (gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.removeChild(gmpContentConfig.querySelector(`gmp-place-${property}`)); + } + } + } + //Configure elements for full layout + gmpContentConfigFull = gmpContentConfig.cloneNode(true); + for (let property in settings.extraContents) { + if (settings.extraContents[property]) { + //include content + if (!gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.appendChild(document.createElement(`gmp-place-${property}`)); + } + } + else { + //remove content + if (gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.removeChild(gmpContentConfigFull.querySelector(`gmp-place-${property}`)); + } + } + } + if (settings.all) { + placeElement.appendChild(gmpPlaceAll); + } + if (settings.standard) { + placeElement.appendChild(gmpPlaceStandard); + } + if (settings.custom) { + if (settings.element == "gmp-place-details-compact") { + placeElement.appendChild(gmpContentConfig); + } + if (settings.element == "gmp-place-details") { + placeElement.appendChild(gmpContentConfigFull); + } + } +} +init(); +/* [END maps_ui_kit_customization] */ diff --git a/index.html b/index.html index 94357c56..97ea3ed4 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,7 @@

    Maps JSAPI Samples

  • place-autocomplete-element
  • place-autocomplete-map
  • place-text-search
    • +
  • ui-kit-customization
  • ui-kit-place-details
  • ui-kit-place-details-compact
  • ui-kit-place-search-nearby
    • diff --git a/package-lock.json b/package-lock.json index b4da6563..96efce21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -609,6 +609,10 @@ "resolved": "samples/place-text-search", "link": true }, + "node_modules/@js-api-samples/ui-kit-customization": { + "resolved": "samples/ui-kit-customization", + "link": true + }, "node_modules/@js-api-samples/ui-kit-place-details": { "resolved": "samples/ui-kit-place-details", "link": true @@ -2452,6 +2456,10 @@ "name": "@js-api-samples/place-text-search", "version": "1.0.0" }, + "samples/ui-kit-customization": { + "name": "@js-api-samples/ui-kit-customization", + "version": "1.0.0" + }, "samples/ui-kit-place-details": { "name": "@js-api-samples/ui-kit-place-details", "version": "1.0.0"