diff --git a/dist/index.html b/dist/index.html index fb0b71f2..1dc994f7 100644 --- a/dist/index.html +++ b/dist/index.html @@ -48,6 +48,7 @@

Maps JSAPI Samples

  • advanced-markers-zoom
  • boundaries-choropleth
  • boundaries-simple
    • +
  • boundaries-text-search
  • deckgl-heatmap
  • deckgl-kml
  • deckgl-kml-updated
    • diff --git a/dist/samples/boundaries-text-search/app/.eslintsrc.json b/dist/samples/boundaries-text-search/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/boundaries-text-search/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/boundaries-text-search/app/README.md b/dist/samples/boundaries-text-search/app/README.md new file mode 100644 index 00000000..6699fa80 --- /dev/null +++ b/dist/samples/boundaries-text-search/app/README.md @@ -0,0 +1,40 @@ +# 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 + +`cd samples/boundaries-text-search` +`npm start` + +### Build an individual example + +`cd samples/boundaries-text-search` +`npm run build` + +From 'samples': + +`npm run build --workspace=boundaries-text-search/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/boundaries-text-search` +`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/dist/samples/boundaries-text-search/app/index.html b/dist/samples/boundaries-text-search/app/index.html new file mode 100644 index 00000000..f7782a3a --- /dev/null +++ b/dist/samples/boundaries-text-search/app/index.html @@ -0,0 +1,22 @@ + + + + + + Boundaries Text Search + + + + + + + + + + + diff --git a/dist/samples/boundaries-text-search/app/index.ts b/dist/samples/boundaries-text-search/app/index.ts new file mode 100644 index 00000000..a40c70cd --- /dev/null +++ b/dist/samples/boundaries-text-search/app/index.ts @@ -0,0 +1,73 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_boundaries_text_search] +let innerMap; +let featureLayer; +let center; + +async function initMap() { + // Load the needed libraries. + await google.maps.importLibrary('maps') as google.maps.MapsLibrary; + + center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA + + // Get the gmp-map element. + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + // Get the inner map. + innerMap = mapElement.innerMap; + + // Get the LOCALITY feature layer. + featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY); + + findBoundary(); +} +// [START maps_boundaries_text_search_find_region] +async function findBoundary() { + const request = { + textQuery: 'Trinidad, CA', + fields: ['id', 'location'], + includedType: 'locality', + locationBias: center, + }; + + const { Place } = (await google.maps.importLibrary( + 'places' + )) as google.maps.PlacesLibrary; + const { places } = await Place.searchByText(request); + + if (places.length) { + const place = places[0]; + styleBoundary(place.id); + innerMap.setCenter(place.location); + } else { + console.log('No results'); + } +} + +function styleBoundary(placeid) { + // Define a style of transparent purple with opaque stroke. + const styleFill = { + strokeColor: '#810FCB', + strokeOpacity: 1.0, + strokeWeight: 3.0, + fillColor: '#810FCB', + fillOpacity: 0.5, + }; + + // Define the feature style function. + featureLayer.style = (params) => { + if (params.feature.placeId == placeid) { + return styleFill; + } + }; +} +// [END maps_boundaries_text_search_find_region] +initMap(); +// [END maps_boundaries_text_search] diff --git a/dist/samples/boundaries-text-search/app/package.json b/dist/samples/boundaries-text-search/app/package.json new file mode 100644 index 00000000..3ee25785 --- /dev/null +++ b/dist/samples/boundaries-text-search/app/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/boundaries-text-search", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh boundaries-text-search && bash ../app.sh boundaries-text-search && bash ../docs.sh boundaries-text-search && npm run build:vite --workspace=. && bash ../dist.sh boundaries-text-search", + "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/boundaries-text-search/app/style.css b/dist/samples/boundaries-text-search/app/style.css new file mode 100644 index 00000000..24189bbd --- /dev/null +++ b/dist/samples/boundaries-text-search/app/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_boundaries_text_search] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_boundaries_text_search] */ \ No newline at end of file diff --git a/dist/samples/boundaries-text-search/app/tsconfig.json b/dist/samples/boundaries-text-search/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/boundaries-text-search/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/boundaries-text-search/dist/assets/index-Bi-eZjfD.js b/dist/samples/boundaries-text-search/dist/assets/index-Bi-eZjfD.js new file mode 100644 index 00000000..b48e0e4e --- /dev/null +++ b/dist/samples/boundaries-text-search/dist/assets/index-Bi-eZjfD.js @@ -0,0 +1,5 @@ +(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&n(s)}).observe(document,{childList:!0,subtree:!0});function o(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 n(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */let l,c,a;async function u(){await google.maps.importLibrary("maps"),a={lat:41.059,lng:-124.151},l=document.querySelector("gmp-map").innerMap,c=l.getFeatureLayer(google.maps.FeatureType.LOCALITY),f()}async function f(){const i={textQuery:"Trinidad, CA",fields:["id","location"],includedType:"locality",locationBias:a},{Place:r}=await google.maps.importLibrary("places"),{places:o}=await r.searchByText(i);if(o.length){const n=o[0];p(n.id),l.setCenter(n.location)}else console.log("No results")}function p(i){const r={strokeColor:"#810FCB",strokeOpacity:1,strokeWeight:3,fillColor:"#810FCB",fillOpacity:.5};c.style=o=>{if(o.feature.placeId==i)return r}}u(); diff --git a/dist/samples/boundaries-text-search/dist/assets/index-i_98oPIq.css b/dist/samples/boundaries-text-search/dist/assets/index-i_98oPIq.css new file mode 100644 index 00000000..c48393ed --- /dev/null +++ b/dist/samples/boundaries-text-search/dist/assets/index-i_98oPIq.css @@ -0,0 +1,5 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/boundaries-text-search/dist/index.html b/dist/samples/boundaries-text-search/dist/index.html new file mode 100644 index 00000000..b6d2d2d1 --- /dev/null +++ b/dist/samples/boundaries-text-search/dist/index.html @@ -0,0 +1,22 @@ + + + + + + Boundaries Text Search + + + + + + + + + + + diff --git a/dist/samples/boundaries-text-search/docs/index.html b/dist/samples/boundaries-text-search/docs/index.html new file mode 100644 index 00000000..f7782a3a --- /dev/null +++ b/dist/samples/boundaries-text-search/docs/index.html @@ -0,0 +1,22 @@ + + + + + + Boundaries Text Search + + + + + + + + + + + diff --git a/dist/samples/boundaries-text-search/docs/index.js b/dist/samples/boundaries-text-search/docs/index.js new file mode 100644 index 00000000..971940c1 --- /dev/null +++ b/dist/samples/boundaries-text-search/docs/index.js @@ -0,0 +1,60 @@ +"use strict"; +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_boundaries_text_search] +let innerMap; +let featureLayer; +let center; +async function initMap() { + // Load the needed libraries. + await google.maps.importLibrary('maps'); + center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA + // Get the gmp-map element. + const mapElement = document.querySelector('gmp-map'); + // Get the inner map. + innerMap = mapElement.innerMap; + // Get the LOCALITY feature layer. + featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY); + findBoundary(); +} +// [START maps_boundaries_text_search_find_region] +async function findBoundary() { + const request = { + textQuery: 'Trinidad, CA', + fields: ['id', 'location'], + includedType: 'locality', + locationBias: center, + }; + const { Place } = (await google.maps.importLibrary('places')); + const { places } = await Place.searchByText(request); + if (places.length) { + const place = places[0]; + styleBoundary(place.id); + innerMap.setCenter(place.location); + } + else { + console.log('No results'); + } +} +function styleBoundary(placeid) { + // Define a style of transparent purple with opaque stroke. + const styleFill = { + strokeColor: '#810FCB', + strokeOpacity: 1.0, + strokeWeight: 3.0, + fillColor: '#810FCB', + fillOpacity: 0.5, + }; + // Define the feature style function. + featureLayer.style = (params) => { + if (params.feature.placeId == placeid) { + return styleFill; + } + }; +} +// [END maps_boundaries_text_search_find_region] +initMap(); +// [END maps_boundaries_text_search] diff --git a/dist/samples/boundaries-text-search/docs/index.ts b/dist/samples/boundaries-text-search/docs/index.ts new file mode 100644 index 00000000..a40c70cd --- /dev/null +++ b/dist/samples/boundaries-text-search/docs/index.ts @@ -0,0 +1,73 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_boundaries_text_search] +let innerMap; +let featureLayer; +let center; + +async function initMap() { + // Load the needed libraries. + await google.maps.importLibrary('maps') as google.maps.MapsLibrary; + + center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA + + // Get the gmp-map element. + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + // Get the inner map. + innerMap = mapElement.innerMap; + + // Get the LOCALITY feature layer. + featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY); + + findBoundary(); +} +// [START maps_boundaries_text_search_find_region] +async function findBoundary() { + const request = { + textQuery: 'Trinidad, CA', + fields: ['id', 'location'], + includedType: 'locality', + locationBias: center, + }; + + const { Place } = (await google.maps.importLibrary( + 'places' + )) as google.maps.PlacesLibrary; + const { places } = await Place.searchByText(request); + + if (places.length) { + const place = places[0]; + styleBoundary(place.id); + innerMap.setCenter(place.location); + } else { + console.log('No results'); + } +} + +function styleBoundary(placeid) { + // Define a style of transparent purple with opaque stroke. + const styleFill = { + strokeColor: '#810FCB', + strokeOpacity: 1.0, + strokeWeight: 3.0, + fillColor: '#810FCB', + fillOpacity: 0.5, + }; + + // Define the feature style function. + featureLayer.style = (params) => { + if (params.feature.placeId == placeid) { + return styleFill; + } + }; +} +// [END maps_boundaries_text_search_find_region] +initMap(); +// [END maps_boundaries_text_search] diff --git a/dist/samples/boundaries-text-search/docs/style.css b/dist/samples/boundaries-text-search/docs/style.css new file mode 100644 index 00000000..24189bbd --- /dev/null +++ b/dist/samples/boundaries-text-search/docs/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_boundaries_text_search] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_boundaries_text_search] */ \ No newline at end of file diff --git a/dist/samples/boundaries-text-search/jsfiddle/demo.css b/dist/samples/boundaries-text-search/jsfiddle/demo.css new file mode 100644 index 00000000..29cd2be7 --- /dev/null +++ b/dist/samples/boundaries-text-search/jsfiddle/demo.css @@ -0,0 +1,24 @@ +/** + * @license + * Copyright 2025 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. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + diff --git a/dist/samples/boundaries-text-search/jsfiddle/demo.details b/dist/samples/boundaries-text-search/jsfiddle/demo.details new file mode 100644 index 00000000..880daa7a --- /dev/null +++ b/dist/samples/boundaries-text-search/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: boundaries-text-search +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/boundaries-text-search/jsfiddle/demo.html b/dist/samples/boundaries-text-search/jsfiddle/demo.html new file mode 100644 index 00000000..0f794f05 --- /dev/null +++ b/dist/samples/boundaries-text-search/jsfiddle/demo.html @@ -0,0 +1,22 @@ + + + + + + Boundaries Text Search + + + + + + + + + + + diff --git a/dist/samples/boundaries-text-search/jsfiddle/demo.js b/dist/samples/boundaries-text-search/jsfiddle/demo.js new file mode 100644 index 00000000..95424316 --- /dev/null +++ b/dist/samples/boundaries-text-search/jsfiddle/demo.js @@ -0,0 +1,60 @@ +"use strict"; +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +let innerMap; +let featureLayer; +let center; +async function initMap() { + // Load the needed libraries. + await google.maps.importLibrary('maps'); + center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA + // Get the gmp-map element. + const mapElement = document.querySelector('gmp-map'); + // Get the inner map. + innerMap = mapElement.innerMap; + // Get the LOCALITY feature layer. + featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY); + findBoundary(); +} + +async function findBoundary() { + const request = { + textQuery: 'Trinidad, CA', + fields: ['id', 'location'], + includedType: 'locality', + locationBias: center, + }; + const { Place } = (await google.maps.importLibrary('places')); + const { places } = await Place.searchByText(request); + if (places.length) { + const place = places[0]; + styleBoundary(place.id); + innerMap.setCenter(place.location); + } + else { + console.log('No results'); + } +} +function styleBoundary(placeid) { + // Define a style of transparent purple with opaque stroke. + const styleFill = { + strokeColor: '#810FCB', + strokeOpacity: 1.0, + strokeWeight: 3.0, + fillColor: '#810FCB', + fillOpacity: 0.5, + }; + // Define the feature style function. + featureLayer.style = (params) => { + if (params.feature.placeId == placeid) { + return styleFill; + } + }; +} + +initMap(); + diff --git a/index.html b/index.html index fb0b71f2..1dc994f7 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,7 @@

    Maps JSAPI Samples

  • advanced-markers-zoom
  • boundaries-choropleth
  • boundaries-simple
    • +
  • boundaries-text-search
  • deckgl-heatmap
  • deckgl-kml
  • deckgl-kml-updated
    • diff --git a/package-lock.json b/package-lock.json index 1fbcc321..1d1380e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1443,6 +1443,10 @@ "resolved": "samples/boundaries-simple", "link": true }, + "node_modules/@js-api-samples/boundaries-text-search": { + "resolved": "samples/boundaries-text-search", + "link": true + }, "node_modules/@js-api-samples/deckgl-heatmap": { "resolved": "samples/deckgl-heatmap", "link": true @@ -8821,6 +8825,10 @@ "name": "@js-api-samples/boundaries-simple", "version": "1.0.0" }, + "samples/boundaries-text-search": { + "name": "@js-api-samples/boundaries-text-search", + "version": "1.0.0" + }, "samples/deckgl-heatmap": { "name": "@js-api-samples/deckgl-heatmap", "version": "1.0.0"