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 @@

Maps JSAPI Samples

  • add-map
  • advanced-markers-animation
  • map-simple
  • +
  • place-autocomplete-data-session
  • place-autocomplete-element
  • place-autocomplete-map
  • place-text-search
  • diff --git a/dist/samples/place-autocomplete-data-session/app/.eslintsrc.json b/dist/samples/place-autocomplete-data-session/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ 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 new file mode 100644 index 00000000..385d8923 --- /dev/null +++ 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 new file mode 100644 index 00000000..3fd5df3f --- /dev/null +++ b/dist/samples/place-autocomplete-data-session/app/index.html @@ -0,0 +1,40 @@ + + + + + + Place Autocomplete Data API Session + + + + + + + +
    + + Powered by Google + + + + + + + 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 @@ + + + + + + Place Autocomplete Data API Session + + + + + + + +
    + + Powered by Google + + + + + + + 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 @@ + + + + + + Place Autocomplete Data API Session + + + + + + + +
    + + Powered by Google + + + + + + + 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 @@ + + + + + + Place Autocomplete Data API Session + + + + + + + +
    + + Powered by Google + + + + + + + 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 @@

    Maps JSAPI Samples

  • add-map
  • advanced-markers-animation
  • map-simple
  • +
  • place-autocomplete-data-session
  • place-autocomplete-element
  • place-autocomplete-map
  • place-text-search