googlemaps-samples · willum070 · Jan 9, 2026 · Jan 8, 2026 · Jan 8, 2026
diff --git a/samples/layer-data-event/README.md 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
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_layer_data_event] -->
+<html>
+    <head>
+        <title>Data Layer: Event Handling</title>
+
+        <link rel="stylesheet" type="text/css" href="./style.css" />
+        <script type="module" src="./index.js"></script>
+        <!-- prettier-ignore -->
+        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
+        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
+    </head>
+    <body>
+        <gmp-map center="-28,137" zoom="4"></gmp-map>
+        <div id="info-box">?</div>
+    </body>
+</html>
+<!-- [END maps_layer_data_event] -->
diff --git a/samples/layer-data-event/index.ts b/samples/layer-data-event/index.ts
@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_layer_data_event]
+let map: google.maps.Map;
+
+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;
+
+    // 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]
+}
+
+initMap();
+// [END maps_layer_data_event]
diff --git a/samples/layer-data-event/package.json 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/public/google.json 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]
+          ]
+        ]
+      }
+    }
+  ]
+}
diff --git a/samples/layer-data-event/style.css b/samples/layer-data-event/style.css
@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2026 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] */
diff --git a/samples/layer-data-event/tsconfig.json 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"
+  }
+}