diff --git a/dist/index.html b/dist/index.html index a6fe8a9b..4c18ebe3 100644 --- a/dist/index.html +++ b/dist/index.html @@ -14,6 +14,8 @@

Maps JSAPI Samples

  • place-autocomplete-element
  • place-autocomplete-map
  • place-text-search
    • +
  • ui-kit-place-details
    • +
  • ui-kit-place-search
    • diff --git a/dist/samples/ui-kit-place-details/app/.eslintsrc.json b/dist/samples/ui-kit-place-details/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/ui-kit-place-details/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-details/app/README.md b/dist/samples/ui-kit-place-details/app/README.md new file mode 100644 index 00000000..62904810 --- /dev/null +++ b/dist/samples/ui-kit-place-details/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-details/app/index.html b/dist/samples/ui-kit-place-details/app/index.html new file mode 100644 index 00000000..1e4bac58 --- /dev/null +++ b/dist/samples/ui-kit-place-details/app/index.html @@ -0,0 +1,31 @@ + + + + + + Click on the map to view place details + + + + + +

    Click on the map to view place details

    + + + + + + + + + + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-details/app/index.ts b/dist/samples/ui-kit-place-details/app/index.ts new file mode 100644 index 00000000..4d7539a9 --- /dev/null +++ b/dist/samples/ui-kit-place-details/app/index.ts @@ -0,0 +1,76 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_details] */ +// Use querySelector to select elements for interaction. +/* [START maps_ui_kit_place_details_query_selector] */ +const map = document.querySelector('gmp-map') as any; +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; + + // 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}); + + /* [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}); + } else { + // Fire when the user clicks the map (not on a POI). + await placeDetails.configureFromLocation(event.latLng); + } + // Show the marker at the selected place. + marker.position = placeDetails.place.location; + marker.style.display = 'block'; + }); +} +/* [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); + } +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +/* [END maps_ui_kit_place_details] */ +export {}; \ No newline at end of file diff --git a/dist/samples/ui-kit-place-details/app/package.json b/dist/samples/ui-kit-place-details/app/package.json new file mode 100644 index 00000000..4aa81d59 --- /dev/null +++ b/dist/samples/ui-kit-place-details/app/package.json @@ -0,0 +1,15 @@ +{ + "name": "@js-api-samples/ui-kit-place-details", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh ui-kit-place-details && bash ../app.sh ui-kit-place-details && bash ../docs.sh ui-kit-place-details && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-details", + "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-details/app/style.css b/dist/samples/ui-kit-place-details/app/style.css new file mode 100644 index 00000000..95d6cc33 --- /dev/null +++ b/dist/samples/ui-kit-place-details/app/style.css @@ -0,0 +1,37 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_details] */ +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 16px; + text-align: center; +} + +gmp-map { + height: 400px; +} + +gmp-place-details { + visibility: hidden; + background-color: #fff; + border-radius: 8px; + margin: 20px; + width: 400px; +} + +gmp-advanced-marker { + display: none; +} +/* [END maps_ui_kit_place_details] */ \ No newline at end of file diff --git a/dist/samples/ui-kit-place-details/app/tsconfig.json b/dist/samples/ui-kit-place-details/app/tsconfig.json new file mode 100644 index 00000000..09179087 --- /dev/null +++ b/dist/samples/ui-kit-place-details/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-details/dist/assets/index-CsGydw2b.css b/dist/samples/ui-kit-place-details/dist/assets/index-CsGydw2b.css new file mode 100644 index 00000000..625011e9 --- /dev/null +++ b/dist/samples/ui-kit-place-details/dist/assets/index-CsGydw2b.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}h1{font-size:16px;text-align:center}gmp-map{height:400px}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/assets/index-ULyh_R-B.js b/dist/samples/ui-kit-place-details/dist/assets/index-ULyh_R-B.js new file mode 100644 index 00000000..4bd17029 --- /dev/null +++ b/dist/samples/ui-kit-place-details/dist/assets/index-ULyh_R-B.js @@ -0,0 +1,5 @@ +(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/index.html b/dist/samples/ui-kit-place-details/dist/index.html new file mode 100644 index 00000000..17b52ac5 --- /dev/null +++ b/dist/samples/ui-kit-place-details/dist/index.html @@ -0,0 +1,31 @@ + + + + + + Click on the map to view place details + + + + + +

    Click on the map to view place details

    + + + + + + + + + + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-details/docs/index.html b/dist/samples/ui-kit-place-details/docs/index.html new file mode 100644 index 00000000..1e4bac58 --- /dev/null +++ b/dist/samples/ui-kit-place-details/docs/index.html @@ -0,0 +1,31 @@ + + + + + + Click on the map to view place details + + + + + +

    Click on the map to view place details

    + + + + + + + + + + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-details/docs/index.js b/dist/samples/ui-kit-place-details/docs/index.js new file mode 100644 index 00000000..5d800b5c --- /dev/null +++ b/dist/samples/ui-kit-place-details/docs/index.js @@ -0,0 +1,62 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_details] */ +// Use querySelector to select elements for interaction. +/* [START maps_ui_kit_place_details_query_selector] */ +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] */ +async function initMap() { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement } = 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 }); + /* [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 }); + } + else { + // Fire when the user clicks the map (not on a POI). + await placeDetails.configureFromLocation(event.latLng); + } + // Show the marker at the selected place. + marker.position = placeDetails.place.location; + marker.style.display = 'block'; + }); +} +/* [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); + } +} +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 new file mode 100644 index 00000000..4d7539a9 --- /dev/null +++ b/dist/samples/ui-kit-place-details/docs/index.ts @@ -0,0 +1,76 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_details] */ +// Use querySelector to select elements for interaction. +/* [START maps_ui_kit_place_details_query_selector] */ +const map = document.querySelector('gmp-map') as any; +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; + + // 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}); + + /* [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}); + } else { + // Fire when the user clicks the map (not on a POI). + await placeDetails.configureFromLocation(event.latLng); + } + // Show the marker at the selected place. + marker.position = placeDetails.place.location; + marker.style.display = 'block'; + }); +} +/* [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); + } +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +/* [END maps_ui_kit_place_details] */ +export {}; \ No newline at end of file diff --git a/dist/samples/ui-kit-place-details/docs/style.css b/dist/samples/ui-kit-place-details/docs/style.css new file mode 100644 index 00000000..95d6cc33 --- /dev/null +++ b/dist/samples/ui-kit-place-details/docs/style.css @@ -0,0 +1,37 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_details] */ +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 16px; + text-align: center; +} + +gmp-map { + height: 400px; +} + +gmp-place-details { + visibility: hidden; + background-color: #fff; + border-radius: 8px; + margin: 20px; + width: 400px; +} + +gmp-advanced-marker { + display: none; +} +/* [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 new file mode 100644 index 00000000..b6bcd51e --- /dev/null +++ b/dist/samples/ui-kit-place-details/jsfiddle/demo.css @@ -0,0 +1,36 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 16px; + text-align: center; +} + +gmp-map { + height: 400px; +} + +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/jsfiddle/demo.details b/dist/samples/ui-kit-place-details/jsfiddle/demo.details new file mode 100644 index 00000000..4daa3d57 --- /dev/null +++ b/dist/samples/ui-kit-place-details/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: ui-kit-place-details +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-details/jsfiddle/demo.html b/dist/samples/ui-kit-place-details/jsfiddle/demo.html new file mode 100644 index 00000000..b3bbeab9 --- /dev/null +++ b/dist/samples/ui-kit-place-details/jsfiddle/demo.html @@ -0,0 +1,30 @@ + + + + + + Click on the map to view place details + + + + + +

    Click on the map to view place details

    + + + + + + + + + diff --git a/dist/samples/ui-kit-place-details/jsfiddle/demo.js b/dist/samples/ui-kit-place-details/jsfiddle/demo.js new file mode 100644 index 00000000..5d800b5c --- /dev/null +++ b/dist/samples/ui-kit-place-details/jsfiddle/demo.js @@ -0,0 +1,62 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_details] */ +// Use querySelector to select elements for interaction. +/* [START maps_ui_kit_place_details_query_selector] */ +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] */ +async function initMap() { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement } = 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 }); + /* [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 }); + } + else { + // Fire when the user clicks the map (not on a POI). + await placeDetails.configureFromLocation(event.latLng); + } + // Show the marker at the selected place. + marker.position = placeDetails.place.location; + marker.style.display = 'block'; + }); +} +/* [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); + } +} +window.initMap = initMap; +export {}; diff --git a/dist/samples/ui-kit-place-search/app/.eslintsrc.json b/dist/samples/ui-kit-place-search/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/ui-kit-place-search/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/app/README.md b/dist/samples/ui-kit-place-search/app/README.md new file mode 100644 index 00000000..62904810 --- /dev/null +++ b/dist/samples/ui-kit-place-search/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/app/index.html b/dist/samples/ui-kit-place-search/app/index.html new file mode 100644 index 00000000..d8de3c01 --- /dev/null +++ b/dist/samples/ui-kit-place-search/app/index.html @@ -0,0 +1,43 @@ + + + + + + Place List Nearby Search with Google Maps + + + + + +

    Place List Nearby Search with Google Maps

    + + +
    +
    + +
    +
    + +
    +
    + +     + + + + + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search/app/index.ts b/dist/samples/ui-kit-place-search/app/index.ts new file mode 100644 index 00000000..f71fe30c --- /dev/null +++ b/dist/samples/ui-kit-place-search/app/index.ts @@ -0,0 +1,133 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search] */ +/* [START maps_ui_kit_place_search_query_selectors] */ +const map = document.querySelector("gmp-map") as any; +const placeList = document.querySelector("gmp-place-list") as any; +const typeSelect = document.querySelector(".type-select") 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_query_selectors] */ +let markers = {}; +let infowindow; +let mapCenter; + +async function initMap(): Promise { + await google.maps.importLibrary("places"); + const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { spherical } = await google.maps.importLibrary("geometry") as google.maps.GeometryLibrary; + + infowindow = new google.maps.InfoWindow; + + function getContainingCircle(bounds) { + const diameter = spherical.computeDistanceBetween( + bounds.getNorthEast(), + bounds.getSouthWest() + ); + return { center: bounds.getCenter(), radius: diameter / 2 }; + } + + findCurrentLocation(); + + map.innerMap.setOptions({ + mapTypeControl: false, + clickableIcons: false, + }); + + /* [START maps_ui_kit_place_search_event] */ + typeSelect.addEventListener("change", (event) => { + // First remove all existing markers. + for(marker in markers){ + console.log(marker); + markers[marker].map = null; + } + markers = {}; + + if (typeSelect.value) { + placeList.configureFromSearchNearbyRequest({ + locationRestriction: getContainingCircle( + map.innerMap.getBounds() + ), + includedPrimaryTypes: [typeSelect.value], + }).then(addMarkers); + + placeList.addEventListener("gmp-placeselect", ({ place }) => { + markers[place.id].click(); + }); + } + }); + /* [END maps_ui_kit_place_search_event] */ +} + +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.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: placeDetails.offsetHeight || 206, left: 200}); + }); + + }); + map.innerMap.setCenter(bounds.getCenter()); + map.innerMap.fitBounds(bounds); + }); + } +} + +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(14); + }, + () => { + console.log('The Geolocation service failed.'); + map.innerMap.setZoom(14); + }, + ); + } else { + console.log("Your browser doesn't support geolocation"); + map.innerMap.setZoom(14); + } + +} + +declare global { + interface Window { + initMap: () => void; + } + } + window.initMap = initMap; +/* [END maps_ui_kit_place_search] */ +export{}; \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search/app/package.json b/dist/samples/ui-kit-place-search/app/package.json new file mode 100644 index 00000000..59d2713a --- /dev/null +++ b/dist/samples/ui-kit-place-search/app/package.json @@ -0,0 +1,15 @@ +{ + "name": "@js-api-samples/ui-kit-place-search", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh ui-kit-place-search && bash ../app.sh ui-kit-place-search && bash ../docs.sh ui-kit-place-search && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-search", + "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/app/style.css b/dist/samples/ui-kit-place-search/app/style.css new file mode 100644 index 00000000..d432723d --- /dev/null +++ b/dist/samples/ui-kit-place-search/app/style.css @@ -0,0 +1,66 @@ +/* + * @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; + padding: 0 20px 20px; + } + + .overlay { + 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: 600px; + 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/app/tsconfig.json b/dist/samples/ui-kit-place-search/app/tsconfig.json new file mode 100644 index 00000000..09179087 --- /dev/null +++ b/dist/samples/ui-kit-place-search/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/dist/assets/index-BaQItlwa.css b/dist/samples/ui-kit-place-search/dist/assets/index-BaQItlwa.css new file mode 100644 index 00000000..ee2d4409 --- /dev/null +++ b/dist/samples/ui-kit-place-search/dist/assets/index-BaQItlwa.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;padding:0 20px 20px}.overlay{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:600px;overflow:auto;border-radius:10px}gmp-place-list{background-color:#fff} diff --git a/dist/samples/ui-kit-place-search/dist/assets/index-BmKxyk8Z.js b/dist/samples/ui-kit-place-search/dist/assets/index-BmKxyk8Z.js new file mode 100644 index 00000000..ec87e1ac --- /dev/null +++ b/dist/samples/ui-kit-place-search/dist/assets/index-BmKxyk8Z.js @@ -0,0 +1,5 @@ +(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))o(e);new MutationObserver(e=>{for(const n of e)if(n.type==="childList")for(const d of n.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&o(d)}).observe(document,{childList:!0,subtree:!0});function t(e){const n={};return e.integrity&&(n.integrity=e.integrity),e.referrerPolicy&&(n.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?n.credentials="include":e.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function o(e){if(e.ep)return;e.ep=!0;const n=t(e);fetch(e.href,n)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const r=document.querySelector("gmp-map"),p=document.querySelector("gmp-place-list"),u=document.querySelector(".type-select"),s=document.querySelector("gmp-place-details");let m=document.querySelector("gmp-advanced-marker"),c={},l;async function g(){await google.maps.importLibrary("places"),await google.maps.importLibrary("maps");const{spherical:a}=await google.maps.importLibrary("geometry");l=new google.maps.InfoWindow;function i(t){const o=a.computeDistanceBetween(t.getNorthEast(),t.getSouthWest());return{center:t.getCenter(),radius:o/2}}y(),r.innerMap.setOptions({mapTypeControl:!1,clickableIcons:!1}),u.addEventListener("change",t=>{for(m in c)console.log(m),c[m].map=null;c={},u.value&&(p.configureFromSearchNearbyRequest({locationRestriction:i(r.innerMap.getBounds()),includedPrimaryTypes:[u.value]}).then(f),p.addEventListener("gmp-placeselect",({place:o})=>{c[o.id].click()}))})}async function f(){const{AdvancedMarkerElement:a}=await google.maps.importLibrary("marker"),{LatLngBounds:i}=await google.maps.importLibrary("core"),t=new i;p.places.length>0&&p.places.forEach(o=>{let e=new a({map:r.innerMap,position:o.location});c[o.id]=e,t.extend(o.location),e.addListener("gmp-click",n=>{l.isOpen&&l.close(),s.configureFromPlace(o),s.style.width="350px",l.setOptions({content:s}),l.open({anchor:e,map:r.innerMap}),s.addEventListener("gmp-load",()=>{r.innerMap.fitBounds(o.viewport,{top:s.offsetHeight||206,left:200})})}),r.innerMap.setCenter(t.getCenter()),r.innerMap.fitBounds(t)})}async function y(){const{LatLng:a}=await google.maps.importLibrary("core");navigator.geolocation?navigator.geolocation.getCurrentPosition(i=>{const t=new a(i.coords.latitude,i.coords.longitude);r.innerMap.panTo(t),r.innerMap.setZoom(14)},()=>{console.log("The Geolocation service failed."),r.innerMap.setZoom(14)}):(console.log("Your browser doesn't support geolocation"),r.innerMap.setZoom(14))}window.initMap=g; diff --git a/dist/samples/ui-kit-place-search/dist/index.html b/dist/samples/ui-kit-place-search/dist/index.html new file mode 100644 index 00000000..88fc91e1 --- /dev/null +++ b/dist/samples/ui-kit-place-search/dist/index.html @@ -0,0 +1,43 @@ + + + + + + Place List Nearby Search with Google Maps + + + + + +

    Place List Nearby Search with Google Maps

    + + +
    +
    + +
    +
    + +
    +
    + +     + + + + + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search/docs/index.html b/dist/samples/ui-kit-place-search/docs/index.html new file mode 100644 index 00000000..d8de3c01 --- /dev/null +++ b/dist/samples/ui-kit-place-search/docs/index.html @@ -0,0 +1,43 @@ + + + + + + Place List Nearby Search with Google Maps + + + + + +

    Place List Nearby Search with Google Maps

    + + +
    +
    + +
    +
    + +
    +
    + +     + + + + + \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search/docs/index.js b/dist/samples/ui-kit-place-search/docs/index.js new file mode 100644 index 00000000..68b73f6e --- /dev/null +++ b/dist/samples/ui-kit-place-search/docs/index.js @@ -0,0 +1,103 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search] */ +/* [START maps_ui_kit_place_search_query_selectors] */ +const map = document.querySelector("gmp-map"); +const placeList = document.querySelector("gmp-place-list"); +const typeSelect = document.querySelector(".type-select"); +const placeDetails = document.querySelector("gmp-place-details"); +let marker = document.querySelector('gmp-advanced-marker'); +/* [END maps_ui_kit_place_search_query_selectors] */ +let markers = {}; +let infowindow; +let mapCenter; +async function initMap() { + await google.maps.importLibrary("places"); + const { InfoWindow } = await google.maps.importLibrary("maps"); + const { spherical } = await google.maps.importLibrary("geometry"); + infowindow = new google.maps.InfoWindow; + function getContainingCircle(bounds) { + const diameter = spherical.computeDistanceBetween(bounds.getNorthEast(), bounds.getSouthWest()); + return { center: bounds.getCenter(), radius: diameter / 2 }; + } + findCurrentLocation(); + map.innerMap.setOptions({ + mapTypeControl: false, + clickableIcons: false, + }); + /* [START maps_ui_kit_place_search_event] */ + typeSelect.addEventListener("change", (event) => { + // First remove all existing markers. + for (marker in markers) { + console.log(marker); + markers[marker].map = null; + } + markers = {}; + if (typeSelect.value) { + placeList.configureFromSearchNearbyRequest({ + locationRestriction: getContainingCircle(map.innerMap.getBounds()), + includedPrimaryTypes: [typeSelect.value], + }).then(addMarkers); + placeList.addEventListener("gmp-placeselect", ({ place }) => { + markers[place.id].click(); + }); + } + }); + /* [END maps_ui_kit_place_search_event] */ +} +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.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: placeDetails.offsetHeight || 206, left: 200 }); + }); + }); + map.innerMap.setCenter(bounds.getCenter()); + map.innerMap.fitBounds(bounds); + }); + } +} +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(14); + }, () => { + console.log('The Geolocation service failed.'); + map.innerMap.setZoom(14); + }); + } + else { + console.log("Your browser doesn't support geolocation"); + map.innerMap.setZoom(14); + } +} +window.initMap = initMap; +export {}; diff --git a/dist/samples/ui-kit-place-search/docs/index.ts b/dist/samples/ui-kit-place-search/docs/index.ts new file mode 100644 index 00000000..f71fe30c --- /dev/null +++ b/dist/samples/ui-kit-place-search/docs/index.ts @@ -0,0 +1,133 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search] */ +/* [START maps_ui_kit_place_search_query_selectors] */ +const map = document.querySelector("gmp-map") as any; +const placeList = document.querySelector("gmp-place-list") as any; +const typeSelect = document.querySelector(".type-select") 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_query_selectors] */ +let markers = {}; +let infowindow; +let mapCenter; + +async function initMap(): Promise { + await google.maps.importLibrary("places"); + const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { spherical } = await google.maps.importLibrary("geometry") as google.maps.GeometryLibrary; + + infowindow = new google.maps.InfoWindow; + + function getContainingCircle(bounds) { + const diameter = spherical.computeDistanceBetween( + bounds.getNorthEast(), + bounds.getSouthWest() + ); + return { center: bounds.getCenter(), radius: diameter / 2 }; + } + + findCurrentLocation(); + + map.innerMap.setOptions({ + mapTypeControl: false, + clickableIcons: false, + }); + + /* [START maps_ui_kit_place_search_event] */ + typeSelect.addEventListener("change", (event) => { + // First remove all existing markers. + for(marker in markers){ + console.log(marker); + markers[marker].map = null; + } + markers = {}; + + if (typeSelect.value) { + placeList.configureFromSearchNearbyRequest({ + locationRestriction: getContainingCircle( + map.innerMap.getBounds() + ), + includedPrimaryTypes: [typeSelect.value], + }).then(addMarkers); + + placeList.addEventListener("gmp-placeselect", ({ place }) => { + markers[place.id].click(); + }); + } + }); + /* [END maps_ui_kit_place_search_event] */ +} + +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.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: placeDetails.offsetHeight || 206, left: 200}); + }); + + }); + map.innerMap.setCenter(bounds.getCenter()); + map.innerMap.fitBounds(bounds); + }); + } +} + +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(14); + }, + () => { + console.log('The Geolocation service failed.'); + map.innerMap.setZoom(14); + }, + ); + } else { + console.log("Your browser doesn't support geolocation"); + map.innerMap.setZoom(14); + } + +} + +declare global { + interface Window { + initMap: () => void; + } + } + window.initMap = initMap; +/* [END maps_ui_kit_place_search] */ +export{}; \ No newline at end of file diff --git a/dist/samples/ui-kit-place-search/docs/style.css b/dist/samples/ui-kit-place-search/docs/style.css new file mode 100644 index 00000000..d432723d --- /dev/null +++ b/dist/samples/ui-kit-place-search/docs/style.css @@ -0,0 +1,66 @@ +/* + * @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; + padding: 0 20px 20px; + } + + .overlay { + 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: 600px; + 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/jsfiddle/demo.css b/dist/samples/ui-kit-place-search/jsfiddle/demo.css new file mode 100644 index 00000000..48abcbea --- /dev/null +++ b/dist/samples/ui-kit-place-search/jsfiddle/demo.css @@ -0,0 +1,65 @@ +/* + * @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; + padding: 0 20px 20px; + } + + .overlay { + 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: 600px; + overflow: auto; + border-radius: 10px; + } + + gmp-place-list { + background-color: #fff; + } diff --git a/dist/samples/ui-kit-place-search/jsfiddle/demo.details b/dist/samples/ui-kit-place-search/jsfiddle/demo.details new file mode 100644 index 00000000..93b8c5ad --- /dev/null +++ b/dist/samples/ui-kit-place-search/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: ui-kit-place-search +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/jsfiddle/demo.html b/dist/samples/ui-kit-place-search/jsfiddle/demo.html new file mode 100644 index 00000000..68cff270 --- /dev/null +++ b/dist/samples/ui-kit-place-search/jsfiddle/demo.html @@ -0,0 +1,42 @@ + + + + + + Place List Nearby Search with Google Maps + + + + + +

    Place List Nearby Search with Google Maps

    + + +
    +
    + +
    +
    + +
    +
    + +     + + + + diff --git a/dist/samples/ui-kit-place-search/jsfiddle/demo.js b/dist/samples/ui-kit-place-search/jsfiddle/demo.js new file mode 100644 index 00000000..68b73f6e --- /dev/null +++ b/dist/samples/ui-kit-place-search/jsfiddle/demo.js @@ -0,0 +1,103 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_place_search] */ +/* [START maps_ui_kit_place_search_query_selectors] */ +const map = document.querySelector("gmp-map"); +const placeList = document.querySelector("gmp-place-list"); +const typeSelect = document.querySelector(".type-select"); +const placeDetails = document.querySelector("gmp-place-details"); +let marker = document.querySelector('gmp-advanced-marker'); +/* [END maps_ui_kit_place_search_query_selectors] */ +let markers = {}; +let infowindow; +let mapCenter; +async function initMap() { + await google.maps.importLibrary("places"); + const { InfoWindow } = await google.maps.importLibrary("maps"); + const { spherical } = await google.maps.importLibrary("geometry"); + infowindow = new google.maps.InfoWindow; + function getContainingCircle(bounds) { + const diameter = spherical.computeDistanceBetween(bounds.getNorthEast(), bounds.getSouthWest()); + return { center: bounds.getCenter(), radius: diameter / 2 }; + } + findCurrentLocation(); + map.innerMap.setOptions({ + mapTypeControl: false, + clickableIcons: false, + }); + /* [START maps_ui_kit_place_search_event] */ + typeSelect.addEventListener("change", (event) => { + // First remove all existing markers. + for (marker in markers) { + console.log(marker); + markers[marker].map = null; + } + markers = {}; + if (typeSelect.value) { + placeList.configureFromSearchNearbyRequest({ + locationRestriction: getContainingCircle(map.innerMap.getBounds()), + includedPrimaryTypes: [typeSelect.value], + }).then(addMarkers); + placeList.addEventListener("gmp-placeselect", ({ place }) => { + markers[place.id].click(); + }); + } + }); + /* [END maps_ui_kit_place_search_event] */ +} +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.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: placeDetails.offsetHeight || 206, left: 200 }); + }); + }); + map.innerMap.setCenter(bounds.getCenter()); + map.innerMap.fitBounds(bounds); + }); + } +} +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(14); + }, () => { + console.log('The Geolocation service failed.'); + map.innerMap.setZoom(14); + }); + } + else { + console.log("Your browser doesn't support geolocation"); + map.innerMap.setZoom(14); + } +} +window.initMap = initMap; +export {}; diff --git a/index.html b/index.html index a6fe8a9b..4c18ebe3 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,8 @@

    Maps JSAPI Samples

  • place-autocomplete-element
  • place-autocomplete-map
  • place-text-search
    • +
  • ui-kit-place-details
    • +
  • ui-kit-place-search