diff --git a/samples/place-autocomplete-data-simple/README.md b/samples/place-autocomplete-data-simple/README.md new file mode 100644 index 00000000..ac1e4ef5 --- /dev/null +++ b/samples/place-autocomplete-data-simple/README.md @@ -0,0 +1,42 @@ +# Google Maps JavaScript Sample + +## place-autocomplete-data-simple + +The place-autocomplete-data-simple sample demonstrates making a single request for Place predictions, +then requests Place Details for the first result. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/place-autocomplete-data-simple` +`npm start` + +### Build an individual example + +`cd samples/place-autocomplete-data-simple` +`npm run build` + +From 'samples': + +`npm run build --workspace=place-autocomplete-data-simple/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/place-autocomplete-data-simple` +`npx eslint index.ts` + +## 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-simple/index.html b/samples/place-autocomplete-data-simple/index.html new file mode 100644 index 00000000..21ed29d6 --- /dev/null +++ b/samples/place-autocomplete-data-simple/index.html @@ -0,0 +1,32 @@ + + + + +
++
+
+
+
+
+
diff --git a/samples/place-autocomplete-data-simple/index.ts b/samples/place-autocomplete-data-simple/index.ts
new file mode 100644
index 00000000..f4f13a8e
--- /dev/null
+++ b/samples/place-autocomplete-data-simple/index.ts
@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_place_autocomplete_data_simple]
+async function init() {
+ const { Place, AutocompleteSessionToken, AutocompleteSuggestion } =
+ (await google.maps.importLibrary("places")) as google.maps.PlacesLibrary;
+
+ // [START maps_place_autocomplete_data_simple_request]
+ // Add an initial request body.
+ // [START maps_place_autocomplete_data_simple_request_body]
+ let request = {
+ input: "Tadi",
+ 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",
+ };
+ // [END maps_place_autocomplete_data_simple_request_body]
+
+ // [START maps_place_autocomplete_data_simple_token]
+ // Create a session token.
+ const token = new AutocompleteSessionToken();
+ // Add the token to the request.
+ // @ts-ignore
+ request.sessionToken = token;
+ // [END maps_place_autocomplete_data_simple_token]
+ // [END maps_place_autocomplete_data_simple_request]
+ // [START maps_place_autocomplete_data_simple_get_suggestions]
+ // Fetch autocomplete suggestions.
+ const { suggestions } =
+ await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
+
+ const title = document.getElementById("title") as HTMLElement;
+ title.appendChild(
+ document.createTextNode('Query predictions for "' + request.input + '":')
+ );
+
+ const resultsElement = document.getElementById("results") as HTMLElement;
+
+ for (let suggestion of suggestions) {
+ const placePrediction = suggestion.placePrediction;
+
+ // Create a new list element.
+ const listItem = document.createElement("li");
+
+ listItem.appendChild(
+ document.createTextNode(placePrediction!.text.toString())
+ );
+ resultsElement.appendChild(listItem);
+ }
+ // [END maps_place_autocomplete_data_simple_get_suggestions]
+
+ // [START maps_place_autocomplete_data_simple_prediction]
+ let place = suggestions[0].placePrediction!.toPlace(); // Get first predicted place.
+ // [START maps_place_autocomplete_data_simple_fetch]
+ await place.fetchFields({
+ fields: ["displayName", "formattedAddress"],
+ });
+ // [END maps_place_autocomplete_data_simple_fetch]
+
+ const placeInfo = document.getElementById("prediction") as HTMLElement;
+ placeInfo.textContent =
+ `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
+ // [END maps_place_autocomplete_data_simple_prediction]
+}
+
+init();
+// [END maps_place_autocomplete_data_simple]
diff --git a/samples/place-autocomplete-data-simple/package.json b/samples/place-autocomplete-data-simple/package.json
new file mode 100644
index 00000000..8816dec1
--- /dev/null
+++ b/samples/place-autocomplete-data-simple/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@js-api-samples/place-autocomplete-data-simple",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "tsc && bash ../jsfiddle.sh place-autocomplete-data-simple && bash ../app.sh place-autocomplete-data-simple && bash ../docs.sh place-autocomplete-data-simple && npm run build:vite --workspace=. && bash ../dist.sh place-autocomplete-data-simple",
+ "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-simple/public/powered_by_google_on_white.png b/samples/place-autocomplete-data-simple/public/powered_by_google_on_white.png
new file mode 100644
index 00000000..4d2c6693
Binary files /dev/null and b/samples/place-autocomplete-data-simple/public/powered_by_google_on_white.png differ
diff --git a/samples/place-autocomplete-data-simple/style.css b/samples/place-autocomplete-data-simple/style.css
new file mode 100644
index 00000000..71717471
--- /dev/null
+++ b/samples/place-autocomplete-data-simple/style.css
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_place_autocomplete_data_simple] */
+/*
+ * 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;
+}
+
+/* [END maps_place_autocomplete_data_simple] */
diff --git a/samples/place-autocomplete-data-simple/tsconfig.json b/samples/place-autocomplete-data-simple/tsconfig.json
new file mode 100644
index 00000000..366aabb0
--- /dev/null
+++ b/samples/place-autocomplete-data-simple/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"
+ }
+}