Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Handle mouse events

  • This guide explains how to make Data-driven Styling (DDS) boundaries on a map interactive by responding to mouse clicks and movements.

  • Users can register event listeners for click and mousemove events on a DDS feature layer to trigger custom actions.

  • The example provided demonstrates styling changes and displaying an info window with boundary information upon interaction.

  • It's crucial to set fillOpacity to 0.1 or greater for the default style to enable user interactions with the boundaries.
Select platform: Android iOS JavaScript

Overview

Make a feature layer respond to mousemove and click events, and use them to return information about the boundary that was clicked. This information includes ID, display name, and feature type. The following example map shows the boundaries for Administrative Area Level 2, and has event handling code that styles polygons based on user interaction (mousemove changes the border thickness, click shades the background color and causes an info window to display).

[フレーム]

Enable feature layer events

Take the following steps to enable events on a feature layer:

  1. Register a feature layer for event notifications by calling the addListener() function on the feature layer for each event you want to register. In this example the map also gets a listener.

    TypeScript

    // Add the feature layer.
featureLayer=innerMap.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');
// Add the event listeners for the feature layer.
featureLayer.addListener('click',handleClick);
featureLayer.addListener('mousemove',handleMouseMove);
// Map event listener.
innerMap.addListener('mousemove',()=>{
// If the map gets a mousemove, that means there are no feature layers
// with listeners registered under the mouse, so we clear the last
// interacted feature ids.
if(lastInteractedFeatureIds?.length){
lastInteractedFeatureIds=[];
featureLayer.style=applyStyle;
}
});

    JavaScript

    // Add the feature layer.
featureLayer=innerMap.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');
// Add the event listeners for the feature layer.
featureLayer.addListener('click',handleClick);
featureLayer.addListener('mousemove',handleMouseMove);
// Map event listener.
innerMap.addListener('mousemove',()=>{
// If the map gets a mousemove, that means there are no feature layers
// with listeners registered under the mouse, so we clear the last
// interacted feature ids.
if(lastInteractedFeatureIds?.length){
lastInteractedFeatureIds=[];
featureLayer.style=applyStyle;
}
});

  2. Add event handler code to style the selected polygon based on the type of interaction.

    TypeScript

    functionhandleClick(event:google.maps.FeatureMouseEvent){
lastClickedFeatureIds=event.features.map(
(f)=>(fasgoogle.maps.PlaceFeature).placeId
);
lastInteractedFeatureIds=[];
featureLayer.style=applyStyle;
voidcreateInfoWindow(event);
}
functionhandleMouseMove(event:google.maps.FeatureMouseEvent){
lastInteractedFeatureIds=event.features.map(
(f)=>(fasgoogle.maps.PlaceFeature).placeId
);
featureLayer.style=applyStyle;
}

    JavaScript

    functionhandleClick(event){
lastClickedFeatureIds=event.features.map((f)=>f.placeId);
lastInteractedFeatureIds=[];
featureLayer.style=applyStyle;
voidcreateInfoWindow(event);
}
functionhandleMouseMove(event){
lastInteractedFeatureIds=event.features.map((f)=>f.placeId);
featureLayer.style=applyStyle;
}

  3. Use a feature style function to apply styles. The feature style function shown here conditionally applies style based on the type of interaction. Three styles are defined here: one to make the border bold on mousemove, one to change the background and show an info window on click, and a default style.

    TypeScript

    // Define styles.
// Stroke and fill with minimum opacity value.
conststyleDefault={
strokeColor:'#810FCB',
strokeOpacity:1.0,
strokeWeight:2.0,
fillColor:'white',
fillOpacity:0.1,// Polygons must be visible to receive events.
};
// Style for the clicked polygon.
conststyleClicked={
...styleDefault,
fillColor:'#810FCB',
fillOpacity:0.5,
};
// Style for polygon on mouse move.
conststyleMouseMove={
...styleDefault,
strokeWeight:4.0,
};
// Apply styles using a feature style function.
functionapplyStyle(params:google.maps.FeatureStyleFunctionOptions){
constplaceId=(params.featureasgoogle.maps.PlaceFeature).placeId;
if(lastClickedFeatureIds.includes(placeId)){
returnstyleClicked;
}
if(lastInteractedFeatureIds.includes(placeId)){
returnstyleMouseMove;
}
returnstyleDefault;
}

    JavaScript

    // Define styles.
// Stroke and fill with minimum opacity value.
conststyleDefault={
strokeColor:'#810FCB',
strokeOpacity:1.0,
strokeWeight:2.0,
fillColor:'white',
fillOpacity:0.1,// Polygons must be visible to receive events.
};
// Style for the clicked polygon.
conststyleClicked={
...styleDefault,
fillColor:'#810FCB',
fillOpacity:0.5,
};
// Style for polygon on mouse move.
conststyleMouseMove={
...styleDefault,
strokeWeight:4.0,
};
// Apply styles using a feature style function.
functionapplyStyle(params){
constplaceId=params.feature.placeId;
if(lastClickedFeatureIds.includes(placeId)){
returnstyleClicked;
}
if(lastInteractedFeatureIds.includes(placeId)){
returnstyleMouseMove;
}
returnstyleDefault;
}

Complete example code

TypeScript

letinnerMap:google.maps.Map;
letfeatureLayer:google.maps.FeatureLayer;
letinfoWindow:google.maps.InfoWindow;
letlastInteractedFeatureIds:string[]=[];
letlastClickedFeatureIds:string[]=[];
functionhandleClick(event:google.maps.FeatureMouseEvent){
lastClickedFeatureIds=event.features.map(
(f)=>(fasgoogle.maps.PlaceFeature).placeId
);
lastInteractedFeatureIds=[];
featureLayer.style=applyStyle;
voidcreateInfoWindow(event);
}
functionhandleMouseMove(event:google.maps.FeatureMouseEvent){
lastInteractedFeatureIds=event.features.map(
(f)=>(fasgoogle.maps.PlaceFeature).placeId
);
featureLayer.style=applyStyle;
}
asyncfunctioninit(){
// Request needed libraries.
const{InfoWindow}=awaitgoogle.maps.importLibrary('maps');
// Get the gmp-map element.
constmapElement=document.querySelector('gmp-map')!;
// Get the inner map.
innerMap=mapElement.innerMap;
// Set map options.
innerMap.setOptions({
mapTypeControl:false,
});
// Add the feature layer.
featureLayer=innerMap.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');
// Add the event listeners for the feature layer.
featureLayer.addListener('click',handleClick);
featureLayer.addListener('mousemove',handleMouseMove);
// Map event listener.
innerMap.addListener('mousemove',()=>{
// If the map gets a mousemove, that means there are no feature layers
// with listeners registered under the mouse, so we clear the last
// interacted feature ids.
if(lastInteractedFeatureIds?.length){
lastInteractedFeatureIds=[];
featureLayer.style=applyStyle;
}
});
// Create the infoWindow.
infoWindow=newInfoWindow();
// Apply style on load, to enable clicking.
featureLayer.style=applyStyle;
}
// Helper function for the infoWindow.
asyncfunctioncreateInfoWindow(event:google.maps.FeatureMouseEvent){
constfeature=event.features[0]asgoogle.maps.PlaceFeature;
if(!feature.placeId)return;
// Update the info window.
// Get the place instance from the selected feature.
constplace=awaitfeature.fetchPlace();
// Create a new div to hold the text content.
constcontent=document.createElement('div');
// Get the text values.
constnameText=document.createElement('span');
nameText.textContent=`Display name: ${place.displayName}`;
constplaceIdText=document.createElement('span');
placeIdText.textContent=`Place ID: ${feature.placeId}`;
constfeatureTypeText=document.createElement('span');
featureTypeText.textContent=`Feature type: ${feature.featureType}`;
// Append the text to the div.
content.appendChild(nameText);
content.appendChild(document.createElement('br'));
content.appendChild(placeIdText);
content.appendChild(document.createElement('br'));
content.appendChild(featureTypeText);
updateInfoWindow(content,event.latLng);
}
// Define styles.
// Stroke and fill with minimum opacity value.
conststyleDefault={
strokeColor:'#810FCB',
strokeOpacity:1.0,
strokeWeight:2.0,
fillColor:'white',
fillOpacity:0.1,// Polygons must be visible to receive events.
};
// Style for the clicked polygon.
conststyleClicked={
...styleDefault,
fillColor:'#810FCB',
fillOpacity:0.5,
};
// Style for polygon on mouse move.
conststyleMouseMove={
...styleDefault,
strokeWeight:4.0,
};
// Apply styles using a feature style function.
functionapplyStyle(params:google.maps.FeatureStyleFunctionOptions){
constplaceId=(params.featureasgoogle.maps.PlaceFeature).placeId;
if(lastClickedFeatureIds.includes(placeId)){
returnstyleClicked;
}
if(lastInteractedFeatureIds.includes(placeId)){
returnstyleMouseMove;
}
returnstyleDefault;
}
// Helper function to create an info window.
functionupdateInfoWindow(
content:HTMLElement,
center:google.maps.LatLng|google.maps.LatLngLiteral|null|undefined
){
infoWindow.setContent(content);
infoWindow.setPosition(center);
infoWindow.open({
map:innerMap,
shouldFocus:false,
});
}
voidinit();

JavaScript

letinnerMap;
letfeatureLayer;
letinfoWindow;
letlastInteractedFeatureIds=[];
letlastClickedFeatureIds=[];
functionhandleClick(event){
lastClickedFeatureIds=event.features.map((f)=>f.placeId);
lastInteractedFeatureIds=[];
featureLayer.style=applyStyle;
voidcreateInfoWindow(event);
}
functionhandleMouseMove(event){
lastInteractedFeatureIds=event.features.map((f)=>f.placeId);
featureLayer.style=applyStyle;
}
asyncfunctioninit(){
// Request needed libraries.
const{InfoWindow}=awaitgoogle.maps.importLibrary('maps');
// Get the gmp-map element.
constmapElement=document.querySelector('gmp-map');
// Get the inner map.
innerMap=mapElement.innerMap;
// Set map options.
innerMap.setOptions({
mapTypeControl:false,
});
// Add the feature layer.
featureLayer=innerMap.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');
// Add the event listeners for the feature layer.
featureLayer.addListener('click',handleClick);
featureLayer.addListener('mousemove',handleMouseMove);
// Map event listener.
innerMap.addListener('mousemove',()=>{
// If the map gets a mousemove, that means there are no feature layers
// with listeners registered under the mouse, so we clear the last
// interacted feature ids.
if(lastInteractedFeatureIds?.length){
lastInteractedFeatureIds=[];
featureLayer.style=applyStyle;
}
});
// Create the infoWindow.
infoWindow=newInfoWindow();
// Apply style on load, to enable clicking.
featureLayer.style=applyStyle;
}
// Helper function for the infoWindow.
asyncfunctioncreateInfoWindow(event){
constfeature=event.features[0];
if(!feature.placeId)return;
// Update the info window.
// Get the place instance from the selected feature.
constplace=awaitfeature.fetchPlace();
// Create a new div to hold the text content.
constcontent=document.createElement('div');
// Get the text values.
constnameText=document.createElement('span');
nameText.textContent=`Display name: ${place.displayName}`;
constplaceIdText=document.createElement('span');
placeIdText.textContent=`Place ID: ${feature.placeId}`;
constfeatureTypeText=document.createElement('span');
featureTypeText.textContent=`Feature type: ${feature.featureType}`;
// Append the text to the div.
content.appendChild(nameText);
content.appendChild(document.createElement('br'));
content.appendChild(placeIdText);
content.appendChild(document.createElement('br'));
content.appendChild(featureTypeText);
updateInfoWindow(content,event.latLng);
}
// Define styles.
// Stroke and fill with minimum opacity value.
conststyleDefault={
strokeColor:'#810FCB',
strokeOpacity:1.0,
strokeWeight:2.0,
fillColor:'white',
fillOpacity:0.1,// Polygons must be visible to receive events.
};
// Style for the clicked polygon.
conststyleClicked={
...styleDefault,
fillColor:'#810FCB',
fillOpacity:0.5,
};
// Style for polygon on mouse move.
conststyleMouseMove={
...styleDefault,
strokeWeight:4.0,
};
// Apply styles using a feature style function.
functionapplyStyle(params){
constplaceId=params.feature.placeId;
if(lastClickedFeatureIds.includes(placeId)){
returnstyleClicked;
}
if(lastInteractedFeatureIds.includes(placeId)){
returnstyleMouseMove;
}
returnstyleDefault;
}
// Helper function to create an info window.
functionupdateInfoWindow(content,center){
infoWindow.setContent(content);
infoWindow.setPosition(center);
infoWindow.open({
map:innerMap,
shouldFocus:false,
});
}
voidinit();

CSS

/* 
 * 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;
}

HTML

<html>
 <head>
 <title>Handle Region Boundary Click Event</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 <script>
 // prettier-ignore
 (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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <gmp-map
 center="39.23,-105.73"
 zoom="8"
 map-id="8b37d7206ccf0121a2634fd5"></gmp-map>
 </body>
</html>

Learn more about events

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2026年09月01日 UTC.