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 @@ + + + + + + Place Autocomplete Data API Predictions + + + + + + + + +
+ +

+ Powered by Google + + + + + 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" + } +}