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 index ff72230f..8fabb49d 100644 --- a/dist/samples/ui-kit-place-search-text-compact/app/index.html +++ b/dist/samples/ui-kit-place-search-text-compact/app/index.html @@ -9,7 +9,8 @@ Places UI Kit: Place (text) search with Place Details Compact - + +
@@ -38,7 +39,6 @@ v: "alpha" }); - diff --git a/dist/samples/ui-kit-place-search-text-compact/app/index.ts b/dist/samples/ui-kit-place-search-text-compact/app/index.ts new file mode 100644 index 00000000..82e257eb --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/app/index.ts @@ -0,0 +1,157 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text_compact] */ +const mapContainer = document.getElementById("map-container") as any; +const placeSearch = document.querySelector("gmp-place-search") as any; +const placeSearchQuery = document.querySelector("gmp-place-text-search-request") as any; +const queryInput = document.querySelector(".query-input") as any; +const searchButton = document.querySelector(".search-button") as any; +const detailsContainer = document.getElementById("details-container") as any; +const placeDetails = document.querySelector("gmp-place-details-compact") as any; +const placeRequest = document.querySelector("gmp-place-details-place-request") as any; +const warningMsg = document.querySelector(".warning") as any; +let markers = {}; +let previousSearchQuery = ''; +let gMap; +let placeDetailsPopup; + +let AdvancedMarkerElement; +let LatLngBounds; +let LatLng; + +async function init() { + //@ts-ignore + const {Map} = await google.maps.importLibrary("maps"); + await google.maps.importLibrary("places"); + //@ts-ignore + ({AdvancedMarkerElement} = await google.maps.importLibrary("marker")); + //@ts-ignore + ({LatLngBounds, LatLng} = await google.maps.importLibrary("core")); + + let mapOptions = { + center: {lat: 37.422, lng: -122.085}, + zoom: 2, + mapTypeControl: false, + clickableIcons: false, + mapId: '2439f449ff38ce55' + }; + + gMap = new Map(mapContainer, mapOptions); + + placeDetailsPopup = new AdvancedMarkerElement({ + map: null, + content: placeDetails, + zIndex: 100 + }); + + findCurrentLocation(); + + gMap.addListener('click', (e) => { + hidePlaceDetailsPopup(); + }); + + searchButton.addEventListener("click", searchPlaces); + queryInput.addEventListener("keydown", (event) => { + if (event.key == 'Enter') { + event.preventDefault(); + searchPlaces(); + } + }); + + placeSearch.addEventListener("gmp-select", ({ place }) => { + if (markers[place.id]) { + markers[place.id].click(); + } + }); +} + +function searchPlaces(){ + if (queryInput.value.trim() === previousSearchQuery) { + return; + } + previousSearchQuery = queryInput.value.trim(); + warningMsg.style.display = 'none'; + placeDetailsPopup.map = null; + + for(const markerId in markers){ + if (Object.prototype.hasOwnProperty.call(markers, markerId)) { + markers[markerId].map = null; + } + } + markers = {}; + if (queryInput.value) { + mapContainer.style.height = '75vh'; + placeSearch.style.display = 'block'; + placeSearchQuery.textQuery = queryInput.value; + placeSearchQuery.locationBias = gMap.getBounds(); + placeSearch.addEventListener('gmp-load', addMarkers, { once: true }); + } +} + +async function addMarkers(){ + const bounds = new LatLngBounds(); + + if(placeSearch.places.length > 0){ + placeSearch.places.forEach((place) => { + let marker = new AdvancedMarkerElement({ + map: gMap, + position: place.location + }); + + marker.metadata = {id: place.id}; + markers[place.id] = marker; + bounds.extend(place.location); + + marker.addListener('click',(event) => { + placeRequest.place = place; + placeDetails.style.display = 'block'; + + placeDetailsPopup.position = place.location; + placeDetailsPopup.map = gMap; + + gMap.fitBounds(place.viewport, {top: 200, left: 100}); + + }); + gMap.setCenter(bounds.getCenter()); + gMap.fitBounds(bounds); + }); + } else { + warningMsg.style.display = "block"; + } +} + +async function findCurrentLocation(){ + //@ts-ignore + const { LatLng } = await google.maps.importLibrary("core"); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + (position) => { + const pos = new LatLng(position.coords.latitude,position.coords.longitude); + gMap.panTo(pos); + gMap.setZoom(16); + }, + () => { + console.log('The Geolocation service failed.'); + gMap.setZoom(16); + //@ts-ignore + }, + ); + } else { + console.log("Your browser doesn't support geolocation"); + gMap.setZoom(16); + } + +} + +function hidePlaceDetailsPopup() { + if (placeDetailsPopup.map) { + placeDetailsPopup.map = null; + placeDetails.style.display = 'none'; + } +} + +init(); +/* [END maps_ui_kit_place_search_text_compact] */ diff --git a/dist/samples/ui-kit-place-search-text-compact/dist/assets/index-DEw-iLjO.js b/dist/samples/ui-kit-place-search-text-compact/dist/assets/index-DEw-iLjO.js new file mode 100644 index 00000000..05c42054 --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/dist/assets/index-DEw-iLjO.js @@ -0,0 +1,5 @@ +(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))u(t);new MutationObserver(t=>{for(const a of t)if(a.type==="childList")for(const d of a.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&u(d)}).observe(document,{childList:!0,subtree:!0});function o(t){const a={};return t.integrity&&(a.integrity=t.integrity),t.referrerPolicy&&(a.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?a.credentials="include":t.crossOrigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function u(t){if(t.ep)return;t.ep=!0;const a=o(t);fetch(t.href,a)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const h=document.getElementById("map-container"),l=document.querySelector("gmp-place-search"),f=document.querySelector("gmp-place-text-search-request"),s=document.querySelector(".query-input"),w=document.querySelector(".search-button");document.getElementById("details-container");const m=document.querySelector("gmp-place-details-compact"),b=document.querySelector("gmp-place-details-place-request"),L=document.querySelector(".warning");let i={},y="",n,c,p,v,q;async function k(){const{Map:r}=await google.maps.importLibrary("maps");await google.maps.importLibrary("places"),{AdvancedMarkerElement:p}=await google.maps.importLibrary("marker"),{LatLngBounds:v,LatLng:q}=await google.maps.importLibrary("core");let e={center:{lat:37.422,lng:-122.085},zoom:2,mapTypeControl:!1,clickableIcons:!1,mapId:"2439f449ff38ce55"};n=new r(h,e),c=new p({map:null,content:m,zIndex:100}),E(),n.addListener("click",o=>{P()}),w.addEventListener("click",g),s.addEventListener("keydown",o=>{o.key=="Enter"&&(o.preventDefault(),g())}),l.addEventListener("gmp-select",({place:o})=>{i[o.id]&&i[o.id].click()})}function g(){if(s.value.trim()!==y){y=s.value.trim(),L.style.display="none",c.map=null;for(const r in i)Object.prototype.hasOwnProperty.call(i,r)&&(i[r].map=null);i={},s.value&&(h.style.height="75vh",l.style.display="block",f.textQuery=s.value,f.locationBias=n.getBounds(),l.addEventListener("gmp-load",S,{once:!0}))}}async function S(){const r=new v;l.places.length>0?l.places.forEach(e=>{let o=new p({map:n,position:e.location});o.metadata={id:e.id},i[e.id]=o,r.extend(e.location),o.addListener("click",u=>{b.place=e,m.style.display="block",c.position=e.location,c.map=n,n.fitBounds(e.viewport,{top:200,left:100})}),n.setCenter(r.getCenter()),n.fitBounds(r)}):L.style.display="block"}async function E(){const{LatLng:r}=await google.maps.importLibrary("core");navigator.geolocation?navigator.geolocation.getCurrentPosition(e=>{const o=new r(e.coords.latitude,e.coords.longitude);n.panTo(o),n.setZoom(16)},()=>{console.log("The Geolocation service failed."),n.setZoom(16)}):(console.log("Your browser doesn't support geolocation"),n.setZoom(16))}function P(){c.map&&(c.map=null,m.style.display="none")}k(); 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 index 70509a88..9c4b906a 100644 --- a/dist/samples/ui-kit-place-search-text-compact/dist/index.html +++ b/dist/samples/ui-kit-place-search-text-compact/dist/index.html @@ -9,6 +9,7 @@ Places UI Kit: Place (text) search with Place Details Compact + @@ -38,7 +39,6 @@ v: "alpha" }); - 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 index ff72230f..8fabb49d 100644 --- a/dist/samples/ui-kit-place-search-text-compact/docs/index.html +++ b/dist/samples/ui-kit-place-search-text-compact/docs/index.html @@ -9,7 +9,8 @@ Places UI Kit: Place (text) search with Place Details Compact - + +
@@ -38,7 +39,6 @@ v: "alpha" }); - diff --git a/dist/samples/ui-kit-place-search-text-compact/docs/index.js b/dist/samples/ui-kit-place-search-text-compact/docs/index.js new file mode 100644 index 00000000..9bb8480a --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/docs/index.js @@ -0,0 +1,135 @@ +"use strict"; +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text_compact] */ +const mapContainer = document.getElementById("map-container"); +const placeSearch = document.querySelector("gmp-place-search"); +const placeSearchQuery = document.querySelector("gmp-place-text-search-request"); +const queryInput = document.querySelector(".query-input"); +const searchButton = document.querySelector(".search-button"); +const detailsContainer = document.getElementById("details-container"); +const placeDetails = document.querySelector("gmp-place-details-compact"); +const placeRequest = document.querySelector("gmp-place-details-place-request"); +const warningMsg = document.querySelector(".warning"); +let markers = {}; +let previousSearchQuery = ''; +let gMap; +let placeDetailsPopup; +let AdvancedMarkerElement; +let LatLngBounds; +let LatLng; +async function init() { + //@ts-ignore + const { Map } = await google.maps.importLibrary("maps"); + await google.maps.importLibrary("places"); + //@ts-ignore + ({ AdvancedMarkerElement } = await google.maps.importLibrary("marker")); + //@ts-ignore + ({ LatLngBounds, LatLng } = await google.maps.importLibrary("core")); + let mapOptions = { + center: { lat: 37.422, lng: -122.085 }, + zoom: 2, + mapTypeControl: false, + clickableIcons: false, + mapId: '2439f449ff38ce55' + }; + gMap = new Map(mapContainer, mapOptions); + placeDetailsPopup = new AdvancedMarkerElement({ + map: null, + content: placeDetails, + zIndex: 100 + }); + findCurrentLocation(); + gMap.addListener('click', (e) => { + hidePlaceDetailsPopup(); + }); + searchButton.addEventListener("click", searchPlaces); + queryInput.addEventListener("keydown", (event) => { + if (event.key == 'Enter') { + event.preventDefault(); + searchPlaces(); + } + }); + placeSearch.addEventListener("gmp-select", ({ place }) => { + if (markers[place.id]) { + markers[place.id].click(); + } + }); +} +function searchPlaces() { + if (queryInput.value.trim() === previousSearchQuery) { + return; + } + previousSearchQuery = queryInput.value.trim(); + warningMsg.style.display = 'none'; + placeDetailsPopup.map = null; + for (const markerId in markers) { + if (Object.prototype.hasOwnProperty.call(markers, markerId)) { + markers[markerId].map = null; + } + } + markers = {}; + if (queryInput.value) { + mapContainer.style.height = '75vh'; + placeSearch.style.display = 'block'; + placeSearchQuery.textQuery = queryInput.value; + placeSearchQuery.locationBias = gMap.getBounds(); + placeSearch.addEventListener('gmp-load', addMarkers, { once: true }); + } +} +async function addMarkers() { + const bounds = new LatLngBounds(); + if (placeSearch.places.length > 0) { + placeSearch.places.forEach((place) => { + let marker = new AdvancedMarkerElement({ + map: gMap, + position: place.location + }); + marker.metadata = { id: place.id }; + markers[place.id] = marker; + bounds.extend(place.location); + marker.addListener('click', (event) => { + placeRequest.place = place; + placeDetails.style.display = 'block'; + placeDetailsPopup.position = place.location; + placeDetailsPopup.map = gMap; + gMap.fitBounds(place.viewport, { top: 200, left: 100 }); + }); + gMap.setCenter(bounds.getCenter()); + gMap.fitBounds(bounds); + }); + } + else { + warningMsg.style.display = "block"; + } +} +async function findCurrentLocation() { + //@ts-ignore + const { LatLng } = await google.maps.importLibrary("core"); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition((position) => { + const pos = new LatLng(position.coords.latitude, position.coords.longitude); + gMap.panTo(pos); + gMap.setZoom(16); + }, () => { + console.log('The Geolocation service failed.'); + gMap.setZoom(16); + //@ts-ignore + }); + } + else { + console.log("Your browser doesn't support geolocation"); + gMap.setZoom(16); + } +} +function hidePlaceDetailsPopup() { + if (placeDetailsPopup.map) { + placeDetailsPopup.map = null; + placeDetails.style.display = 'none'; + } +} +init(); +/* [END maps_ui_kit_place_search_text_compact] */ diff --git a/dist/samples/ui-kit-place-search-text-compact/docs/index.ts b/dist/samples/ui-kit-place-search-text-compact/docs/index.ts new file mode 100644 index 00000000..82e257eb --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/docs/index.ts @@ -0,0 +1,157 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text_compact] */ +const mapContainer = document.getElementById("map-container") as any; +const placeSearch = document.querySelector("gmp-place-search") as any; +const placeSearchQuery = document.querySelector("gmp-place-text-search-request") as any; +const queryInput = document.querySelector(".query-input") as any; +const searchButton = document.querySelector(".search-button") as any; +const detailsContainer = document.getElementById("details-container") as any; +const placeDetails = document.querySelector("gmp-place-details-compact") as any; +const placeRequest = document.querySelector("gmp-place-details-place-request") as any; +const warningMsg = document.querySelector(".warning") as any; +let markers = {}; +let previousSearchQuery = ''; +let gMap; +let placeDetailsPopup; + +let AdvancedMarkerElement; +let LatLngBounds; +let LatLng; + +async function init() { + //@ts-ignore + const {Map} = await google.maps.importLibrary("maps"); + await google.maps.importLibrary("places"); + //@ts-ignore + ({AdvancedMarkerElement} = await google.maps.importLibrary("marker")); + //@ts-ignore + ({LatLngBounds, LatLng} = await google.maps.importLibrary("core")); + + let mapOptions = { + center: {lat: 37.422, lng: -122.085}, + zoom: 2, + mapTypeControl: false, + clickableIcons: false, + mapId: '2439f449ff38ce55' + }; + + gMap = new Map(mapContainer, mapOptions); + + placeDetailsPopup = new AdvancedMarkerElement({ + map: null, + content: placeDetails, + zIndex: 100 + }); + + findCurrentLocation(); + + gMap.addListener('click', (e) => { + hidePlaceDetailsPopup(); + }); + + searchButton.addEventListener("click", searchPlaces); + queryInput.addEventListener("keydown", (event) => { + if (event.key == 'Enter') { + event.preventDefault(); + searchPlaces(); + } + }); + + placeSearch.addEventListener("gmp-select", ({ place }) => { + if (markers[place.id]) { + markers[place.id].click(); + } + }); +} + +function searchPlaces(){ + if (queryInput.value.trim() === previousSearchQuery) { + return; + } + previousSearchQuery = queryInput.value.trim(); + warningMsg.style.display = 'none'; + placeDetailsPopup.map = null; + + for(const markerId in markers){ + if (Object.prototype.hasOwnProperty.call(markers, markerId)) { + markers[markerId].map = null; + } + } + markers = {}; + if (queryInput.value) { + mapContainer.style.height = '75vh'; + placeSearch.style.display = 'block'; + placeSearchQuery.textQuery = queryInput.value; + placeSearchQuery.locationBias = gMap.getBounds(); + placeSearch.addEventListener('gmp-load', addMarkers, { once: true }); + } +} + +async function addMarkers(){ + const bounds = new LatLngBounds(); + + if(placeSearch.places.length > 0){ + placeSearch.places.forEach((place) => { + let marker = new AdvancedMarkerElement({ + map: gMap, + position: place.location + }); + + marker.metadata = {id: place.id}; + markers[place.id] = marker; + bounds.extend(place.location); + + marker.addListener('click',(event) => { + placeRequest.place = place; + placeDetails.style.display = 'block'; + + placeDetailsPopup.position = place.location; + placeDetailsPopup.map = gMap; + + gMap.fitBounds(place.viewport, {top: 200, left: 100}); + + }); + gMap.setCenter(bounds.getCenter()); + gMap.fitBounds(bounds); + }); + } else { + warningMsg.style.display = "block"; + } +} + +async function findCurrentLocation(){ + //@ts-ignore + const { LatLng } = await google.maps.importLibrary("core"); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + (position) => { + const pos = new LatLng(position.coords.latitude,position.coords.longitude); + gMap.panTo(pos); + gMap.setZoom(16); + }, + () => { + console.log('The Geolocation service failed.'); + gMap.setZoom(16); + //@ts-ignore + }, + ); + } else { + console.log("Your browser doesn't support geolocation"); + gMap.setZoom(16); + } + +} + +function hidePlaceDetailsPopup() { + if (placeDetailsPopup.map) { + placeDetailsPopup.map = null; + placeDetails.style.display = 'none'; + } +} + +init(); +/* [END maps_ui_kit_place_search_text_compact] */ 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 index 9615b09a..ba0859db 100644 --- a/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.html +++ b/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.html @@ -9,7 +9,8 @@ Places UI Kit: Place (text) search with Place Details Compact - + +
@@ -38,7 +39,6 @@ v: "alpha" }); - diff --git a/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.js b/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.js new file mode 100644 index 00000000..9bb8480a --- /dev/null +++ b/dist/samples/ui-kit-place-search-text-compact/jsfiddle/demo.js @@ -0,0 +1,135 @@ +"use strict"; +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search_text_compact] */ +const mapContainer = document.getElementById("map-container"); +const placeSearch = document.querySelector("gmp-place-search"); +const placeSearchQuery = document.querySelector("gmp-place-text-search-request"); +const queryInput = document.querySelector(".query-input"); +const searchButton = document.querySelector(".search-button"); +const detailsContainer = document.getElementById("details-container"); +const placeDetails = document.querySelector("gmp-place-details-compact"); +const placeRequest = document.querySelector("gmp-place-details-place-request"); +const warningMsg = document.querySelector(".warning"); +let markers = {}; +let previousSearchQuery = ''; +let gMap; +let placeDetailsPopup; +let AdvancedMarkerElement; +let LatLngBounds; +let LatLng; +async function init() { + //@ts-ignore + const { Map } = await google.maps.importLibrary("maps"); + await google.maps.importLibrary("places"); + //@ts-ignore + ({ AdvancedMarkerElement } = await google.maps.importLibrary("marker")); + //@ts-ignore + ({ LatLngBounds, LatLng } = await google.maps.importLibrary("core")); + let mapOptions = { + center: { lat: 37.422, lng: -122.085 }, + zoom: 2, + mapTypeControl: false, + clickableIcons: false, + mapId: '2439f449ff38ce55' + }; + gMap = new Map(mapContainer, mapOptions); + placeDetailsPopup = new AdvancedMarkerElement({ + map: null, + content: placeDetails, + zIndex: 100 + }); + findCurrentLocation(); + gMap.addListener('click', (e) => { + hidePlaceDetailsPopup(); + }); + searchButton.addEventListener("click", searchPlaces); + queryInput.addEventListener("keydown", (event) => { + if (event.key == 'Enter') { + event.preventDefault(); + searchPlaces(); + } + }); + placeSearch.addEventListener("gmp-select", ({ place }) => { + if (markers[place.id]) { + markers[place.id].click(); + } + }); +} +function searchPlaces() { + if (queryInput.value.trim() === previousSearchQuery) { + return; + } + previousSearchQuery = queryInput.value.trim(); + warningMsg.style.display = 'none'; + placeDetailsPopup.map = null; + for (const markerId in markers) { + if (Object.prototype.hasOwnProperty.call(markers, markerId)) { + markers[markerId].map = null; + } + } + markers = {}; + if (queryInput.value) { + mapContainer.style.height = '75vh'; + placeSearch.style.display = 'block'; + placeSearchQuery.textQuery = queryInput.value; + placeSearchQuery.locationBias = gMap.getBounds(); + placeSearch.addEventListener('gmp-load', addMarkers, { once: true }); + } +} +async function addMarkers() { + const bounds = new LatLngBounds(); + if (placeSearch.places.length > 0) { + placeSearch.places.forEach((place) => { + let marker = new AdvancedMarkerElement({ + map: gMap, + position: place.location + }); + marker.metadata = { id: place.id }; + markers[place.id] = marker; + bounds.extend(place.location); + marker.addListener('click', (event) => { + placeRequest.place = place; + placeDetails.style.display = 'block'; + placeDetailsPopup.position = place.location; + placeDetailsPopup.map = gMap; + gMap.fitBounds(place.viewport, { top: 200, left: 100 }); + }); + gMap.setCenter(bounds.getCenter()); + gMap.fitBounds(bounds); + }); + } + else { + warningMsg.style.display = "block"; + } +} +async function findCurrentLocation() { + //@ts-ignore + const { LatLng } = await google.maps.importLibrary("core"); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition((position) => { + const pos = new LatLng(position.coords.latitude, position.coords.longitude); + gMap.panTo(pos); + gMap.setZoom(16); + }, () => { + console.log('The Geolocation service failed.'); + gMap.setZoom(16); + //@ts-ignore + }); + } + else { + console.log("Your browser doesn't support geolocation"); + gMap.setZoom(16); + } +} +function hidePlaceDetailsPopup() { + if (placeDetailsPopup.map) { + placeDetailsPopup.map = null; + placeDetails.style.display = 'none'; + } +} +init(); +/* [END maps_ui_kit_place_search_text_compact] */