diff --git a/samples/place-autocomplete-data-session/README.md b/samples/place-autocomplete-data-session/README.md new file mode 100644 index 00000000..385d8923 --- /dev/null +++ b/samples/place-autocomplete-data-session/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/samples/place-autocomplete-data-session/index.html b/samples/place-autocomplete-data-session/index.html new file mode 100644 index 00000000..3fd5df3f --- /dev/null +++ b/samples/place-autocomplete-data-session/index.html @@ -0,0 +1,40 @@ + + + + + + Place Autocomplete Data API Session + + + + + + + +
+ + Powered by Google + + + + + + + diff --git a/samples/place-autocomplete-data-session/index.ts b/samples/place-autocomplete-data-session/index.ts new file mode 100644 index 00000000..5a5eee37 --- /dev/null +++ b/samples/place-autocomplete-data-session/index.ts @@ -0,0 +1,97 @@ +/** + * @license + * Copyright 2024 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_place_autocomplete_data_session] +let title; +let results; +let input; +let token; + +// Add an initial request body. +let request = { + input: "", + locationRestriction: { west: -122.44, north: 37.8, east: -122.39, south: 37.78 }, + origin: { lat: 37.7893, lng: -122.4039 }, + includedPrimaryTypes: ["restaurant"], + language: "en-US", + region: "us", +}; + +async function init() { + token = new google.maps.places.AutocompleteSessionToken(); + + title = document.getElementById('title'); + results = document.getElementById('results'); + input = document.querySelector("input"); + input.addEventListener("input", makeAcRequest); + request = refreshToken(request) as any; +} + +async function makeAcRequest(input) { + // Reset elements and exit if an empty string is received. + if (input.target.value == '') { + title.innerText = ''; + results.replaceChildren(); + return; + } + + // Add the latest char sequence to the request. + request.input = input.target.value; + + // Fetch autocomplete suggestions and show them in a list. + // @ts-ignore + const { suggestions } = await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request); + + title.innerText = 'Query predictions for "' + request.input + '"'; + + // Clear the list first. + results.replaceChildren(); + + for (const suggestion of suggestions) { + const placePrediction = suggestion.placePrediction; + + // Create a link for the place, add an event handler to fetch the place. + const a = document.createElement('a'); + a.addEventListener('click', () => { + onPlaceSelected(placePrediction!.toPlace()); + }); + a.innerText = placePrediction!.text.toString(); + + // Create a new list element. + const li = document.createElement('li'); + li.appendChild(a); + results.appendChild(li); + } +} + +// Event handler for clicking on a suggested place. +async function onPlaceSelected(place) { + await place.fetchFields({ + fields: ['displayName', 'formattedAddress'], + }); + let placeText = document.createTextNode(place.displayName + ': ' + place.formattedAddress); + results.replaceChildren(placeText); + title.innerText = 'Selected Place:'; + input.value = ''; + refreshToken(request); +} + +// Helper function to refresh the session token. +async function refreshToken(request) { + // Create a new session token and add it to the request. + token = new google.maps.places.AutocompleteSessionToken(); + request.sessionToken = token; + return request; +} + +declare global { + interface Window { + init: () => void; + } + } + window.init = init; +// [END maps_place_autocomplete_data_session] +export { }; \ No newline at end of file diff --git a/samples/place-autocomplete-data-session/package.json b/samples/place-autocomplete-data-session/package.json new file mode 100644 index 00000000..9783cda2 --- /dev/null +++ b/samples/place-autocomplete-data-session/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/place-autocomplete-data-session", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh place-autocomplete-data-session && bash ../app.sh place-autocomplete-data-session && bash ../docs.sh place-autocomplete-data-session && npm run build:vite --workspace=. && bash ../dist.sh place-autocomplete-data-session", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/place-autocomplete-data-session/place-autocomplete-data-session.jshtml b/samples/place-autocomplete-data-session/place-autocomplete-data-session.jshtml new file mode 100644 index 00000000..8fc11048 --- /dev/null +++ b/samples/place-autocomplete-data-session/place-autocomplete-data-session.jshtml @@ -0,0 +1,19 @@ + +{% spaceless %}{% include "maps/documentation/javascript/examples/full/_apikey.html" %}{% endspaceless %} + + + + + Place Autocomplete Data API Session + + + +{% includecode content_path="maps/documentation/javascript/examples/samples/place-autocomplete-data-session/index.html" region_tag="maps_place_autocomplete_data_session_body" html_escape="False" %} +{{ api_loader_default }} + + + diff --git a/samples/place-autocomplete-data-session/style.css b/samples/place-autocomplete-data-session/style.css new file mode 100644 index 00000000..3f890291 --- /dev/null +++ b/samples/place-autocomplete-data-session/style.css @@ -0,0 +1,35 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_place_autocomplete_data_session] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +a { + cursor: pointer; + text-decoration: underline; + color: blue; +} + +input { + width: 300px; +} + +/* [END maps_place_autocomplete_data_session] */ \ No newline at end of file diff --git a/samples/place-autocomplete-data-session/tsconfig.json b/samples/place-autocomplete-data-session/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/place-autocomplete-data-session/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" + } +}