diff --git a/dist/samples/ui-kit-place-details-compact/app/index.html b/dist/samples/ui-kit-place-details-compact/app/index.html index bd9d18d95..d07f2c26e 100644 --- a/dist/samples/ui-kit-place-details-compact/app/index.html +++ b/dist/samples/ui-kit-place-details-compact/app/index.html @@ -13,29 +13,24 @@ - - - - - - - - - - - - - - - - - - - - - - + +
+ + + + + + + + +
+ + diff --git a/dist/samples/ui-kit-place-details-compact/app/index.ts b/dist/samples/ui-kit-place-details-compact/app/index.ts index d1de982d8..7376818b3 100644 --- a/dist/samples/ui-kit-place-details-compact/app/index.ts +++ b/dist/samples/ui-kit-place-details-compact/app/index.ts @@ -5,21 +5,68 @@ */ /* [START maps_ui_kit_place_details_compact] */ // Use querySelector to select elements for interaction. -const map = document.querySelector('gmp-map') as google.maps.MapElement; -//@ts-ignore -const marker = document.querySelector('gmp-advanced-marker') as any; +const mapContainer = document.getElementById("map-container") as any; +const detailsContainer = document.getElementById("details-container") as any; +const placeDetails = document.querySelector("gmp-place-details-compact") as any; +const placeDetailsRequest = document.querySelector("gmp-place-details-place-request") as any; +let gMap; +let infowindow; +let marker; async function initMap(): Promise { - // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; - await google.maps.importLibrary("places") as google.maps.PlacesLibrary; - // Hide the map type control. - map.innerMap.setOptions({ mapTypeControl: false }); - // Set marker collision behavior. - marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; - // Add marker to place location. - marker.position = { lat: 47.75972, lng: -122.25094 }; + const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places") as any; + const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' }); + marker = new AdvancedMarkerElement({ map: gMap }); + infowindow = new InfoWindow({}); + + // Hide the map type control. + gMap.setOptions({mapTypeControl: false}); + + // Set up map, marker, and infowindow once widget is loaded. + placeDetails.style.visibility = 'visible'; + placeDetails.addEventListener('gmp-load', (event) => { + console.log("placeDetails initialized!"); + updateMapAndMarker(); + }); + // Add an event listener to handle clicks. + gMap.addListener("click", async (event) => { + marker.position = null; + event.stop(); + // Fire when the user clicks on a POI. + if (event.placeId) { + console.log("clicked on POI"); + console.log(event.placeId); + placeDetailsRequest.place = event.placeId; + updateMapAndMarker(); + } + else { + // Fire when the user clicks the map (not on a POI). + console.log('No place was selected.'); + }; + }); + // Function to update map, marker, and infowindow based on place details + const updateMapAndMarker = () => { + console.log("function called"); + if (placeDetails.place && placeDetails.place.location) { + gMap.panTo(placeDetails.place.location); + gMap.setZoom(16); // Set zoom after panning if needed + marker.position = placeDetails.place.location; + marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + marker.style.display = 'block'; + //@ts-ignore + infowindow.setOptions({ + content: placeDetails + }); + //@ts-ignore + infowindow.open({ + anchor: marker, + map: gMap, + }); + } + }; } initMap(); /* [END maps_ui_kit_place_details_compact] */ diff --git a/dist/samples/ui-kit-place-details-compact/app/style.css b/dist/samples/ui-kit-place-details-compact/app/style.css index 5bc57c860..9f0a93cd3 100644 --- a/dist/samples/ui-kit-place-details-compact/app/style.css +++ b/dist/samples/ui-kit-place-details-compact/app/style.css @@ -4,18 +4,22 @@ * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_ui_kit_place_details_compact] */ -/* - * Optional: Makes the sample page fill the window. - */ +html, body { display: flex; width: 100%; height: 100%; + margin: 0; +} + +h1 { + font-size: 16px; + text-align: center; } -gmp-map { - height: 600px; - pointer-events: none; +#map-container { + box-sizing: border-box; + width: 100%; } /* [START maps_ui_kit_place_details_compact_style] */ gmp-place-details-compact { @@ -25,16 +29,50 @@ gmp-place-details-compact { /* Sets the background color of the surface */ /* Adapts automatically to the user's system light/dark mode preference */ --gmp-mat-color-surface: light-dark(white, black); - /* Defines the primary font stack used within the component */ --gmp-mat-font-family: Google Sans Text, sans-serif; /* Defines the style for medium body text (e.g., address, descriptions) */ --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text'); - + width: 360px; - margin-top: 100px; + border: none; overflow-y: hidden; } -/* [END maps_ui_kit_place_details_compact_style] */ +.gm-style-iw button { + display: none !important; +} + +.gm-style-iw-c { + padding: 0 !important; + margin: 0 !important; +} + +.gm-style-iw-d { + padding: 0 !important; + margin: 0 !important; /* Sometimes margin can also contribute to unwanted space */ + overflow: visible !important; /* If you don't want scrollbars, but be careful with content overflow */ +} + +.gm-style-iw-c * { /* Target all elements inside the infowindow content container */ + padding: 0 !important; + margin: 0 !important; +} + +@media (prefers-color-scheme: dark) { + + .gm-style-iw.gm-style-iw-c, + .gm-style .gm-style-iw-d, + .gm-style .gm-style-iw-d::-webkit-scrollbar-track, + .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece, + .gm-style .gm-style-iw-c, + .gm-style .gm-style-iw-t::after, + .gm-style .gm-style-iw-tc::after { + background-color: #000 !important; + } + .gm-ui-hover-effect>span { + background-color: #fff !important; + } +} +/* [END maps_ui_kit_place_details_compact_style] */ /* [END maps_ui_kit_place_details_compact] */ diff --git a/dist/samples/ui-kit-place-details-compact/dist/assets/index--nVeueu1.css b/dist/samples/ui-kit-place-details-compact/dist/assets/index--nVeueu1.css new file mode 100644 index 000000000..1790adf76 --- /dev/null +++ b/dist/samples/ui-kit-place-details-compact/dist/assets/index--nVeueu1.css @@ -0,0 +1,5 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */html,body{display:flex;width:100%;height:100%;margin:0}h1{font-size:16px;text-align:center}#map-container{box-sizing:border-box;width:100%}gmp-place-details-compact{--gmp-mat-color-on-surface: light-dark(black, white);--gmp-mat-color-surface: light-dark(white, black);--gmp-mat-font-family: Google Sans Text, sans-serif;--gmp-mat-font-body-medium: normal 400 .875em/1.25em var(--gmp-mat-font-family, "Google Sans Text");width:360px;border:none;overflow-y:hidden}.gm-style-iw button{display:none!important}.gm-style-iw-c{padding:0!important;margin:0!important}.gm-style-iw-d{padding:0!important;margin:0!important;overflow:visible!important}.gm-style-iw-c *{padding:0!important;margin:0!important}@media (prefers-color-scheme: dark){.gm-style-iw.gm-style-iw-c,.gm-style .gm-style-iw-d,.gm-style .gm-style-iw-d::-webkit-scrollbar-track,.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,.gm-style .gm-style-iw-c,.gm-style .gm-style-iw-t:after,.gm-style .gm-style-iw-tc:after{background-color:#000!important}.gm-ui-hover-effect>span{background-color:#fff!important}} diff --git a/dist/samples/ui-kit-place-details-compact/dist/assets/index-C2o3PuNP.js b/dist/samples/ui-kit-place-details-compact/dist/assets/index-C2o3PuNP.js deleted file mode 100644 index 6d401ec3e..000000000 --- a/dist/samples/ui-kit-place-details-compact/dist/assets/index-C2o3PuNP.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&i(o)}).observe(document,{childList:!0,subtree:!0});function a(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(e){if(e.ep)return;e.ep=!0;const r=a(e);fetch(e.href,r)}})();/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */const c=document.querySelector("gmp-map"),n=document.querySelector("gmp-advanced-marker");async function l(){const{Map:s}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:t}=await google.maps.importLibrary("marker");await google.maps.importLibrary("places"),c.innerMap.setOptions({mapTypeControl:!1}),n.collisionBehavior=google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,n.position={lat:47.75972,lng:-122.25094}}l(); diff --git a/dist/samples/ui-kit-place-details-compact/dist/assets/index-CEzUVn7G.css b/dist/samples/ui-kit-place-details-compact/dist/assets/index-CEzUVn7G.css deleted file mode 100644 index 75512b141..000000000 --- a/dist/samples/ui-kit-place-details-compact/dist/assets/index-CEzUVn7G.css +++ /dev/null @@ -1,5 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */body{display:flex;width:100%;height:100%}gmp-map{height:600px;pointer-events:none}gmp-place-details-compact{--gmp-mat-color-on-surface: light-dark(black, white);--gmp-mat-color-surface: light-dark(white, black);--gmp-mat-font-family: Google Sans Text, sans-serif;--gmp-mat-font-body-medium: normal 400 .875em/1.25em var(--gmp-mat-font-family, "Google Sans Text");width:360px;margin-top:100px;overflow-y:hidden} diff --git a/dist/samples/ui-kit-place-details-compact/dist/assets/index-PpKQ7CME.js b/dist/samples/ui-kit-place-details-compact/dist/assets/index-PpKQ7CME.js new file mode 100644 index 000000000..150027542 --- /dev/null +++ b/dist/samples/ui-kit-place-details-compact/dist/assets/index-PpKQ7CME.js @@ -0,0 +1,5 @@ +(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))c(e);new MutationObserver(e=>{for(const o of e)if(o.type==="childList")for(const t of o.addedNodes)t.tagName==="LINK"&&t.rel==="modulepreload"&&c(t)}).observe(document,{childList:!0,subtree:!0});function s(e){const o={};return e.integrity&&(o.integrity=e.integrity),e.referrerPolicy&&(o.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?o.credentials="include":e.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function c(e){if(e.ep)return;e.ep=!0;const o=s(e);fetch(e.href,o)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const d=document.getElementById("map-container");document.getElementById("details-container");const l=document.querySelector("gmp-place-details-compact"),m=document.querySelector("gmp-place-details-place-request");let i,r,a;async function u(){const{PlaceDetailsCompactElement:p,PlaceDetailsPlaceRequestElement:n}=await google.maps.importLibrary("places"),{Map:s,InfoWindow:c}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:e}=await google.maps.importLibrary("marker");i=new s(d,{mapId:"DEMO_MAP_ID"}),a=new e({map:i}),r=new c({}),i.setOptions({mapTypeControl:!1}),l.style.visibility="visible",l.addEventListener("gmp-load",t=>{console.log("placeDetails initialized!"),o()}),i.addListener("click",async t=>{a.position=null,t.stop(),t.placeId?(console.log("clicked on POI"),console.log(t.placeId),m.place=t.placeId,o()):console.log("No place was selected.")});const o=()=>{console.log("function called"),l.place&&l.place.location&&(i.panTo(l.place.location),i.setZoom(16),a.position=l.place.location,a.collisionBehavior=google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,a.style.display="block",r.setOptions({content:l}),r.open({anchor:a,map:i}))}}u(); diff --git a/dist/samples/ui-kit-place-details-compact/dist/index.html b/dist/samples/ui-kit-place-details-compact/dist/index.html index a443d822d..727f866cd 100644 --- a/dist/samples/ui-kit-place-details-compact/dist/index.html +++ b/dist/samples/ui-kit-place-details-compact/dist/index.html @@ -9,33 +9,28 @@ Click on the map to view place details - - + + - - - - - - - - - - - - - - - - - - - - - - + +
+ + + + + + + + +
+ + diff --git a/dist/samples/ui-kit-place-details-compact/docs/index.html b/dist/samples/ui-kit-place-details-compact/docs/index.html index bd9d18d95..d07f2c26e 100644 --- a/dist/samples/ui-kit-place-details-compact/docs/index.html +++ b/dist/samples/ui-kit-place-details-compact/docs/index.html @@ -13,29 +13,24 @@ - - - - - - - - - - - - - - - - - - - - - - + +
+ + + + + + + + +
+ + diff --git a/dist/samples/ui-kit-place-details-compact/docs/index.js b/dist/samples/ui-kit-place-details-compact/docs/index.js index 388a0ccfa..3ea2d5e68 100644 --- a/dist/samples/ui-kit-place-details-compact/docs/index.js +++ b/dist/samples/ui-kit-place-details-compact/docs/index.js @@ -6,20 +6,65 @@ */ /* [START maps_ui_kit_place_details_compact] */ // Use querySelector to select elements for interaction. -const map = document.querySelector('gmp-map'); -//@ts-ignore -const marker = document.querySelector('gmp-advanced-marker'); +const mapContainer = document.getElementById("map-container"); +const detailsContainer = document.getElementById("details-container"); +const placeDetails = document.querySelector("gmp-place-details-compact"); +const placeDetailsRequest = document.querySelector("gmp-place-details-place-request"); +let gMap; +let infowindow; +let marker; async function initMap() { - // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps"); + const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places"); + const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - await google.maps.importLibrary("places"); + gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' }); + marker = new AdvancedMarkerElement({ map: gMap }); + infowindow = new InfoWindow({}); // Hide the map type control. - map.innerMap.setOptions({ mapTypeControl: false }); - // Set marker collision behavior. - marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; - // Add marker to place location. - marker.position = { lat: 47.75972, lng: -122.25094 }; + gMap.setOptions({ mapTypeControl: false }); + // Set up map, marker, and infowindow once widget is loaded. + placeDetails.style.visibility = 'visible'; + placeDetails.addEventListener('gmp-load', (event) => { + console.log("placeDetails initialized!"); + updateMapAndMarker(); + }); + // Add an event listener to handle clicks. + gMap.addListener("click", async (event) => { + marker.position = null; + event.stop(); + // Fire when the user clicks on a POI. + if (event.placeId) { + console.log("clicked on POI"); + console.log(event.placeId); + placeDetailsRequest.place = event.placeId; + updateMapAndMarker(); + } + else { + // Fire when the user clicks the map (not on a POI). + console.log('No place was selected.'); + } + ; + }); + // Function to update map, marker, and infowindow based on place details + const updateMapAndMarker = () => { + console.log("function called"); + if (placeDetails.place && placeDetails.place.location) { + gMap.panTo(placeDetails.place.location); + gMap.setZoom(16); // Set zoom after panning if needed + marker.position = placeDetails.place.location; + marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + marker.style.display = 'block'; + //@ts-ignore + infowindow.setOptions({ + content: placeDetails + }); + //@ts-ignore + infowindow.open({ + anchor: marker, + map: gMap, + }); + } + }; } initMap(); /* [END maps_ui_kit_place_details_compact] */ diff --git a/dist/samples/ui-kit-place-details-compact/docs/index.ts b/dist/samples/ui-kit-place-details-compact/docs/index.ts index d1de982d8..7376818b3 100644 --- a/dist/samples/ui-kit-place-details-compact/docs/index.ts +++ b/dist/samples/ui-kit-place-details-compact/docs/index.ts @@ -5,21 +5,68 @@ */ /* [START maps_ui_kit_place_details_compact] */ // Use querySelector to select elements for interaction. -const map = document.querySelector('gmp-map') as google.maps.MapElement; -//@ts-ignore -const marker = document.querySelector('gmp-advanced-marker') as any; +const mapContainer = document.getElementById("map-container") as any; +const detailsContainer = document.getElementById("details-container") as any; +const placeDetails = document.querySelector("gmp-place-details-compact") as any; +const placeDetailsRequest = document.querySelector("gmp-place-details-place-request") as any; +let gMap; +let infowindow; +let marker; async function initMap(): Promise { - // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; - await google.maps.importLibrary("places") as google.maps.PlacesLibrary; - // Hide the map type control. - map.innerMap.setOptions({ mapTypeControl: false }); - // Set marker collision behavior. - marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; - // Add marker to place location. - marker.position = { lat: 47.75972, lng: -122.25094 }; + const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places") as any; + const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' }); + marker = new AdvancedMarkerElement({ map: gMap }); + infowindow = new InfoWindow({}); + + // Hide the map type control. + gMap.setOptions({mapTypeControl: false}); + + // Set up map, marker, and infowindow once widget is loaded. + placeDetails.style.visibility = 'visible'; + placeDetails.addEventListener('gmp-load', (event) => { + console.log("placeDetails initialized!"); + updateMapAndMarker(); + }); + // Add an event listener to handle clicks. + gMap.addListener("click", async (event) => { + marker.position = null; + event.stop(); + // Fire when the user clicks on a POI. + if (event.placeId) { + console.log("clicked on POI"); + console.log(event.placeId); + placeDetailsRequest.place = event.placeId; + updateMapAndMarker(); + } + else { + // Fire when the user clicks the map (not on a POI). + console.log('No place was selected.'); + }; + }); + // Function to update map, marker, and infowindow based on place details + const updateMapAndMarker = () => { + console.log("function called"); + if (placeDetails.place && placeDetails.place.location) { + gMap.panTo(placeDetails.place.location); + gMap.setZoom(16); // Set zoom after panning if needed + marker.position = placeDetails.place.location; + marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + marker.style.display = 'block'; + //@ts-ignore + infowindow.setOptions({ + content: placeDetails + }); + //@ts-ignore + infowindow.open({ + anchor: marker, + map: gMap, + }); + } + }; } initMap(); /* [END maps_ui_kit_place_details_compact] */ diff --git a/dist/samples/ui-kit-place-details-compact/docs/style.css b/dist/samples/ui-kit-place-details-compact/docs/style.css index 5bc57c860..9f0a93cd3 100644 --- a/dist/samples/ui-kit-place-details-compact/docs/style.css +++ b/dist/samples/ui-kit-place-details-compact/docs/style.css @@ -4,18 +4,22 @@ * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_ui_kit_place_details_compact] */ -/* - * Optional: Makes the sample page fill the window. - */ +html, body { display: flex; width: 100%; height: 100%; + margin: 0; +} + +h1 { + font-size: 16px; + text-align: center; } -gmp-map { - height: 600px; - pointer-events: none; +#map-container { + box-sizing: border-box; + width: 100%; } /* [START maps_ui_kit_place_details_compact_style] */ gmp-place-details-compact { @@ -25,16 +29,50 @@ gmp-place-details-compact { /* Sets the background color of the surface */ /* Adapts automatically to the user's system light/dark mode preference */ --gmp-mat-color-surface: light-dark(white, black); - /* Defines the primary font stack used within the component */ --gmp-mat-font-family: Google Sans Text, sans-serif; /* Defines the style for medium body text (e.g., address, descriptions) */ --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text'); - + width: 360px; - margin-top: 100px; + border: none; overflow-y: hidden; } -/* [END maps_ui_kit_place_details_compact_style] */ +.gm-style-iw button { + display: none !important; +} + +.gm-style-iw-c { + padding: 0 !important; + margin: 0 !important; +} + +.gm-style-iw-d { + padding: 0 !important; + margin: 0 !important; /* Sometimes margin can also contribute to unwanted space */ + overflow: visible !important; /* If you don't want scrollbars, but be careful with content overflow */ +} + +.gm-style-iw-c * { /* Target all elements inside the infowindow content container */ + padding: 0 !important; + margin: 0 !important; +} + +@media (prefers-color-scheme: dark) { + + .gm-style-iw.gm-style-iw-c, + .gm-style .gm-style-iw-d, + .gm-style .gm-style-iw-d::-webkit-scrollbar-track, + .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece, + .gm-style .gm-style-iw-c, + .gm-style .gm-style-iw-t::after, + .gm-style .gm-style-iw-tc::after { + background-color: #000 !important; + } + .gm-ui-hover-effect>span { + background-color: #fff !important; + } +} +/* [END maps_ui_kit_place_details_compact_style] */ /* [END maps_ui_kit_place_details_compact] */ diff --git a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.css b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.css index 76b0418bc..1cf6f20f4 100644 --- a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.css +++ b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.css @@ -4,18 +4,22 @@ * SPDX-License-Identifier: Apache-2.0 */ -/* - * Optional: Makes the sample page fill the window. - */ +html, body { display: flex; width: 100%; height: 100%; + margin: 0; +} + +h1 { + font-size: 16px; + text-align: center; } -gmp-map { - height: 600px; - pointer-events: none; +#map-container { + box-sizing: border-box; + width: 100%; } gmp-place-details-compact { @@ -25,16 +29,50 @@ gmp-place-details-compact { /* Sets the background color of the surface */ /* Adapts automatically to the user's system light/dark mode preference */ --gmp-mat-color-surface: light-dark(white, black); - /* Defines the primary font stack used within the component */ --gmp-mat-font-family: Google Sans Text, sans-serif; /* Defines the style for medium body text (e.g., address, descriptions) */ --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text'); - + width: 360px; - margin-top: 100px; + border: none; overflow-y: hidden; } +.gm-style-iw button { + display: none !important; +} + +.gm-style-iw-c { + padding: 0 !important; + margin: 0 !important; +} + +.gm-style-iw-d { + padding: 0 !important; + margin: 0 !important; /* Sometimes margin can also contribute to unwanted space */ + overflow: visible !important; /* If you don't want scrollbars, but be careful with content overflow */ +} + +.gm-style-iw-c * { /* Target all elements inside the infowindow content container */ + padding: 0 !important; + margin: 0 !important; +} + +@media (prefers-color-scheme: dark) { + + .gm-style-iw.gm-style-iw-c, + .gm-style .gm-style-iw-d, + .gm-style .gm-style-iw-d::-webkit-scrollbar-track, + .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece, + .gm-style .gm-style-iw-c, + .gm-style .gm-style-iw-t::after, + .gm-style .gm-style-iw-tc::after { + background-color: #000 !important; + } + .gm-ui-hover-effect>span { + background-color: #fff !important; + } +} diff --git a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.html b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.html index 1cd9edd64..0da5a58dd 100644 --- a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.html +++ b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.html @@ -13,29 +13,24 @@ - - - - - - - - - - - - - - - - - - - - - - + +
+ + + + + + + + +
+ + diff --git a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.js b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.js index 388a0ccfa..3ea2d5e68 100644 --- a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.js +++ b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.js @@ -6,20 +6,65 @@ */ /* [START maps_ui_kit_place_details_compact] */ // Use querySelector to select elements for interaction. -const map = document.querySelector('gmp-map'); -//@ts-ignore -const marker = document.querySelector('gmp-advanced-marker'); +const mapContainer = document.getElementById("map-container"); +const detailsContainer = document.getElementById("details-container"); +const placeDetails = document.querySelector("gmp-place-details-compact"); +const placeDetailsRequest = document.querySelector("gmp-place-details-place-request"); +let gMap; +let infowindow; +let marker; async function initMap() { - // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps"); + const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places"); + const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - await google.maps.importLibrary("places"); + gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' }); + marker = new AdvancedMarkerElement({ map: gMap }); + infowindow = new InfoWindow({}); // Hide the map type control. - map.innerMap.setOptions({ mapTypeControl: false }); - // Set marker collision behavior. - marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; - // Add marker to place location. - marker.position = { lat: 47.75972, lng: -122.25094 }; + gMap.setOptions({ mapTypeControl: false }); + // Set up map, marker, and infowindow once widget is loaded. + placeDetails.style.visibility = 'visible'; + placeDetails.addEventListener('gmp-load', (event) => { + console.log("placeDetails initialized!"); + updateMapAndMarker(); + }); + // Add an event listener to handle clicks. + gMap.addListener("click", async (event) => { + marker.position = null; + event.stop(); + // Fire when the user clicks on a POI. + if (event.placeId) { + console.log("clicked on POI"); + console.log(event.placeId); + placeDetailsRequest.place = event.placeId; + updateMapAndMarker(); + } + else { + // Fire when the user clicks the map (not on a POI). + console.log('No place was selected.'); + } + ; + }); + // Function to update map, marker, and infowindow based on place details + const updateMapAndMarker = () => { + console.log("function called"); + if (placeDetails.place && placeDetails.place.location) { + gMap.panTo(placeDetails.place.location); + gMap.setZoom(16); // Set zoom after panning if needed + marker.position = placeDetails.place.location; + marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL; + marker.style.display = 'block'; + //@ts-ignore + infowindow.setOptions({ + content: placeDetails + }); + //@ts-ignore + infowindow.open({ + anchor: marker, + map: gMap, + }); + } + }; } initMap(); /* [END maps_ui_kit_place_details_compact] */