diff --git a/dist/index.html b/dist/index.html index db081ff8..03f57d1e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -54,6 +54,7 @@

Maps JSAPI Samples

  • ui-kit-place-details-compact
  • ui-kit-place-search-nearby
  • ui-kit-place-search-text
    • +
  • ui-kit-place-search-text-compact
  • weather-api-current-compact
    • diff --git a/dist/samples/ui-kit-place-search-text-compact/app/.eslintsrc.json b/dist/samples/ui-kit-place-search-text-compact/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/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-place-search-text-compact/app/README.md b/dist/samples/ui-kit-place-search-text-compact/app/README.md new file mode 100644 index 00000000..62904810 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/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-place-search-text-compact/app/index.html b/dist/samples/ui-kit-place-search-text-compact/app/index.html new file mode 100644 index 00000000..ff72230f --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/app/index.html @@ -0,0 +1,44 @@ + + + + + + Places UI Kit: Place (text) search with Place Details Compact + + + + +
    +
    + + +
    +
    + + + + +

    Looked for it, didn't find it. Let's try something else.

    +
    + +
    + + + + +
    + + + + + + diff --git a/dist/samples/ui-kit-place-search-text-compact/app/package.json b/dist/samples/ui-kit-place-search-text-compact/app/package.json new file mode 100644 index 00000000..be0c52ab --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/app/package.json @@ -0,0 +1,15 @@ +{ + "name": "@js-api-samples/ui-kit-place-search-text-compact", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh ui-kit-place-search-text-compact && bash ../app.sh ui-kit-place-search-text-compact && bash ../docs.sh ui-kit-place-search-text-compact && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-search-text-compact", + "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-place-search-text-compact/app/style.css b/dist/samples/ui-kit-place-search-text-compact/app/style.css new file mode 100644 index 00000000..25aedaf0 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/app/style.css @@ -0,0 +1,115 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text_compact] */ + +html, +body { + height: 100%; + margin: 0; +} + +body { + display: flex; + flex-direction: column; + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 16px; + text-align: center; +} + +#map-container { + box-sizing: border-box; + width: 100%; + height: 100vh; +} + +.warning { + color: red; + position: absolute; + top: 50px; + display: none; +} + +.controls { + display: flex; + gap: 10px; + padding: 20px; + margin-top: 20px; + height: 32px; + background-color: #f3f3f3; + border-radius: 20px; + position: absolute; + top: 10px; + left: 50%; + margin-left: -260px; +} + +.search-button { + background-color: #4b4b4b; + color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + width: 80px; +} + +.query-input { + border: 1px solid #ccc; + border-radius: 5px; + flex-grow: 1; + padding: 10px; + width: 400px; +} + +.list-container { + display: flex; + justify-content: center; + position: relative; +} + +gmp-place-search { + width: 100%; + margin: 10px; + min-height: 414px; + display: none; + border: none; +} + +gmp-place-details-compact { + width: 350px; + max-height: 800px; + margin-right: 20px; + display: none; + border: none; +} + +gmp-place-details-compact::after { + content: ''; + position: absolute; + bottom: -13px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 20px; + background-color: white; + box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); + z-index: 1; + clip-path: polygon(0% 0%, 100% 0%, 50% 100%); + transform-origin: center center; +} + +@media (prefers-color-scheme: dark) { + /* Style for Dark mode */ + gmp-place-details-compact::after { + background-color: #131314; + } +} + +.vAygCK-api-load-alpha-banner { + display: none; +} +/* [END maps_ui_kit_place_search_text_compact] */ diff --git a/dist/samples/ui-kit-place-search-text-compact/app/tsconfig.json b/dist/samples/ui-kit-place-search-text-compact/app/tsconfig.json new file mode 100644 index 00000000..09179087 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/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-place-search-text-compact/dist/assets/index-xPIYwYQR.css b/dist/samples/ui-kit-place-search-text-compact/dist/assets/index-xPIYwYQR.css new file mode 100644 index 00000000..918c7062 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/dist/assets/index-xPIYwYQR.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{display:flex;flex-direction:column;font-family:Arial,Helvetica,sans-serif}h1{font-size:16px;text-align:center}#map-container{box-sizing:border-box;width:100%;height:100vh}.warning{color:red;position:absolute;top:50px;display:none}.controls{display:flex;gap:10px;padding:20px;margin-top:20px;height:32px;background-color:#f3f3f3;border-radius:20px;position:absolute;top:10px;left:50%;margin-left:-260px}.search-button{background-color:#4b4b4b;color:#fff;border:1px solid #ccc;border-radius:5px;width:80px}.query-input{border:1px solid #ccc;border-radius:5px;flex-grow:1;padding:10px;width:400px}.list-container{display:flex;justify-content:center;position:relative}gmp-place-search{width:100%;margin:10px;min-height:414px;display:none;border:none}gmp-place-details-compact{width:350px;max-height:800px;margin-right:20px;display:none;border:none}gmp-place-details-compact:after{content:"";position:absolute;bottom:-13px;left:50%;transform:translate(-50%);width:20px;height:20px;background-color:#fff;box-shadow:2px 2px 5px #0003;z-index:1;clip-path:polygon(0% 0%,100% 0%,50% 100%);transform-origin:center center}@media (prefers-color-scheme: dark){gmp-place-details-compact:after{background-color:#131314}}.vAygCK-api-load-alpha-banner{display:none} diff --git a/dist/samples/ui-kit-place-search-text-compact/dist/index.html b/dist/samples/ui-kit-place-search-text-compact/dist/index.html new file mode 100644 index 00000000..70509a88 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/dist/index.html @@ -0,0 +1,44 @@ + + + + + + Places UI Kit: Place (text) search with Place Details Compact + + + + +
    +
    + + +
    +
    + + + + +

    Looked for it, didn't find it. Let's try something else.

    +
    + +
    + + + + +
    + + + + + + diff --git a/dist/samples/ui-kit-place-search-text-compact/docs/index.html b/dist/samples/ui-kit-place-search-text-compact/docs/index.html new file mode 100644 index 00000000..ff72230f --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/docs/index.html @@ -0,0 +1,44 @@ + + + + + + Places UI Kit: Place (text) search with Place Details Compact + + + + +
    +
    + + +
    +
    + + + + +

    Looked for it, didn't find it. Let's try something else.

    +
    + +
    + + + + +
    + + + + + + diff --git a/dist/samples/ui-kit-place-search-text-compact/docs/style.css b/dist/samples/ui-kit-place-search-text-compact/docs/style.css new file mode 100644 index 00000000..25aedaf0 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/docs/style.css @@ -0,0 +1,115 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text_compact] */ + +html, +body { + height: 100%; + margin: 0; +} + +body { + display: flex; + flex-direction: column; + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 16px; + text-align: center; +} + +#map-container { + box-sizing: border-box; + width: 100%; + height: 100vh; +} + +.warning { + color: red; + position: absolute; + top: 50px; + display: none; +} + +.controls { + display: flex; + gap: 10px; + padding: 20px; + margin-top: 20px; + height: 32px; + background-color: #f3f3f3; + border-radius: 20px; + position: absolute; + top: 10px; + left: 50%; + margin-left: -260px; +} + +.search-button { + background-color: #4b4b4b; + color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + width: 80px; +} + +.query-input { + border: 1px solid #ccc; + border-radius: 5px; + flex-grow: 1; + padding: 10px; + width: 400px; +} + +.list-container { + display: flex; + justify-content: center; + position: relative; +} + +gmp-place-search { + width: 100%; + margin: 10px; + min-height: 414px; + display: none; + border: none; +} + +gmp-place-details-compact { + width: 350px; + max-height: 800px; + margin-right: 20px; + display: none; + border: none; +} + +gmp-place-details-compact::after { + content: ''; + position: absolute; + bottom: -13px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 20px; + background-color: white; + box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); + z-index: 1; + clip-path: polygon(0% 0%, 100% 0%, 50% 100%); + transform-origin: center center; +} + +@media (prefers-color-scheme: dark) { + /* Style for Dark mode */ + gmp-place-details-compact::after { + background-color: #131314; + } +} + +.vAygCK-api-load-alpha-banner { + display: none; +} +/* [END maps_ui_kit_place_search_text_compact] */ diff --git a/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.css b/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.css new file mode 100644 index 00000000..59b3bc79 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.css @@ -0,0 +1,115 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + + +html, +body { + height: 100%; + margin: 0; +} + +body { + display: flex; + flex-direction: column; + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 16px; + text-align: center; +} + +#map-container { + box-sizing: border-box; + width: 100%; + height: 100vh; +} + +.warning { + color: red; + position: absolute; + top: 50px; + display: none; +} + +.controls { + display: flex; + gap: 10px; + padding: 20px; + margin-top: 20px; + height: 32px; + background-color: #f3f3f3; + border-radius: 20px; + position: absolute; + top: 10px; + left: 50%; + margin-left: -260px; +} + +.search-button { + background-color: #4b4b4b; + color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + width: 80px; +} + +.query-input { + border: 1px solid #ccc; + border-radius: 5px; + flex-grow: 1; + padding: 10px; + width: 400px; +} + +.list-container { + display: flex; + justify-content: center; + position: relative; +} + +gmp-place-search { + width: 100%; + margin: 10px; + min-height: 414px; + display: none; + border: none; +} + +gmp-place-details-compact { + width: 350px; + max-height: 800px; + margin-right: 20px; + display: none; + border: none; +} + +gmp-place-details-compact::after { + content: ''; + position: absolute; + bottom: -13px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 20px; + background-color: white; + box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); + z-index: 1; + clip-path: polygon(0% 0%, 100% 0%, 50% 100%); + transform-origin: center center; +} + +@media (prefers-color-scheme: dark) { + /* Style for Dark mode */ + gmp-place-details-compact::after { + background-color: #131314; + } +} + +.vAygCK-api-load-alpha-banner { + display: none; +} + diff --git a/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.details b/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.details new file mode 100644 index 00000000..1b62ae3a --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: ui-kit-place-search-text-compact +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-place-search-text-compact/jsfiddle/demo.html b/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.html new file mode 100644 index 00000000..9615b09a --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.html @@ -0,0 +1,44 @@ + + + + + + Places UI Kit: Place (text) search with Place Details Compact + + + + +
    +
    + + +
    +
    + + + + +

    Looked for it, didn't find it. Let's try something else.

    +
    + +
    + + + + +
    + + + + + + diff --git a/package-lock.json b/package-lock.json index c69a7e98..6cc34588 100644 --- a/package-lock.json +++ b/package-lock.json @@ -653,6 +653,10 @@ "resolved": "samples/ui-kit-place-search-text", "link": true }, + "node_modules/@js-api-samples/ui-kit-place-search-text-compact": { + "resolved": "samples/ui-kit-place-search-text-compact", + "link": true + }, "node_modules/@js-api-samples/weather-api-current-compact": { "resolved": "samples/weather-api-current-compact", "link": true @@ -2482,6 +2486,10 @@ "name": "@js-api-samples/ui-kit-place-search-text", "version": "1.0.0" }, + "samples/ui-kit-place-search-text-compact": { + "name": "@js-api-samples/ui-kit-place-search-text-compact", + "version": "1.0.0" + }, "samples/weather-api-compact": { "version": "1.0.0", "extraneous": true