diff --git a/dist/index.html b/dist/index.html index bdf77245..a6fe8a9b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,6 +10,7 @@
+
+
+
+
+
+
+
diff --git a/dist/samples/place-autocomplete-data-session/app/index.ts b/dist/samples/place-autocomplete-data-session/app/index.ts
new file mode 100644
index 00000000..5a5eee37
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/app/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/dist/samples/place-autocomplete-data-session/app/package.json b/dist/samples/place-autocomplete-data-session/app/package.json
new file mode 100644
index 00000000..9783cda2
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/app/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/dist/samples/place-autocomplete-data-session/app/style.css b/dist/samples/place-autocomplete-data-session/app/style.css
new file mode 100644
index 00000000..3f890291
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/app/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/dist/samples/place-autocomplete-data-session/app/tsconfig.json b/dist/samples/place-autocomplete-data-session/app/tsconfig.json
new file mode 100644
index 00000000..366aabb0
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/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"
+ }
+}
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
new file mode 100644
index 00000000..6bd6dfcb
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/dist/assets/index-BXlaTN0b.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"]'))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-Qxu13WYE.css b/dist/samples/place-autocomplete-data-session/dist/assets/index-Qxu13WYE.css
new file mode 100644
index 00000000..6b0670db
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/dist/assets/index-Qxu13WYE.css
@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */#map{height:100%}html,body{height:100%;margin:0;padding:0}a{cursor:pointer;text-decoration:underline;color:#00f}input{width:300px}
diff --git a/dist/samples/place-autocomplete-data-session/dist/index.html b/dist/samples/place-autocomplete-data-session/dist/index.html
new file mode 100644
index 00000000..853c42d5
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/dist/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/place-autocomplete-data-session/docs/index.html b/dist/samples/place-autocomplete-data-session/docs/index.html
new file mode 100644
index 00000000..3fd5df3f
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/docs/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/place-autocomplete-data-session/docs/index.js b/dist/samples/place-autocomplete-data-session/docs/index.js
new file mode 100644
index 00000000..416877f7
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/docs/index.js
@@ -0,0 +1,76 @@
+/**
+ * @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);
+}
+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;
+}
+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
new file mode 100644
index 00000000..5a5eee37
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/docs/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/dist/samples/place-autocomplete-data-session/docs/style.css b/dist/samples/place-autocomplete-data-session/docs/style.css
new file mode 100644
index 00000000..3f890291
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/docs/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/dist/samples/place-autocomplete-data-session/jsfiddle/demo.css b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.css
new file mode 100644
index 00000000..91352b9d
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.css
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/*
+ * 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;
+}
+
diff --git a/dist/samples/place-autocomplete-data-session/jsfiddle/demo.details b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.details
new file mode 100644
index 00000000..3bd9b77a
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: place-autocomplete-data-session
+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/place-autocomplete-data-session/jsfiddle/demo.html b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.html
new file mode 100644
index 00000000..6c3c64de
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/place-autocomplete-data-session/jsfiddle/demo.js b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.js
new file mode 100644
index 00000000..5c63bba6
--- /dev/null
+++ b/dist/samples/place-autocomplete-data-session/jsfiddle/demo.js
@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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);
+}
+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;
+}
+window.init = init;
+export {};
diff --git a/index.html b/index.html
index bdf77245..a6fe8a9b 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@