diff --git a/dist/index.html b/dist/index.html index 3eb7d4a4..3a2b01af 100644 --- a/dist/index.html +++ b/dist/index.html @@ -22,6 +22,7 @@

Maps JSAPI Samples

  • place-text-search
  • ui-kit-place-details
  • ui-kit-place-search
    • +
  • ui-kit-place-search-text
    • diff --git a/dist/samples/ui-kit-place-search-text/app/.eslintsrc.json b/dist/samples/ui-kit-place-search-text/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/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/app/README.md b/dist/samples/ui-kit-place-search-text/app/README.md new file mode 100644 index 00000000..62904810 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/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/app/index.html b/dist/samples/ui-kit-place-search-text/app/index.html new file mode 100644 index 00000000..f3c5207f --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/app/index.html @@ -0,0 +1,32 @@ + + + + + + Place List Text Search with Google Maps + + + + + + + +
    +
    + +
    +
    + +     + + + + + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search-text/app/index.ts b/dist/samples/ui-kit-place-search-text/app/index.ts new file mode 100644 index 00000000..6c0e1660 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/app/index.ts @@ -0,0 +1,110 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text] */ +/* [START maps_ui_kit_place_search_text_query_selectors] */ +const map = document.querySelector("gmp-map") as any; +const placeList = document.querySelector("gmp-place-list") as any; +const placeDetails = document.querySelector("gmp-place-details") as any; +let marker = document.querySelector('gmp-advanced-marker') as any; +/* [END maps_ui_kit_place_search_text_query_selectors] */ +/* [START maps_ui_kit_place_search_text_init_map] */ +let markers = {}; +let infoWindow; +let center = { lat: 37.395641, lng: -122.077627 }; + +async function initMap(): Promise { + await google.maps.importLibrary("places"); + const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; + + infoWindow = new google.maps.InfoWindow; + + // Center the map + let adjustedCenter = offsetLatLngRight(center, -0.005); + map.innerMap.panTo(adjustedCenter); + map.innerMap.setZoom(14); + + map.innerMap.setOptions({ + mapTypeControl: false, + clickableIcons: false, + }); + + searchByTextRequest('tacos near me'); +} +/* [END maps_ui_kit_place_search_text_init_map] */ + +/* [START maps_ui_kit_place_search_text_query] */ +async function searchByTextRequest(textQuery) { + if (textQuery) { + placeList.configureFromSearchByTextRequest({ + locationRestriction: map.innerMap.getBounds(), + includedType: "restaurant", + textQuery: textQuery, + }).then(addMarkers); + // Handle user selection in Place Details. + placeList.addEventListener("gmp-placeselect", ({ place }) => { + markers[place.id].click(); + }); + } +} +/* [END maps_ui_kit_place_search_text_query] */ +/* [START maps_ui_kit_place_search_text_add_markers] */ +async function addMarkers(){ + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary; + + const bounds = new LatLngBounds(); + + if(placeList.places.length > 0){ + placeList.places.forEach((place) => { + let marker = new AdvancedMarkerElement({ + map: map.innerMap, + position: place.location, + }); + + markers[place.id] = marker; + bounds.extend(place.location); + marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + + marker.addListener('gmp-click',(event) => { + if(infoWindow.isOpen){ + infoWindow.close(); + } + placeDetails.configureFromPlace(place); + placeDetails.style.width = "350px"; + infoWindow.setOptions({ + content: placeDetails + }); + infoWindow.open({ + anchor: marker, + map: map.innerMap + }); + placeDetails.addEventListener('gmp-load',() => { + map.innerMap.fitBounds(place.viewport, { top: 400, left: 400 }); + }); + + }); + map.innerMap.setCenter(bounds.getCenter()); + map.innerMap.fitBounds(bounds); + }); + } +} +/* [END maps_ui_kit_place_search_text_add_markers] */ + +// Helper function to offset the map center. +function offsetLatLngRight(latLng, longitudeOffset) { + const newLng = latLng.lng + longitudeOffset; + return new google.maps.LatLng(latLng.lat, newLng); +} + +declare global { + interface Window { + initMap: () => void; + } + } + window.initMap = initMap; +/* [END maps_ui_kit_place_search_text] */ +export{}; \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search-text/app/package.json b/dist/samples/ui-kit-place-search-text/app/package.json new file mode 100644 index 00000000..65f449b8 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/app/package.json @@ -0,0 +1,15 @@ +{ + "name": "@js-api-samples/ui-kit-place-search-text", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh ui-kit-place-search-text && bash ../app.sh ui-kit-place-search-text && bash ../docs.sh ui-kit-place-search-text && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-search-text", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } + } + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search-text/app/style.css b/dist/samples/ui-kit-place-search-text/app/style.css new file mode 100644 index 00000000..fc934829 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/app/style.css @@ -0,0 +1,68 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search] */ +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; + } + + gmp-map { + box-sizing: border-box; + height: 500px; + } + + .overlay { + position: relative; + top: 20px; + margin: 20px; + width: 400px; + } + + .controls { + display: flex; + gap: 10px; + margin-bottom: 10px; + height: 32px; + } + + .search-button { + background-color: #5491f5; + color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + width: 100px; + cursor: pointer; + } + + .type-select { + border: 1px solid #ccc; + border-radius: 5px; + flex-grow: 1; + padding: 0 10px; + } + + .list-container { + height: 400px; + overflow: auto; + border-radius: 10px; + } + + gmp-place-list { + background-color: #fff; + } +/* [END maps_ui_kit_place_search] */ \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search-text/app/tsconfig.json b/dist/samples/ui-kit-place-search-text/app/tsconfig.json new file mode 100644 index 00000000..09179087 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/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/dist/assets/index-BQOE2HdH.js b/dist/samples/ui-kit-place-search-text/dist/assets/index-BQOE2HdH.js new file mode 100644 index 00000000..5b0850f3 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/dist/assets/index-BQOE2HdH.js @@ -0,0 +1,5 @@ +(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const p of t.addedNodes)p.tagName==="LINK"&&p.rel==="modulepreload"&&i(p)}).observe(document,{childList:!0,subtree:!0});function a(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function i(e){if(e.ep)return;e.ep=!0;const t=a(e);fetch(e.href,t)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const r=document.querySelector("gmp-map"),l=document.querySelector("gmp-place-list"),c=document.querySelector("gmp-place-details");document.querySelector("gmp-advanced-marker");let d={},s,u={lat:37.395641,lng:-122.077627};async function m(){await google.maps.importLibrary("places"),await google.maps.importLibrary("maps"),await google.maps.importLibrary("places"),s=new google.maps.InfoWindow;let n=y(u,-.005);r.innerMap.panTo(n),r.innerMap.setZoom(14),r.innerMap.setOptions({mapTypeControl:!1,clickableIcons:!1}),f("tacos near me")}async function f(n){l.configureFromSearchByTextRequest({locationRestriction:r.innerMap.getBounds(),includedType:"restaurant",textQuery:n}).then(g),l.addEventListener("gmp-placeselect",({place:o})=>{d[o.id].click()})}async function g(){const{AdvancedMarkerElement:n}=await google.maps.importLibrary("marker"),{LatLngBounds:o}=await google.maps.importLibrary("core"),a=new o;l.places.length>0&&l.places.forEach(i=>{let e=new n({map:r.innerMap,position:i.location});d[i.id]=e,a.extend(i.location),e.collisionBehavior=google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,e.addListener("gmp-click",t=>{s.isOpen&&s.close(),c.configureFromPlace(i),c.style.width="350px",s.setOptions({content:c}),s.open({anchor:e,map:r.innerMap}),c.addEventListener("gmp-load",()=>{r.innerMap.fitBounds(i.viewport,{top:400,left:400})})}),r.innerMap.setCenter(a.getCenter()),r.innerMap.fitBounds(a)})}function y(n,o){const a=n.lng+o;return new google.maps.LatLng(n.lat,a)}window.initMap=m; diff --git a/dist/samples/ui-kit-place-search-text/dist/assets/index-Dq92m9UV.css b/dist/samples/ui-kit-place-search-text/dist/assets/index-Dq92m9UV.css new file mode 100644 index 00000000..1f2ebed4 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/dist/assets/index-Dq92m9UV.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}gmp-map{box-sizing:border-box;height:500px}.overlay{position:relative;top:20px;margin:20px;width:400px}.controls{display:flex;gap:10px;margin-bottom:10px;height:32px}.search-button{background-color:#5491f5;color:#fff;border:1px solid #ccc;border-radius:5px;width:100px;cursor:pointer}.type-select{border:1px solid #ccc;border-radius:5px;flex-grow:1;padding:0 10px}.list-container{height:400px;overflow:auto;border-radius:10px}gmp-place-list{background-color:#fff} diff --git a/dist/samples/ui-kit-place-search-text/dist/index.html b/dist/samples/ui-kit-place-search-text/dist/index.html new file mode 100644 index 00000000..ab2b305f --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/dist/index.html @@ -0,0 +1,32 @@ + + + + + + Place List Text Search with Google Maps + + + + + + + +
    +
    + +
    +
    + +     + + + + + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search-text/docs/index.html b/dist/samples/ui-kit-place-search-text/docs/index.html new file mode 100644 index 00000000..f3c5207f --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/docs/index.html @@ -0,0 +1,32 @@ + + + + + + Place List Text Search with Google Maps + + + + + + + +
    +
    + +
    +
    + +     + + + + + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search-text/docs/index.js b/dist/samples/ui-kit-place-search-text/docs/index.js new file mode 100644 index 00000000..d9b34ae7 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/docs/index.js @@ -0,0 +1,92 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text] */ +/* [START maps_ui_kit_place_search_text_query_selectors] */ +const map = document.querySelector("gmp-map"); +const placeList = document.querySelector("gmp-place-list"); +const placeDetails = document.querySelector("gmp-place-details"); +let marker = document.querySelector('gmp-advanced-marker'); +/* [END maps_ui_kit_place_search_text_query_selectors] */ +/* [START maps_ui_kit_place_search_text_init_map] */ +let markers = {}; +let infoWindow; +let center = { lat: 37.395641, lng: -122.077627 }; +async function initMap() { + await google.maps.importLibrary("places"); + const { InfoWindow } = await google.maps.importLibrary("maps"); + const { Place } = await google.maps.importLibrary("places"); + infoWindow = new google.maps.InfoWindow; + // Center the map + let adjustedCenter = offsetLatLngRight(center, -0.005); + map.innerMap.panTo(adjustedCenter); + map.innerMap.setZoom(14); + map.innerMap.setOptions({ + mapTypeControl: false, + clickableIcons: false, + }); + searchByTextRequest('tacos near me'); +} +/* [END maps_ui_kit_place_search_text_init_map] */ +/* [START maps_ui_kit_place_search_text_query] */ +async function searchByTextRequest(textQuery) { + if (textQuery) { + placeList.configureFromSearchByTextRequest({ + locationRestriction: map.innerMap.getBounds(), + includedType: "restaurant", + textQuery: textQuery, + }).then(addMarkers); + // Handle user selection in Place Details. + placeList.addEventListener("gmp-placeselect", ({ place }) => { + markers[place.id].click(); + }); + } +} +/* [END maps_ui_kit_place_search_text_query] */ +/* [START maps_ui_kit_place_search_text_add_markers] */ +async function addMarkers() { + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const { LatLngBounds } = await google.maps.importLibrary("core"); + const bounds = new LatLngBounds(); + if (placeList.places.length > 0) { + placeList.places.forEach((place) => { + let marker = new AdvancedMarkerElement({ + map: map.innerMap, + position: place.location, + }); + markers[place.id] = marker; + bounds.extend(place.location); + marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + marker.addListener('gmp-click', (event) => { + if (infoWindow.isOpen) { + infoWindow.close(); + } + placeDetails.configureFromPlace(place); + placeDetails.style.width = "350px"; + infoWindow.setOptions({ + content: placeDetails + }); + infoWindow.open({ + anchor: marker, + map: map.innerMap + }); + placeDetails.addEventListener('gmp-load', () => { + map.innerMap.fitBounds(place.viewport, { top: 400, left: 400 }); + }); + }); + map.innerMap.setCenter(bounds.getCenter()); + map.innerMap.fitBounds(bounds); + }); + } +} +/* [END maps_ui_kit_place_search_text_add_markers] */ +// Helper function to offset the map center. +function offsetLatLngRight(latLng, longitudeOffset) { + const newLng = latLng.lng + longitudeOffset; + return new google.maps.LatLng(latLng.lat, newLng); +} +window.initMap = initMap; +/* [END maps_ui_kit_place_search_text] */ +export {}; diff --git a/dist/samples/ui-kit-place-search-text/docs/index.ts b/dist/samples/ui-kit-place-search-text/docs/index.ts new file mode 100644 index 00000000..6c0e1660 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/docs/index.ts @@ -0,0 +1,110 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text] */ +/* [START maps_ui_kit_place_search_text_query_selectors] */ +const map = document.querySelector("gmp-map") as any; +const placeList = document.querySelector("gmp-place-list") as any; +const placeDetails = document.querySelector("gmp-place-details") as any; +let marker = document.querySelector('gmp-advanced-marker') as any; +/* [END maps_ui_kit_place_search_text_query_selectors] */ +/* [START maps_ui_kit_place_search_text_init_map] */ +let markers = {}; +let infoWindow; +let center = { lat: 37.395641, lng: -122.077627 }; + +async function initMap(): Promise { + await google.maps.importLibrary("places"); + const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; + + infoWindow = new google.maps.InfoWindow; + + // Center the map + let adjustedCenter = offsetLatLngRight(center, -0.005); + map.innerMap.panTo(adjustedCenter); + map.innerMap.setZoom(14); + + map.innerMap.setOptions({ + mapTypeControl: false, + clickableIcons: false, + }); + + searchByTextRequest('tacos near me'); +} +/* [END maps_ui_kit_place_search_text_init_map] */ + +/* [START maps_ui_kit_place_search_text_query] */ +async function searchByTextRequest(textQuery) { + if (textQuery) { + placeList.configureFromSearchByTextRequest({ + locationRestriction: map.innerMap.getBounds(), + includedType: "restaurant", + textQuery: textQuery, + }).then(addMarkers); + // Handle user selection in Place Details. + placeList.addEventListener("gmp-placeselect", ({ place }) => { + markers[place.id].click(); + }); + } +} +/* [END maps_ui_kit_place_search_text_query] */ +/* [START maps_ui_kit_place_search_text_add_markers] */ +async function addMarkers(){ + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary; + + const bounds = new LatLngBounds(); + + if(placeList.places.length > 0){ + placeList.places.forEach((place) => { + let marker = new AdvancedMarkerElement({ + map: map.innerMap, + position: place.location, + }); + + markers[place.id] = marker; + bounds.extend(place.location); + marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + + marker.addListener('gmp-click',(event) => { + if(infoWindow.isOpen){ + infoWindow.close(); + } + placeDetails.configureFromPlace(place); + placeDetails.style.width = "350px"; + infoWindow.setOptions({ + content: placeDetails + }); + infoWindow.open({ + anchor: marker, + map: map.innerMap + }); + placeDetails.addEventListener('gmp-load',() => { + map.innerMap.fitBounds(place.viewport, { top: 400, left: 400 }); + }); + + }); + map.innerMap.setCenter(bounds.getCenter()); + map.innerMap.fitBounds(bounds); + }); + } +} +/* [END maps_ui_kit_place_search_text_add_markers] */ + +// Helper function to offset the map center. +function offsetLatLngRight(latLng, longitudeOffset) { + const newLng = latLng.lng + longitudeOffset; + return new google.maps.LatLng(latLng.lat, newLng); +} + +declare global { + interface Window { + initMap: () => void; + } + } + window.initMap = initMap; +/* [END maps_ui_kit_place_search_text] */ +export{}; \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search-text/docs/style.css b/dist/samples/ui-kit-place-search-text/docs/style.css new file mode 100644 index 00000000..fc934829 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/docs/style.css @@ -0,0 +1,68 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search] */ +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; + } + + gmp-map { + box-sizing: border-box; + height: 500px; + } + + .overlay { + position: relative; + top: 20px; + margin: 20px; + width: 400px; + } + + .controls { + display: flex; + gap: 10px; + margin-bottom: 10px; + height: 32px; + } + + .search-button { + background-color: #5491f5; + color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + width: 100px; + cursor: pointer; + } + + .type-select { + border: 1px solid #ccc; + border-radius: 5px; + flex-grow: 1; + padding: 0 10px; + } + + .list-container { + height: 400px; + overflow: auto; + border-radius: 10px; + } + + gmp-place-list { + background-color: #fff; + } +/* [END maps_ui_kit_place_search] */ \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search-text/jsfiddle/demo.css b/dist/samples/ui-kit-place-search-text/jsfiddle/demo.css new file mode 100644 index 00000000..aa9a89ef --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/jsfiddle/demo.css @@ -0,0 +1,67 @@ +/* + * @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; + } + + gmp-map { + box-sizing: border-box; + height: 500px; + } + + .overlay { + position: relative; + top: 20px; + margin: 20px; + width: 400px; + } + + .controls { + display: flex; + gap: 10px; + margin-bottom: 10px; + height: 32px; + } + + .search-button { + background-color: #5491f5; + color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + width: 100px; + cursor: pointer; + } + + .type-select { + border: 1px solid #ccc; + border-radius: 5px; + flex-grow: 1; + padding: 0 10px; + } + + .list-container { + height: 400px; + overflow: auto; + border-radius: 10px; + } + + gmp-place-list { + background-color: #fff; + } diff --git a/dist/samples/ui-kit-place-search-text/jsfiddle/demo.details b/dist/samples/ui-kit-place-search-text/jsfiddle/demo.details new file mode 100644 index 00000000..d9b22c10 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: ui-kit-place-search-text +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/jsfiddle/demo.html b/dist/samples/ui-kit-place-search-text/jsfiddle/demo.html new file mode 100644 index 00000000..be23acb8 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/jsfiddle/demo.html @@ -0,0 +1,31 @@ + + + + + + Place List Text Search with Google Maps + + + + + + + +
    +
    + +
    +
    + +     + + + + diff --git a/dist/samples/ui-kit-place-search-text/jsfiddle/demo.js b/dist/samples/ui-kit-place-search-text/jsfiddle/demo.js new file mode 100644 index 00000000..d9b34ae7 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text/jsfiddle/demo.js @@ -0,0 +1,92 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text] */ +/* [START maps_ui_kit_place_search_text_query_selectors] */ +const map = document.querySelector("gmp-map"); +const placeList = document.querySelector("gmp-place-list"); +const placeDetails = document.querySelector("gmp-place-details"); +let marker = document.querySelector('gmp-advanced-marker'); +/* [END maps_ui_kit_place_search_text_query_selectors] */ +/* [START maps_ui_kit_place_search_text_init_map] */ +let markers = {}; +let infoWindow; +let center = { lat: 37.395641, lng: -122.077627 }; +async function initMap() { + await google.maps.importLibrary("places"); + const { InfoWindow } = await google.maps.importLibrary("maps"); + const { Place } = await google.maps.importLibrary("places"); + infoWindow = new google.maps.InfoWindow; + // Center the map + let adjustedCenter = offsetLatLngRight(center, -0.005); + map.innerMap.panTo(adjustedCenter); + map.innerMap.setZoom(14); + map.innerMap.setOptions({ + mapTypeControl: false, + clickableIcons: false, + }); + searchByTextRequest('tacos near me'); +} +/* [END maps_ui_kit_place_search_text_init_map] */ +/* [START maps_ui_kit_place_search_text_query] */ +async function searchByTextRequest(textQuery) { + if (textQuery) { + placeList.configureFromSearchByTextRequest({ + locationRestriction: map.innerMap.getBounds(), + includedType: "restaurant", + textQuery: textQuery, + }).then(addMarkers); + // Handle user selection in Place Details. + placeList.addEventListener("gmp-placeselect", ({ place }) => { + markers[place.id].click(); + }); + } +} +/* [END maps_ui_kit_place_search_text_query] */ +/* [START maps_ui_kit_place_search_text_add_markers] */ +async function addMarkers() { + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const { LatLngBounds } = await google.maps.importLibrary("core"); + const bounds = new LatLngBounds(); + if (placeList.places.length > 0) { + placeList.places.forEach((place) => { + let marker = new AdvancedMarkerElement({ + map: map.innerMap, + position: place.location, + }); + markers[place.id] = marker; + bounds.extend(place.location); + marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + marker.addListener('gmp-click', (event) => { + if (infoWindow.isOpen) { + infoWindow.close(); + } + placeDetails.configureFromPlace(place); + placeDetails.style.width = "350px"; + infoWindow.setOptions({ + content: placeDetails + }); + infoWindow.open({ + anchor: marker, + map: map.innerMap + }); + placeDetails.addEventListener('gmp-load', () => { + map.innerMap.fitBounds(place.viewport, { top: 400, left: 400 }); + }); + }); + map.innerMap.setCenter(bounds.getCenter()); + map.innerMap.fitBounds(bounds); + }); + } +} +/* [END maps_ui_kit_place_search_text_add_markers] */ +// Helper function to offset the map center. +function offsetLatLngRight(latLng, longitudeOffset) { + const newLng = latLng.lng + longitudeOffset; + return new google.maps.LatLng(latLng.lat, newLng); +} +window.initMap = initMap; +/* [END maps_ui_kit_place_search_text] */ +export {}; diff --git a/index.html b/index.html index 3eb7d4a4..3a2b01af 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@

    Maps JSAPI Samples

  • place-text-search
  • ui-kit-place-details
  • ui-kit-place-search
    • +
  • ui-kit-place-search-text