From 8d70f3520c628d09f5b7fa41573a38145c0d5570 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 8 Jan 2026 07:11:29 -0800 Subject: [PATCH 1/2] feat: Migrates the layer-data-event sample. --- samples/layer-data-event/README.md | 41 +++++++++++++++++++++++ samples/layer-data-event/index.html | 32 ++++++++++++++++++ samples/layer-data-event/index.ts | 45 ++++++++++++++++++++++++++ samples/layer-data-event/package.json | 14 ++++++++ samples/layer-data-event/style.css | 35 ++++++++++++++++++++ samples/layer-data-event/tsconfig.json | 17 ++++++++++ 6 files changed, 184 insertions(+) create mode 100644 samples/layer-data-event/README.md create mode 100644 samples/layer-data-event/index.html create mode 100644 samples/layer-data-event/index.ts create mode 100644 samples/layer-data-event/package.json create mode 100644 samples/layer-data-event/style.css create mode 100644 samples/layer-data-event/tsconfig.json diff --git a/samples/layer-data-event/README.md b/samples/layer-data-event/README.md new file mode 100644 index 00000000..010d7ef3 --- /dev/null +++ b/samples/layer-data-event/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## layer-data-event + +This example uses a data layer to dynamically display information about a KML feature object when under the mouse cursor. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/layer-data-event` +`npm start` + +### Build an individual example + +`cd samples/layer-data-event` +`npm run build` + +From 'samples': + +`npm run build --workspace=layer-data-event/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/layer-data-event` +`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/layer-data-event/index.html b/samples/layer-data-event/index.html new file mode 100644 index 00000000..143fe003 --- /dev/null +++ b/samples/layer-data-event/index.html @@ -0,0 +1,32 @@ + + + + + + Data Layer: Event Handling + + + + + +
+
?
+ + + + + + diff --git a/samples/layer-data-event/index.ts b/samples/layer-data-event/index.ts new file mode 100644 index 00000000..1293e85f --- /dev/null +++ b/samples/layer-data-event/index.ts @@ -0,0 +1,45 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_layer_data_event] +let map: google.maps.Map; + +function initMap(): void { + map = new google.maps.Map(document.getElementById("map") as HTMLElement, { + zoom: 4, + center: { lat: -28, lng: 137 }, + }); + + // Load GeoJSON. + map.data.loadGeoJson( + "https://storage.googleapis.com/maps-devrel/google.json" + ); + + // Add some style. + map.data.setStyle((feature) => { + return /** @type {google.maps.Data.StyleOptions} */ { + fillColor: feature.getProperty("color") as string, + strokeWeight: 1, + }; + }); + + // [START maps_layer_data_event_snippet] + // Set mouseover event for each feature. + map.data.addListener("mouseover", (event) => { + (document.getElementById("info-box") as HTMLElement).textContent = + event.feature.getProperty("letter"); + }); + // [END maps_layer_data_event_snippet] +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +// [END maps_layer_data_event] +export {}; diff --git a/samples/layer-data-event/package.json b/samples/layer-data-event/package.json new file mode 100644 index 00000000..b0848a4e --- /dev/null +++ b/samples/layer-data-event/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/layer-data-event", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh layer-data-event && bash ../app.sh layer-data-event && bash ../docs.sh layer-data-event && npm run build:vite --workspace=. && bash ../dist.sh layer-data-event", + "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/layer-data-event/style.css b/samples/layer-data-event/style.css new file mode 100644 index 00000000..01197e3e --- /dev/null +++ b/samples/layer-data-event/style.css @@ -0,0 +1,35 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_layer_data_event] */ +/* + * 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; +} + +#info-box { + background-color: white; + border: 1px solid black; + bottom: 30px; + height: 20px; + padding: 10px; + position: absolute; + left: 30px; +} + +/* [END maps_layer_data_event] */ \ No newline at end of file diff --git a/samples/layer-data-event/tsconfig.json b/samples/layer-data-event/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/layer-data-event/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" + } +} From 74dee7a787e0f9a42712c4a2540ef80694bace4e Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 8 Jan 2026 07:21:58 -0800 Subject: [PATCH 2/2] feat: Updates layer-data-event to current standards. --- samples/layer-data-event/index.html | 37 ++--- samples/layer-data-event/index.ts | 63 ++++----- samples/layer-data-event/public/google.json | 146 ++++++++++++++++++++ samples/layer-data-event/style.css | 26 ++-- 4 files changed, 202 insertions(+), 70 deletions(-) create mode 100644 samples/layer-data-event/public/google.json diff --git a/samples/layer-data-event/index.html b/samples/layer-data-event/index.html index 143fe003..2e33ab83 100644 --- a/samples/layer-data-event/index.html +++ b/samples/layer-data-event/index.html @@ -1,32 +1,23 @@ - + - - Data Layer: Event Handling + + Data Layer: Event Handling - - - - -
-
?
- - - - + + + + + + + +
?
+ diff --git a/samples/layer-data-event/index.ts b/samples/layer-data-event/index.ts index 1293e85f..b94b5835 100644 --- a/samples/layer-data-event/index.ts +++ b/samples/layer-data-event/index.ts @@ -1,45 +1,40 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ // [START maps_layer_data_event] let map: google.maps.Map; -function initMap(): void { - map = new google.maps.Map(document.getElementById("map") as HTMLElement, { - zoom: 4, - center: { lat: -28, lng: 137 }, - }); - - // Load GeoJSON. - map.data.loadGeoJson( - "https://storage.googleapis.com/maps-devrel/google.json" - ); - - // Add some style. - map.data.setStyle((feature) => { - return /** @type {google.maps.Data.StyleOptions} */ { - fillColor: feature.getProperty("color") as string, - strokeWeight: 1, - }; - }); - - // [START maps_layer_data_event_snippet] - // Set mouseover event for each feature. - map.data.addListener("mouseover", (event) => { - (document.getElementById("info-box") as HTMLElement).textContent = - event.feature.getProperty("letter"); - }); - // [END maps_layer_data_event_snippet] -} +async function initMap() { + (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary; + + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + const innerMap = mapElement.innerMap; -declare global { - interface Window { - initMap: () => void; - } + // Load GeoJSON. + innerMap.data.loadGeoJson('google.json'); + + // Add some style. + innerMap.data.setStyle((feature) => { + return /** @type {google.maps.Data.StyleOptions} */ { + fillColor: feature.getProperty('color') as string, + strokeWeight: 1, + }; + }); + + // [START maps_layer_data_event_snippet] + // Set mouseover event for each feature. + innerMap.data.addListener('mouseover', (event) => { + (document.getElementById('info-box') as HTMLElement).textContent = + event.feature.getProperty('letter'); + }); + // [END maps_layer_data_event_snippet] } -window.initMap = initMap; + +initMap(); // [END maps_layer_data_event] -export {}; diff --git a/samples/layer-data-event/public/google.json b/samples/layer-data-event/public/google.json new file mode 100644 index 00000000..be2f35f7 --- /dev/null +++ b/samples/layer-data-event/public/google.json @@ -0,0 +1,146 @@ +{ + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "letter": "G", + "color": "blue", + "rank": "7", + "ascii": "71" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40], + [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49], + [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70], + [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62], + [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18], + [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50], + [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48], + [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "letter": "o", + "color": "red", + "rank": "15", + "ascii": "111" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60], + [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42], + [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95], + [129.68, -27.21], [129.33, -26.23], [128.84, -25.76] + ], + [ + [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80], + [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "letter": "o", + "color": "yellow", + "rank": "15", + "ascii": "111" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53], + [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34], + [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83], + [132.71, -25.64], [131.87, -25.76] + ], + [ + [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26], + [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "letter": "g", + "color": "blue", + "rank": "7", + "ascii": "103" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90], + [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49], + [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36], + [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76], + [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24], + [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47], + [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04] + ], + [ + [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72], + [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "letter": "l", + "color": "green", + "rank": "12", + "ascii": "108" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "letter": "e", + "color": "red", + "rank": "5", + "ascii": "101" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04], + [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40], + [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57], + [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42], + [144.31, -28.26], [144.14, -27.41] + ], + [ + [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91], + [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39] + ] + ] + } + } + ] +} \ No newline at end of file diff --git a/samples/layer-data-event/style.css b/samples/layer-data-event/style.css index 01197e3e..31e8ebf7 100644 --- a/samples/layer-data-event/style.css +++ b/samples/layer-data-event/style.css @@ -1,6 +1,6 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_layer_data_event] */ @@ -9,7 +9,7 @@ * that contains the map. */ #map { - height: 100%; + height: 100%; } /* @@ -17,19 +17,19 @@ */ html, body { - height: 100%; - margin: 0; - padding: 0; + height: 100%; + margin: 0; + padding: 0; } #info-box { - background-color: white; - border: 1px solid black; - bottom: 30px; - height: 20px; - padding: 10px; - position: absolute; - left: 30px; + background-color: white; + border: 1px solid black; + bottom: 30px; + height: 20px; + padding: 10px; + position: absolute; + left: 30px; } -/* [END maps_layer_data_event] */ \ No newline at end of file +/* [END maps_layer_data_event] */