googlemaps-samples · willum070 · Mar 5, 2025 · Mar 5, 2025
diff --git a/dist/index.html b/dist/index.html
@@ -10,6 +10,7 @@ <h1>Maps JSAPI Samples</h1>
   <li><a href='/samples/add-map/dist'>add-map</a></li>
   <li><a href='/samples/advanced-markers-animation/dist'>advanced-markers-animation</a></li>
   <li><a href='/samples/map-simple/dist'>map-simple</a></li>
+  <li><a href='/samples/place-autocomplete-data-session/dist'>place-autocomplete-data-session</a></li>
   <li><a href='/samples/place-autocomplete-element/dist'>place-autocomplete-element</a></li>
   <li><a href='/samples/place-autocomplete-map/dist'>place-autocomplete-map</a></li>
   <li><a href='/samples/place-text-search/dist'>place-text-search</a></li>

diff --git a/dist/samples/place-autocomplete-data-session/app/.eslintsrc.json b/dist/samples/place-autocomplete-data-session/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/place-autocomplete-data-session/app/README.md b/dist/samples/place-autocomplete-data-session/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/place-autocomplete-data-session/app/index.html b/dist/samples/place-autocomplete-data-session/app/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_place_autocomplete_data_session] -->
+<html>
+  <head>
+    <title>Place Autocomplete Data API Session</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <!-- // [START maps_place_autocomplete_data_session_html] -->
+    <input id="input" type="text" placeholder="Search for a place..." />
+    <div id="title"></div>
+    <ul id="results"></ul>
+    <img
+      class="powered-by-google"
+      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
+      alt="Powered by Google"
+    />
+    <!-- // [END maps_place_autocomplete_data_session_html] -->
+
+    <!-- 
+      The `defer` attribute causes the script to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises. See
+      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=init&libraries=places&v=weekly"
+      defer
+    ></script>
+  </body>
+</html>
+<!-- [END maps_place_autocomplete_data_session] -->
diff --git a/dist/samples/place-autocomplete-data-session/app/index.ts 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 { };
diff --git a/dist/samples/place-autocomplete-data-session/app/package.json 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
@@ -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] */
diff --git a/dist/samples/place-autocomplete-data-session/app/tsconfig.json 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
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
@@ -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
@@ -0,0 +1,40 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_place_autocomplete_data_session] -->
+<html>
+  <head>
+    <title>Place Autocomplete Data API Session</title>
+
+    <script type="module" crossorigin src="./assets/index-BXlaTN0b.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-Qxu13WYE.css">
+  </head>
+  <body>
+    <!-- // [START maps_place_autocomplete_data_session_html] -->
+    <input id="input" type="text" placeholder="Search for a place..." />
+    <div id="title"></div>
+    <ul id="results"></ul>
+    <img
+      class="powered-by-google"
+      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
+      alt="Powered by Google"
+    />
+    <!-- // [END maps_place_autocomplete_data_session_html] -->
+
+    <!-- 
+      The `defer` attribute causes the script to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises. See
+      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=init&libraries=places&v=weekly"
+      defer
+    ></script>
+  </body>
+</html>
+<!-- [END maps_place_autocomplete_data_session] -->
diff --git a/dist/samples/place-autocomplete-data-session/docs/index.html b/dist/samples/place-autocomplete-data-session/docs/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_place_autocomplete_data_session] -->
+<html>
+  <head>
+    <title>Place Autocomplete Data API Session</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <!-- // [START maps_place_autocomplete_data_session_html] -->
+    <input id="input" type="text" placeholder="Search for a place..." />
+    <div id="title"></div>
+    <ul id="results"></ul>
+    <img
+      class="powered-by-google"
+      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
+      alt="Powered by Google"
+    />
+    <!-- // [END maps_place_autocomplete_data_session_html] -->
+
+    <!-- 
+      The `defer` attribute causes the script to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises. See
+      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=init&libraries=places&v=weekly"
+      defer
+    ></script>
+  </body>
+</html>
+<!-- [END maps_place_autocomplete_data_session] -->