diff --git a/dist/samples/place-class/app/index.html b/dist/samples/place-class/app/index.html index ec840061..7cbd0c58 100644 --- a/dist/samples/place-class/app/index.html +++ b/dist/samples/place-class/app/index.html @@ -11,13 +11,13 @@ - - -
- + + + + diff --git a/dist/samples/place-class/app/index.ts b/dist/samples/place-class/app/index.ts index 6b0c8d8b..760b606b 100644 --- a/dist/samples/place-class/app/index.ts +++ b/dist/samples/place-class/app/index.ts @@ -5,20 +5,15 @@ */ // [START maps_place_class] -let map: google.maps.Map; -let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; +let infoWindow; async function initMap() { - const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; - - map = new Map(document.getElementById('map') as HTMLElement, { - center: centerCoordinates, - zoom: 14, - // [START_EXCLUDE] - mapId: '4504f8b37365c3d0', - // [END_EXCLUDE] - }); + const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + innerMap = mapElement.innerMap; + infoWindow = new InfoWindow(); getPlaceDetails(); } @@ -28,25 +23,43 @@ async function getPlaceDetails() { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // Use place ID to create a new Place instance. const place = new Place({ - id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', - requestedLanguage: 'en', // optional + id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. - await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); - - // Log the result - console.log(place.displayName); - console.log(place.formattedAddress); + await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location', 'googleMapsURI'] }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ - map, + map: innerMap, position: place.location, title: place.displayName, }); + + // Assemble the info window content. + const content = document.createElement('div'); + const address = document.createElement('div'); + const placeId = document.createElement('div'); + address.textContent = place.formattedAddress || ''; + placeId.textContent = place.id; + content.append(placeId, address); + + if (place.googleMapsURI) { + const link = document.createElement('a'); + link.href = place.googleMapsURI; + link.target = '_blank'; + link.textContent = 'View Details on Google Maps'; + content.appendChild(link); + } + + // Display an info window. + infoWindow.setHeaderContent(place.displayName); + infoWindow.setContent(content); + infoWindow.open({ + anchor: marker, + }); } // [END maps_place_class_fetchfields] initMap(); -// [END maps_place_class] \ No newline at end of file +// [END maps_place_class] diff --git a/dist/samples/place-class/dist/assets/index-CKDVXzRh.js b/dist/samples/place-class/dist/assets/index-CKDVXzRh.js new file mode 100644 index 00000000..143c5b6a --- /dev/null +++ b/dist/samples/place-class/dist/assets/index-CKDVXzRh.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"]'))a(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const r of t.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&a(r)}).observe(document,{childList:!0,subtree:!0});function o(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 a(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();/** + * @license + * Copyright 2022 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const d=document.querySelector("gmp-map");let l,s;async function p(){const{Map:c,InfoWindow:n}=await google.maps.importLibrary("maps");l=d.innerMap,s=new n,m()}async function m(){const{Place:c}=await google.maps.importLibrary("places"),{AdvancedMarkerElement:n}=await google.maps.importLibrary("marker"),o=new c({id:"ChIJyYB_SZVU2YARR-I1Jjf08F0"});await o.fetchFields({fields:["displayName","formattedAddress","location","googleMapsURI"]});const a=new n({map:l,position:o.location,title:o.displayName}),e=document.createElement("div"),t=document.createElement("div"),r=document.createElement("div");if(t.textContent=o.formattedAddress||"",r.textContent=o.id,e.append(r,t),o.googleMapsURI){const i=document.createElement("a");i.href=o.googleMapsURI,i.target="_blank",i.textContent="View Details on Google Maps",e.appendChild(i)}s.setHeaderContent(o.displayName),s.setContent(e),s.open({anchor:a})}p(); diff --git a/dist/samples/place-class/dist/assets/index-CLgMNE7p.js b/dist/samples/place-class/dist/assets/index-CLgMNE7p.js deleted file mode 100644 index 8dc215fc..00000000 --- a/dist/samples/place-class/dist/assets/index-CLgMNE7p.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"]'))s(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const n of t.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&s(n)}).observe(document,{childList:!0,subtree:!0});function o(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 s(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();/** - * @license - * Copyright 2022 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */let a,c={lat:37.4161493,lng:-122.0812166};async function l(){const{Map:i}=await google.maps.importLibrary("maps");a=new i(document.getElementById("map"),{center:c,zoom:14,mapId:"4504f8b37365c3d0"}),d()}async function d(){const{Place:i}=await google.maps.importLibrary("places"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker"),o=new i({id:"ChIJN5Nz71W3j4ARhx5bwpTQEGg",requestedLanguage:"en"});await o.fetchFields({fields:["displayName","formattedAddress","location"]}),console.log(o.displayName),console.log(o.formattedAddress),new r({map:a,position:o.location,title:o.displayName})}l(); diff --git a/dist/samples/place-class/dist/index.html b/dist/samples/place-class/dist/index.html index f4d51932..858493a0 100644 --- a/dist/samples/place-class/dist/index.html +++ b/dist/samples/place-class/dist/index.html @@ -9,15 +9,15 @@ Place Class - - - - -
- + + + + + + diff --git a/dist/samples/place-class/docs/index.html b/dist/samples/place-class/docs/index.html index ec840061..7cbd0c58 100644 --- a/dist/samples/place-class/docs/index.html +++ b/dist/samples/place-class/docs/index.html @@ -11,13 +11,13 @@ - - -
- + + + + diff --git a/dist/samples/place-class/docs/index.js b/dist/samples/place-class/docs/index.js index bfecdd73..e811072e 100644 --- a/dist/samples/place-class/docs/index.js +++ b/dist/samples/place-class/docs/index.js @@ -5,17 +5,13 @@ * SPDX-License-Identifier: Apache-2.0 */ // [START maps_place_class] -let map; -let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; +const mapElement = document.querySelector('gmp-map'); +let innerMap; +let infoWindow; async function initMap() { - const { Map } = await google.maps.importLibrary("maps"); - map = new Map(document.getElementById('map'), { - center: centerCoordinates, - zoom: 14, - // [START_EXCLUDE] - mapId: '4504f8b37365c3d0', - // [END_EXCLUDE] - }); + const { Map, InfoWindow } = await google.maps.importLibrary("maps"); + innerMap = mapElement.innerMap; + infoWindow = new InfoWindow(); getPlaceDetails(); } // [START maps_place_class_fetchfields] @@ -24,20 +20,36 @@ async function getPlaceDetails() { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Use place ID to create a new Place instance. const place = new Place({ - id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', - requestedLanguage: 'en', // optional + id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. - await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); - // Log the result - console.log(place.displayName); - console.log(place.formattedAddress); + await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location', 'googleMapsURI'] }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ - map, + map: innerMap, position: place.location, title: place.displayName, }); + // Assemble the info window content. + const content = document.createElement('div'); + const address = document.createElement('div'); + const placeId = document.createElement('div'); + address.textContent = place.formattedAddress || ''; + placeId.textContent = place.id; + content.append(placeId, address); + if (place.googleMapsURI) { + const link = document.createElement('a'); + link.href = place.googleMapsURI; + link.target = '_blank'; + link.textContent = 'View Details on Google Maps'; + content.appendChild(link); + } + // Display an info window. + infoWindow.setHeaderContent(place.displayName); + infoWindow.setContent(content); + infoWindow.open({ + anchor: marker, + }); } // [END maps_place_class_fetchfields] initMap(); diff --git a/dist/samples/place-class/docs/index.ts b/dist/samples/place-class/docs/index.ts index 6b0c8d8b..760b606b 100644 --- a/dist/samples/place-class/docs/index.ts +++ b/dist/samples/place-class/docs/index.ts @@ -5,20 +5,15 @@ */ // [START maps_place_class] -let map: google.maps.Map; -let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; +let infoWindow; async function initMap() { - const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; - - map = new Map(document.getElementById('map') as HTMLElement, { - center: centerCoordinates, - zoom: 14, - // [START_EXCLUDE] - mapId: '4504f8b37365c3d0', - // [END_EXCLUDE] - }); + const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + innerMap = mapElement.innerMap; + infoWindow = new InfoWindow(); getPlaceDetails(); } @@ -28,25 +23,43 @@ async function getPlaceDetails() { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // Use place ID to create a new Place instance. const place = new Place({ - id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', - requestedLanguage: 'en', // optional + id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. - await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); - - // Log the result - console.log(place.displayName); - console.log(place.formattedAddress); + await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location', 'googleMapsURI'] }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ - map, + map: innerMap, position: place.location, title: place.displayName, }); + + // Assemble the info window content. + const content = document.createElement('div'); + const address = document.createElement('div'); + const placeId = document.createElement('div'); + address.textContent = place.formattedAddress || ''; + placeId.textContent = place.id; + content.append(placeId, address); + + if (place.googleMapsURI) { + const link = document.createElement('a'); + link.href = place.googleMapsURI; + link.target = '_blank'; + link.textContent = 'View Details on Google Maps'; + content.appendChild(link); + } + + // Display an info window. + infoWindow.setHeaderContent(place.displayName); + infoWindow.setContent(content); + infoWindow.open({ + anchor: marker, + }); } // [END maps_place_class_fetchfields] initMap(); -// [END maps_place_class] \ No newline at end of file +// [END maps_place_class] diff --git a/dist/samples/place-class/jsfiddle/demo.html b/dist/samples/place-class/jsfiddle/demo.html index 33a3a2d6..a001feef 100644 --- a/dist/samples/place-class/jsfiddle/demo.html +++ b/dist/samples/place-class/jsfiddle/demo.html @@ -11,13 +11,13 @@ - - -
- + + + + diff --git a/dist/samples/place-class/jsfiddle/demo.js b/dist/samples/place-class/jsfiddle/demo.js index a891ba74..8a6e4e3a 100644 --- a/dist/samples/place-class/jsfiddle/demo.js +++ b/dist/samples/place-class/jsfiddle/demo.js @@ -5,17 +5,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -let map; -let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; +const mapElement = document.querySelector('gmp-map'); +let innerMap; +let infoWindow; async function initMap() { - const { Map } = await google.maps.importLibrary("maps"); - map = new Map(document.getElementById('map'), { - center: centerCoordinates, - zoom: 14, - - mapId: '4504f8b37365c3d0', - - }); + const { Map, InfoWindow } = await google.maps.importLibrary("maps"); + innerMap = mapElement.innerMap; + infoWindow = new InfoWindow(); getPlaceDetails(); } @@ -24,20 +20,36 @@ async function getPlaceDetails() { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Use place ID to create a new Place instance. const place = new Place({ - id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', - requestedLanguage: 'en', // optional + id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. - await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); - // Log the result - console.log(place.displayName); - console.log(place.formattedAddress); + await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location', 'googleMapsURI'] }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ - map, + map: innerMap, position: place.location, title: place.displayName, }); + // Assemble the info window content. + const content = document.createElement('div'); + const address = document.createElement('div'); + const placeId = document.createElement('div'); + address.textContent = place.formattedAddress || ''; + placeId.textContent = place.id; + content.append(placeId, address); + if (place.googleMapsURI) { + const link = document.createElement('a'); + link.href = place.googleMapsURI; + link.target = '_blank'; + link.textContent = 'View Details on Google Maps'; + content.appendChild(link); + } + // Display an info window. + infoWindow.setHeaderContent(place.displayName); + infoWindow.setContent(content); + infoWindow.open({ + anchor: marker, + }); } initMap(); diff --git a/package-lock.json b/package-lock.json index c4643fed..743dd6de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,8 +21,6 @@ "@playwright/test": "^1.55.0", "@types/google.maps": "^3.58.1", "@types/node": "^24.3.1", - "eslint": "^9.35.0", - "@types/node": "^24.3.1", "eslint": "^9.34.0", "globals": "^16.3.0", "rimraf": "^6.0.1", @@ -2968,19 +2966,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/eslint/node_modules/@eslint/js": { - "version": "9.34.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.34.0.tgz", - "integrity": "sha512-EoyvqQnBNsV1CWaEJ559rxXL4c8V92gxirbawSmVUOWXlsRxxQXl6LmCpdUblgxgSkDIqKnhzba2SjRTI/A5Rw==", - "dev": true, - "license": "MIT", - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "url": "https://eslint.org/donate" - } - }, "node_modules/eslint/node_modules/brace-expansion": { "version": "1.1.12", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", @@ -5878,11 +5863,11 @@ "version": "1.0.0", "dependencies": { "@googlemaps/js-api-loader": "^1.16.8", - "terra-draw": "*", - "terra-draw-google-maps-adapter": "*" + "terra-draw": "latest", + "terra-draw-google-maps-adapter": "latest" }, "devDependencies": { - "@types/google.maps": "*", + "@types/google.maps": "latest", "typescript": "^5.9.2", "vite": "^7.1.4" } @@ -6508,7 +6493,7 @@ "name": "@js-api-samples/react-ui-kit-place-details-by-latlng-compact", "version": "1.0.0", "dependencies": { - "@vis.gl/react-google-maps": "*", + "@vis.gl/react-google-maps": "latest", "react": "^19.0.0", "react-dom": "^19.0.0" }, @@ -6898,19 +6883,6 @@ "csstype": "^3.0.2" } }, - "samples/react-ui-kit-place-details-latlng-compact/node_modules/@vis.gl/react-google-maps": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@vis.gl/react-google-maps/-/react-google-maps-0.7.1.tgz", - "integrity": "sha512-KrvSfZ9k9RBrUKCVACTNh96jzzIKumPSymNTd1uNlvLWYVcDaliE6/PF/jBFYVB2n/K5BvDspTF9CLJ3rgx5VQ==", - "dependencies": { - "@types/google.maps": "^3.54.10", - "fast-deep-equal": "^3.1.3" - }, - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, "samples/react-ui-kit-place-details-latlng-compact/node_modules/esbuild": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",