diff --git a/dist/samples/ui-kit-place-details/app/index.html b/dist/samples/ui-kit-place-details/app/index.html index 63ff9d54..a26a342f 100644 --- a/dist/samples/ui-kit-place-details/app/index.html +++ b/dist/samples/ui-kit-place-details/app/index.html @@ -14,10 +14,10 @@ - - + +
+ +
diff --git a/dist/samples/ui-kit-place-details/app/index.ts b/dist/samples/ui-kit-place-details/app/index.ts index 4d7539a9..b1add48d 100644 --- a/dist/samples/ui-kit-place-details/app/index.ts +++ b/dist/samples/ui-kit-place-details/app/index.ts @@ -11,25 +11,35 @@ const placeDetails = document.querySelector('gmp-place-details') as any; const marker = document.querySelector('gmp-advanced-marker') as any; /* [END maps_ui_kit_place_details_query_selector] */ -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; - const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; +let center = { lat: 47.759737, lng: -122.250632 }; - // Calls the geolocation helper function to center the map on the current - // device location. - findCurrentLocation(); +async function initMap(): Promise { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Hide the map type control. map.innerMap.setOptions({mapTypeControl: false}); + // Set the default selection. + const place = new Place({ + id: "ChIJC8HakaIRkFQRiOgkgdHmqkk", + requestedLanguage: "en", // optional + }); + await placeDetails.configureFromPlace(place); + let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005); + map.innerMap.panTo(adjustedCenter); + map.innerMap.setZoom(16); + + marker.position = placeDetails.place.location; + marker.style.display = 'block'; + /* [START maps_ui_kit_place_details_event] */ // Add an event listener to handle map clicks. map.innerMap.addListener('click', async (event) => { marker.position = null; event.stop(); - placeDetails.style.visibility = 'visible'; if (event.placeId) { // Fire when the user clicks a POI. await placeDetails.configureFromPlace({id: event.placeId}); @@ -37,34 +47,22 @@ async function initMap(): Promise { // Fire when the user clicks the map (not on a POI). await placeDetails.configureFromLocation(event.latLng); } + // Get the offset center. + let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005); + // Show the marker at the selected place. marker.position = placeDetails.place.location; marker.style.display = 'block'; + map.innerMap.panTo(adjustedCenter); }); } -/* [END maps_ui_kit_place_details_event] */ -// Helper function for geolocation. -async function findCurrentLocation() { - const { LatLng } = await google.maps.importLibrary('core') as google.maps.CoreLibrary; - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition( - (position) => { - const pos = - new LatLng(position.coords.latitude, position.coords.longitude); - map.innerMap.panTo(pos); - map.innerMap.setZoom(16); - }, - () => { - console.log('The Geolocation service failed.'); - map.innerMap.setZoom(16); - }, - ); - } else { - console.log('Your browser doesn\'t support geolocation'); - map.innerMap.setZoom(16); - } +// Helper function to offset the map center. +function offsetLatLngRight(latLng, longitudeOffset) { + const newLng = latLng.lng() + longitudeOffset; + return new google.maps.LatLng(latLng.lat(), newLng); } +/* [END maps_ui_kit_place_details_event] */ declare global { interface Window { diff --git a/dist/samples/ui-kit-place-details/app/style.css b/dist/samples/ui-kit-place-details/app/style.css index 4a7fca83..042e97ae 100644 --- a/dist/samples/ui-kit-place-details/app/style.css +++ b/dist/samples/ui-kit-place-details/app/style.css @@ -12,6 +12,7 @@ body { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; + display: block; } h1 { @@ -20,18 +21,27 @@ h1 { } gmp-map { - height: 800px; + height: 400px; } gmp-place-details { - visibility: hidden; background-color: #fff; border-radius: 8px; margin: 20px; width: 400px; + padding: 12px; + margin-top: 10px; + overflow-y: auto; } gmp-advanced-marker { display: none; } + +.widget-container { + height: 400px; + width: 457px; + overflow-y: auto; + overflow-x: hidden; +} /* [END maps_ui_kit_place_details] */ \ No newline at end of file diff --git a/dist/samples/ui-kit-place-details/dist/assets/index-B8_Ypk3a.js b/dist/samples/ui-kit-place-details/dist/assets/index-B8_Ypk3a.js deleted file mode 100644 index 4bd17029..00000000 --- a/dist/samples/ui-kit-place-details/dist/assets/index-B8_Ypk3a.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))l(e);new MutationObserver(e=>{for(const o of e)if(o.type==="childList")for(const s of o.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&l(s)}).observe(document,{childList:!0,subtree:!0});function a(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 l(e){if(e.ep)return;e.ep=!0;const o=a(e);fetch(e.href,o)}})();/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */const i=document.querySelector("gmp-map"),n=document.querySelector("gmp-place-details"),c=document.querySelector("gmp-advanced-marker");async function p(){await google.maps.importLibrary("maps"),await google.maps.importLibrary("marker"),await google.maps.importLibrary("places"),u(),i.innerMap.setOptions({mapTypeControl:!1}),i.innerMap.addListener("click",async t=>{c.position=null,t.stop(),n.style.visibility="visible",t.placeId?await n.configureFromPlace({id:t.placeId}):await n.configureFromLocation(t.latLng),c.position=n.place.location,c.style.display="block"})}async function u(){const{LatLng:t}=await google.maps.importLibrary("core");navigator.geolocation?navigator.geolocation.getCurrentPosition(r=>{const a=new t(r.coords.latitude,r.coords.longitude);i.innerMap.panTo(a),i.innerMap.setZoom(16)},()=>{console.log("The Geolocation service failed."),i.innerMap.setZoom(16)}):(console.log("Your browser doesn't support geolocation"),i.innerMap.setZoom(16))}window.initMap=p; diff --git a/dist/samples/ui-kit-place-details/dist/assets/index-CadsbSRj.js b/dist/samples/ui-kit-place-details/dist/assets/index-CadsbSRj.js new file mode 100644 index 00000000..859c0ce7 --- /dev/null +++ b/dist/samples/ui-kit-place-details/dist/assets/index-CadsbSRj.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"]'))r(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const l of t.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&r(l)}).observe(document,{childList:!0,subtree:!0});function i(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 r(e){if(e.ep)return;e.ep=!0;const t=i(e);fetch(e.href,t)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const c=document.querySelector("gmp-map"),a=document.querySelector("gmp-place-details"),s=document.querySelector("gmp-advanced-marker");async function d(){await google.maps.importLibrary("maps"),await google.maps.importLibrary("marker");const{Place:n}=await google.maps.importLibrary("places");c.innerMap.setOptions({mapTypeControl:!1});const o=new n({id:"ChIJC8HakaIRkFQRiOgkgdHmqkk",requestedLanguage:"en"});await a.configureFromPlace(o);let i=p(a.place.location,-.005);c.innerMap.panTo(i),c.innerMap.setZoom(16),s.position=a.place.location,s.style.display="block",c.innerMap.addListener("click",async r=>{s.position=null,r.stop(),r.placeId?await a.configureFromPlace({id:r.placeId}):await a.configureFromLocation(r.latLng);let e=p(a.place.location,-.005);s.position=a.place.location,s.style.display="block",c.innerMap.panTo(e)})}function p(n,o){const i=n.lng()+o;return new google.maps.LatLng(n.lat(),i)}window.initMap=d; diff --git a/dist/samples/ui-kit-place-details/dist/assets/index-DAWyXXsz.css b/dist/samples/ui-kit-place-details/dist/assets/index-DAWyXXsz.css new file mode 100644 index 00000000..522775d4 --- /dev/null +++ b/dist/samples/ui-kit-place-details/dist/assets/index-DAWyXXsz.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;font-family:Arial,Helvetica,sans-serif;display:block}h1{font-size:16px;text-align:center}gmp-map{height:400px}gmp-place-details{background-color:#fff;border-radius:8px;margin:10px 20px 20px;width:400px;padding:12px;overflow-y:auto}gmp-advanced-marker{display:none}.widget-container{height:400px;width:457px;overflow-y:auto;overflow-x:hidden} diff --git a/dist/samples/ui-kit-place-details/dist/assets/index-f2zskmln.css b/dist/samples/ui-kit-place-details/dist/assets/index-f2zskmln.css deleted file mode 100644 index 49527b8b..00000000 --- a/dist/samples/ui-kit-place-details/dist/assets/index-f2zskmln.css +++ /dev/null @@ -1,5 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif}h1{font-size:16px;text-align:center}gmp-map{height:800px}gmp-place-details{visibility:hidden;background-color:#fff;border-radius:8px;margin:20px;width:400px}gmp-advanced-marker{display:none} diff --git a/dist/samples/ui-kit-place-details/dist/index.html b/dist/samples/ui-kit-place-details/dist/index.html index ad3fdafd..14358dc5 100644 --- a/dist/samples/ui-kit-place-details/dist/index.html +++ b/dist/samples/ui-kit-place-details/dist/index.html @@ -9,15 +9,15 @@ Click on the map to view place details - - + + - - + +
+ +
diff --git a/dist/samples/ui-kit-place-details/docs/index.html b/dist/samples/ui-kit-place-details/docs/index.html index 63ff9d54..a26a342f 100644 --- a/dist/samples/ui-kit-place-details/docs/index.html +++ b/dist/samples/ui-kit-place-details/docs/index.html @@ -14,10 +14,10 @@ - - + +
+ +
diff --git a/dist/samples/ui-kit-place-details/docs/index.js b/dist/samples/ui-kit-place-details/docs/index.js index 5d800b5c..eab563d3 100644 --- a/dist/samples/ui-kit-place-details/docs/index.js +++ b/dist/samples/ui-kit-place-details/docs/index.js @@ -10,22 +10,30 @@ const map = document.querySelector('gmp-map'); const placeDetails = document.querySelector('gmp-place-details'); const marker = document.querySelector('gmp-advanced-marker'); /* [END maps_ui_kit_place_details_query_selector] */ +let center = { lat: 47.759737, lng: -122.250632 }; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); const { Place } = await google.maps.importLibrary("places"); - // Calls the geolocation helper function to center the map on the current - // device location. - findCurrentLocation(); // Hide the map type control. map.innerMap.setOptions({ mapTypeControl: false }); + // Set the default selection. + const place = new Place({ + id: "ChIJC8HakaIRkFQRiOgkgdHmqkk", + requestedLanguage: "en", // optional + }); + await placeDetails.configureFromPlace(place); + let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005); + map.innerMap.panTo(adjustedCenter); + map.innerMap.setZoom(16); + marker.position = placeDetails.place.location; + marker.style.display = 'block'; /* [START maps_ui_kit_place_details_event] */ // Add an event listener to handle map clicks. map.innerMap.addListener('click', async (event) => { marker.position = null; event.stop(); - placeDetails.style.visibility = 'visible'; if (event.placeId) { // Fire when the user clicks a POI. await placeDetails.configureFromPlace({ id: event.placeId }); @@ -34,29 +42,18 @@ async function initMap() { // Fire when the user clicks the map (not on a POI). await placeDetails.configureFromLocation(event.latLng); } + // Get the offset center. + let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005); // Show the marker at the selected place. marker.position = placeDetails.place.location; marker.style.display = 'block'; + map.innerMap.panTo(adjustedCenter); }); } -/* [END maps_ui_kit_place_details_event] */ -// Helper function for geolocation. -async function findCurrentLocation() { - const { LatLng } = await google.maps.importLibrary('core'); - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition((position) => { - const pos = new LatLng(position.coords.latitude, position.coords.longitude); - map.innerMap.panTo(pos); - map.innerMap.setZoom(16); - }, () => { - console.log('The Geolocation service failed.'); - map.innerMap.setZoom(16); - }); - } - else { - console.log('Your browser doesn\'t support geolocation'); - map.innerMap.setZoom(16); - } +// 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; export {}; diff --git a/dist/samples/ui-kit-place-details/docs/index.ts b/dist/samples/ui-kit-place-details/docs/index.ts index 4d7539a9..b1add48d 100644 --- a/dist/samples/ui-kit-place-details/docs/index.ts +++ b/dist/samples/ui-kit-place-details/docs/index.ts @@ -11,25 +11,35 @@ const placeDetails = document.querySelector('gmp-place-details') as any; const marker = document.querySelector('gmp-advanced-marker') as any; /* [END maps_ui_kit_place_details_query_selector] */ -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; - const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; +let center = { lat: 47.759737, lng: -122.250632 }; - // Calls the geolocation helper function to center the map on the current - // device location. - findCurrentLocation(); +async function initMap(): Promise { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Hide the map type control. map.innerMap.setOptions({mapTypeControl: false}); + // Set the default selection. + const place = new Place({ + id: "ChIJC8HakaIRkFQRiOgkgdHmqkk", + requestedLanguage: "en", // optional + }); + await placeDetails.configureFromPlace(place); + let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005); + map.innerMap.panTo(adjustedCenter); + map.innerMap.setZoom(16); + + marker.position = placeDetails.place.location; + marker.style.display = 'block'; + /* [START maps_ui_kit_place_details_event] */ // Add an event listener to handle map clicks. map.innerMap.addListener('click', async (event) => { marker.position = null; event.stop(); - placeDetails.style.visibility = 'visible'; if (event.placeId) { // Fire when the user clicks a POI. await placeDetails.configureFromPlace({id: event.placeId}); @@ -37,34 +47,22 @@ async function initMap(): Promise { // Fire when the user clicks the map (not on a POI). await placeDetails.configureFromLocation(event.latLng); } + // Get the offset center. + let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005); + // Show the marker at the selected place. marker.position = placeDetails.place.location; marker.style.display = 'block'; + map.innerMap.panTo(adjustedCenter); }); } -/* [END maps_ui_kit_place_details_event] */ -// Helper function for geolocation. -async function findCurrentLocation() { - const { LatLng } = await google.maps.importLibrary('core') as google.maps.CoreLibrary; - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition( - (position) => { - const pos = - new LatLng(position.coords.latitude, position.coords.longitude); - map.innerMap.panTo(pos); - map.innerMap.setZoom(16); - }, - () => { - console.log('The Geolocation service failed.'); - map.innerMap.setZoom(16); - }, - ); - } else { - console.log('Your browser doesn\'t support geolocation'); - map.innerMap.setZoom(16); - } +// Helper function to offset the map center. +function offsetLatLngRight(latLng, longitudeOffset) { + const newLng = latLng.lng() + longitudeOffset; + return new google.maps.LatLng(latLng.lat(), newLng); } +/* [END maps_ui_kit_place_details_event] */ declare global { interface Window { diff --git a/dist/samples/ui-kit-place-details/docs/style.css b/dist/samples/ui-kit-place-details/docs/style.css index 4a7fca83..042e97ae 100644 --- a/dist/samples/ui-kit-place-details/docs/style.css +++ b/dist/samples/ui-kit-place-details/docs/style.css @@ -12,6 +12,7 @@ body { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; + display: block; } h1 { @@ -20,18 +21,27 @@ h1 { } gmp-map { - height: 800px; + height: 400px; } gmp-place-details { - visibility: hidden; background-color: #fff; border-radius: 8px; margin: 20px; width: 400px; + padding: 12px; + margin-top: 10px; + overflow-y: auto; } gmp-advanced-marker { display: none; } + +.widget-container { + height: 400px; + width: 457px; + overflow-y: auto; + overflow-x: hidden; +} /* [END maps_ui_kit_place_details] */ \ No newline at end of file diff --git a/dist/samples/ui-kit-place-details/jsfiddle/demo.css b/dist/samples/ui-kit-place-details/jsfiddle/demo.css index 7da290b2..59a6441f 100644 --- a/dist/samples/ui-kit-place-details/jsfiddle/demo.css +++ b/dist/samples/ui-kit-place-details/jsfiddle/demo.css @@ -12,6 +12,7 @@ body { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; + display: block; } h1 { @@ -20,17 +21,26 @@ h1 { } gmp-map { - height: 800px; + height: 400px; } gmp-place-details { - visibility: hidden; background-color: #fff; border-radius: 8px; margin: 20px; width: 400px; + padding: 12px; + margin-top: 10px; + overflow-y: auto; } gmp-advanced-marker { display: none; } + +.widget-container { + height: 400px; + width: 457px; + overflow-y: auto; + overflow-x: hidden; +} diff --git a/dist/samples/ui-kit-place-details/jsfiddle/demo.html b/dist/samples/ui-kit-place-details/jsfiddle/demo.html index d935e581..0b15d946 100644 --- a/dist/samples/ui-kit-place-details/jsfiddle/demo.html +++ b/dist/samples/ui-kit-place-details/jsfiddle/demo.html @@ -14,10 +14,10 @@ - - + +
+ +
diff --git a/dist/samples/ui-kit-place-details/jsfiddle/demo.js b/dist/samples/ui-kit-place-details/jsfiddle/demo.js index 5d800b5c..eab563d3 100644 --- a/dist/samples/ui-kit-place-details/jsfiddle/demo.js +++ b/dist/samples/ui-kit-place-details/jsfiddle/demo.js @@ -10,22 +10,30 @@ const map = document.querySelector('gmp-map'); const placeDetails = document.querySelector('gmp-place-details'); const marker = document.querySelector('gmp-advanced-marker'); /* [END maps_ui_kit_place_details_query_selector] */ +let center = { lat: 47.759737, lng: -122.250632 }; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); const { Place } = await google.maps.importLibrary("places"); - // Calls the geolocation helper function to center the map on the current - // device location. - findCurrentLocation(); // Hide the map type control. map.innerMap.setOptions({ mapTypeControl: false }); + // Set the default selection. + const place = new Place({ + id: "ChIJC8HakaIRkFQRiOgkgdHmqkk", + requestedLanguage: "en", // optional + }); + await placeDetails.configureFromPlace(place); + let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005); + map.innerMap.panTo(adjustedCenter); + map.innerMap.setZoom(16); + marker.position = placeDetails.place.location; + marker.style.display = 'block'; /* [START maps_ui_kit_place_details_event] */ // Add an event listener to handle map clicks. map.innerMap.addListener('click', async (event) => { marker.position = null; event.stop(); - placeDetails.style.visibility = 'visible'; if (event.placeId) { // Fire when the user clicks a POI. await placeDetails.configureFromPlace({ id: event.placeId }); @@ -34,29 +42,18 @@ async function initMap() { // Fire when the user clicks the map (not on a POI). await placeDetails.configureFromLocation(event.latLng); } + // Get the offset center. + let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005); // Show the marker at the selected place. marker.position = placeDetails.place.location; marker.style.display = 'block'; + map.innerMap.panTo(adjustedCenter); }); } -/* [END maps_ui_kit_place_details_event] */ -// Helper function for geolocation. -async function findCurrentLocation() { - const { LatLng } = await google.maps.importLibrary('core'); - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition((position) => { - const pos = new LatLng(position.coords.latitude, position.coords.longitude); - map.innerMap.panTo(pos); - map.innerMap.setZoom(16); - }, () => { - console.log('The Geolocation service failed.'); - map.innerMap.setZoom(16); - }); - } - else { - console.log('Your browser doesn\'t support geolocation'); - map.innerMap.setZoom(16); - } +// 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; export {};