index.ts

/**
 * @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]