diff --git a/dist/samples/place-autocomplete-data-session/app/index.ts b/dist/samples/place-autocomplete-data-session/app/index.ts index 5a5eee37..eb635b0e 100644 --- a/dist/samples/place-autocomplete-data-session/app/index.ts +++ b/dist/samples/place-autocomplete-data-session/app/index.ts @@ -5,50 +5,55 @@ */ // [START maps_place_autocomplete_data_session] -let title; -let results; -let input; -let token; +let titleElement; +let resultsContainerElement; +let inputElement; + +let newestRequestId = 0; // Add an initial request body. -let request = { - input: "", +const 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", + 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; +function init() { + titleElement = document.getElementById('title'); + resultsContainerElement = document.getElementById('results'); + inputElement = document.querySelector('input'); + inputElement.addEventListener('input', makeAutocompleteRequest); + refreshToken(request); } -async function makeAcRequest(input) { +async function makeAutocompleteRequest(inputEvent) { // Reset elements and exit if an empty string is received. - if (input.target.value == '') { - title.innerText = ''; - results.replaceChildren(); + if (inputEvent.target.value == '') { + titleElement.innerText = ''; + resultsContainerElement.replaceChildren(); return; } // Add the latest char sequence to the request. - request.input = input.target.value; + request.input = inputEvent.target.value; + + // To avoid race conditions, store the request ID and compare after the request. + const requestId = ++newestRequestId; // 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 + '"'; + // If the request has been superseded by a newer request, do not render the output. + if (requestId !== newestRequestId) return; + + titleElement.innerText = `Query predictions for "${request.input}"`; // Clear the list first. - results.replaceChildren(); + resultsContainerElement.replaceChildren(); for (const suggestion of suggestions) { const placePrediction = suggestion.placePrediction; @@ -60,10 +65,10 @@ async function makeAcRequest(input) { }); a.innerText = placePrediction!.text.toString(); - // Create a new list element. + // Create a new list item element. const li = document.createElement('li'); li.appendChild(a); - results.appendChild(li); + resultsContainerElement.appendChild(li); } } @@ -72,19 +77,17 @@ 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 = ''; + const placeText = document.createTextNode(`${place.displayName}: ${place.formattedAddress}`); + resultsContainerElement.replaceChildren(placeText); + titleElement.innerText = 'Selected Place:'; + inputElement.value = ''; refreshToken(request); } // Helper function to refresh the session token. -async function refreshToken(request) { +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; + request.sessionToken = new google.maps.places.AutocompleteSessionToken(); } declare global { @@ -94,4 +97,4 @@ declare global { } window.init = init; // [END maps_place_autocomplete_data_session] -export { }; \ No newline at end of file +export { }; diff --git a/dist/samples/place-autocomplete-data-session/dist/assets/index-BXlaTN0b.js b/dist/samples/place-autocomplete-data-session/dist/assets/index-BXlaTN0b.js deleted file mode 100644 index 6bd6dfcb..00000000 --- a/dist/samples/place-autocomplete-data-session/dist/assets/index-BXlaTN0b.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const a of t.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&i(a)}).observe(document,{childList:!0,subtree:!0});function l(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 i(e){if(e.ep)return;e.ep=!0;const t=l(e);fetch(e.href,t)}})();/** - * @license - * Copyright 2024 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */let c,s,u,d,r={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 f(){d=new google.maps.places.AutocompleteSessionToken,c=document.getElementById("title"),s=document.getElementById("results"),u=document.querySelector("input"),u.addEventListener("input",m),r=p(r)}async function m(n){if(n.target.value==""){c.innerText="",s.replaceChildren();return}r.input=n.target.value;const{suggestions:o}=await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(r);c.innerText='Query predictions for "'+r.input+'"',s.replaceChildren();for(const l of o){const i=l.placePrediction,e=document.createElement("a");e.addEventListener("click",()=>{g(i.toPlace())}),e.innerText=i.text.toString();const t=document.createElement("li");t.appendChild(e),s.appendChild(t)}}async function g(n){await n.fetchFields({fields:["displayName","formattedAddress"]});let o=document.createTextNode(n.displayName+": "+n.formattedAddress);s.replaceChildren(o),c.innerText="Selected Place:",u.value="",p(r)}async function p(n){return d=new google.maps.places.AutocompleteSessionToken,n.sessionToken=d,n}window.init=f; diff --git a/dist/samples/place-autocomplete-data-session/dist/assets/index-JVaZg7ij.js b/dist/samples/place-autocomplete-data-session/dist/assets/index-JVaZg7ij.js new file mode 100644 index 00000000..9b85e4c4 --- /dev/null +++ b/dist/samples/place-autocomplete-data-session/dist/assets/index-JVaZg7ij.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"]'))c(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"&&c(r)}).observe(document,{childList:!0,subtree:!0});function u(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 c(e){if(e.ep)return;e.ep=!0;const t=u(e);fetch(e.href,t)}})();/** + * @license + * Copyright 2024 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */let l,i,a,d=0;const s={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"};function p(){l=document.getElementById("title"),i=document.getElementById("results"),a=document.querySelector("input"),a.addEventListener("input",m),f(s)}async function m(n){if(n.target.value==""){l.innerText="",i.replaceChildren();return}s.input=n.target.value;const o=++d,{suggestions:u}=await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(s);if(o===d){l.innerText=`Query predictions for "${s.input}"`,i.replaceChildren();for(const c of u){const e=c.placePrediction,t=document.createElement("a");t.addEventListener("click",()=>{g(e.toPlace())}),t.innerText=e.text.toString();const r=document.createElement("li");r.appendChild(t),i.appendChild(r)}}}async function g(n){await n.fetchFields({fields:["displayName","formattedAddress"]});const o=document.createTextNode(`${n.displayName}: ${n.formattedAddress}`);i.replaceChildren(o),l.innerText="Selected Place:",a.value="",f(s)}function f(n){n.sessionToken=new google.maps.places.AutocompleteSessionToken}window.init=p; diff --git a/dist/samples/place-autocomplete-data-session/dist/index.html b/dist/samples/place-autocomplete-data-session/dist/index.html index 2f4dee6b..eb25cf6d 100644 --- a/dist/samples/place-autocomplete-data-session/dist/index.html +++ b/dist/samples/place-autocomplete-data-session/dist/index.html @@ -9,7 +9,7 @@ Place Autocomplete Data API Session - + diff --git a/dist/samples/place-autocomplete-data-session/docs/index.js b/dist/samples/place-autocomplete-data-session/docs/index.js index 416877f7..117fd222 100644 --- a/dist/samples/place-autocomplete-data-session/docs/index.js +++ b/dist/samples/place-autocomplete-data-session/docs/index.js @@ -4,42 +4,46 @@ * SPDX-License-Identifier: Apache-2.0 */ // [START maps_place_autocomplete_data_session] -let title; -let results; -let input; -let token; +let titleElement; +let resultsContainerElement; +let inputElement; +let newestRequestId = 0; // Add an initial request body. -let request = { - input: "", +const 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", + 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); +function init() { + titleElement = document.getElementById('title'); + resultsContainerElement = document.getElementById('results'); + inputElement = document.querySelector('input'); + inputElement.addEventListener('input', makeAutocompleteRequest); + refreshToken(request); } -async function makeAcRequest(input) { +async function makeAutocompleteRequest(inputEvent) { // Reset elements and exit if an empty string is received. - if (input.target.value == '') { - title.innerText = ''; - results.replaceChildren(); + if (inputEvent.target.value == '') { + titleElement.innerText = ''; + resultsContainerElement.replaceChildren(); return; } // Add the latest char sequence to the request. - request.input = input.target.value; + request.input = inputEvent.target.value; + // To avoid race conditions, store the request ID and compare after the request. + const requestId = ++newestRequestId; // 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 + '"'; + // If the request has been superseded by a newer request, do not render the output. + if (requestId !== newestRequestId) + return; + titleElement.innerText = `Query predictions for "${request.input}"`; // Clear the list first. - results.replaceChildren(); + resultsContainerElement.replaceChildren(); for (const suggestion of suggestions) { const placePrediction = suggestion.placePrediction; // Create a link for the place, add an event handler to fetch the place. @@ -48,10 +52,10 @@ async function makeAcRequest(input) { onPlaceSelected(placePrediction.toPlace()); }); a.innerText = placePrediction.text.toString(); - // Create a new list element. + // Create a new list item element. const li = document.createElement('li'); li.appendChild(a); - results.appendChild(li); + resultsContainerElement.appendChild(li); } } // Event handler for clicking on a suggested place. @@ -59,18 +63,16 @@ 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 = ''; + const placeText = document.createTextNode(`${place.displayName}: ${place.formattedAddress}`); + resultsContainerElement.replaceChildren(placeText); + titleElement.innerText = 'Selected Place:'; + inputElement.value = ''; refreshToken(request); } // Helper function to refresh the session token. -async function refreshToken(request) { +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; + request.sessionToken = new google.maps.places.AutocompleteSessionToken(); } window.init = init; export {}; diff --git a/dist/samples/place-autocomplete-data-session/docs/index.ts b/dist/samples/place-autocomplete-data-session/docs/index.ts index 5a5eee37..eb635b0e 100644 --- a/dist/samples/place-autocomplete-data-session/docs/index.ts +++ b/dist/samples/place-autocomplete-data-session/docs/index.ts @@ -5,50 +5,55 @@ */ // [START maps_place_autocomplete_data_session] -let title; -let results; -let input; -let token; +let titleElement; +let resultsContainerElement; +let inputElement; + +let newestRequestId = 0; // Add an initial request body. -let request = { - input: "", +const 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", + 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; +function init() { + titleElement = document.getElementById('title'); + resultsContainerElement = document.getElementById('results'); + inputElement = document.querySelector('input'); + inputElement.addEventListener('input', makeAutocompleteRequest); + refreshToken(request); } -async function makeAcRequest(input) { +async function makeAutocompleteRequest(inputEvent) { // Reset elements and exit if an empty string is received. - if (input.target.value == '') { - title.innerText = ''; - results.replaceChildren(); + if (inputEvent.target.value == '') { + titleElement.innerText = ''; + resultsContainerElement.replaceChildren(); return; } // Add the latest char sequence to the request. - request.input = input.target.value; + request.input = inputEvent.target.value; + + // To avoid race conditions, store the request ID and compare after the request. + const requestId = ++newestRequestId; // 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 + '"'; + // If the request has been superseded by a newer request, do not render the output. + if (requestId !== newestRequestId) return; + + titleElement.innerText = `Query predictions for "${request.input}"`; // Clear the list first. - results.replaceChildren(); + resultsContainerElement.replaceChildren(); for (const suggestion of suggestions) { const placePrediction = suggestion.placePrediction; @@ -60,10 +65,10 @@ async function makeAcRequest(input) { }); a.innerText = placePrediction!.text.toString(); - // Create a new list element. + // Create a new list item element. const li = document.createElement('li'); li.appendChild(a); - results.appendChild(li); + resultsContainerElement.appendChild(li); } } @@ -72,19 +77,17 @@ 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 = ''; + const placeText = document.createTextNode(`${place.displayName}: ${place.formattedAddress}`); + resultsContainerElement.replaceChildren(placeText); + titleElement.innerText = 'Selected Place:'; + inputElement.value = ''; refreshToken(request); } // Helper function to refresh the session token. -async function refreshToken(request) { +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; + request.sessionToken = new google.maps.places.AutocompleteSessionToken(); } declare global { @@ -94,4 +97,4 @@ declare global { } window.init = init; // [END maps_place_autocomplete_data_session] -export { }; \ No newline at end of file +export { }; diff --git a/dist/samples/place-autocomplete-data-session/jsfiddle/demo.js b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.js index 5c63bba6..d67815e7 100644 --- a/dist/samples/place-autocomplete-data-session/jsfiddle/demo.js +++ b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.js @@ -4,42 +4,46 @@ * SPDX-License-Identifier: Apache-2.0 */ -let title; -let results; -let input; -let token; +let titleElement; +let resultsContainerElement; +let inputElement; +let newestRequestId = 0; // Add an initial request body. -let request = { - input: "", +const 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", + 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); +function init() { + titleElement = document.getElementById('title'); + resultsContainerElement = document.getElementById('results'); + inputElement = document.querySelector('input'); + inputElement.addEventListener('input', makeAutocompleteRequest); + refreshToken(request); } -async function makeAcRequest(input) { +async function makeAutocompleteRequest(inputEvent) { // Reset elements and exit if an empty string is received. - if (input.target.value == '') { - title.innerText = ''; - results.replaceChildren(); + if (inputEvent.target.value == '') { + titleElement.innerText = ''; + resultsContainerElement.replaceChildren(); return; } // Add the latest char sequence to the request. - request.input = input.target.value; + request.input = inputEvent.target.value; + // To avoid race conditions, store the request ID and compare after the request. + const requestId = ++newestRequestId; // 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 + '"'; + // If the request has been superseded by a newer request, do not render the output. + if (requestId !== newestRequestId) + return; + titleElement.innerText = `Query predictions for "${request.input}"`; // Clear the list first. - results.replaceChildren(); + resultsContainerElement.replaceChildren(); for (const suggestion of suggestions) { const placePrediction = suggestion.placePrediction; // Create a link for the place, add an event handler to fetch the place. @@ -48,10 +52,10 @@ async function makeAcRequest(input) { onPlaceSelected(placePrediction.toPlace()); }); a.innerText = placePrediction.text.toString(); - // Create a new list element. + // Create a new list item element. const li = document.createElement('li'); li.appendChild(a); - results.appendChild(li); + resultsContainerElement.appendChild(li); } } // Event handler for clicking on a suggested place. @@ -59,18 +63,16 @@ 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 = ''; + const placeText = document.createTextNode(`${place.displayName}: ${place.formattedAddress}`); + resultsContainerElement.replaceChildren(placeText); + titleElement.innerText = 'Selected Place:'; + inputElement.value = ''; refreshToken(request); } // Helper function to refresh the session token. -async function refreshToken(request) { +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; + request.sessionToken = new google.maps.places.AutocompleteSessionToken(); } window.init = init; export {};