Places UI Kit :A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

Data Layer: Event Handling

Page Summary

This example demonstrates dynamically displaying information from a data layer when the mouse hovers over a KML feature object on a Google Map.
It uses GeoJSON data loaded onto the map and styled with custom colors and stroke weights.
A mouseover event listener is added to each feature, triggering the display of a specific property ("letter") in an info box.
The sample includes code in TypeScript and JavaScript, along with HTML and CSS for styling and structure.

This example uses a data layer to dynamically display information about a KML feature object when under the mouse cursor.

Read the documentation .

TypeScript

 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 
 , 
  
 }; 
  
 }); 
  
 // Set mouseover event for each feature. 
  
 innerMap 
 . 
 data 
 . 
 addListener 
 ( 
 'mouseover' 
 , 
  
 ( 
 event 
 ) 
  
 = 
>  
 { 
  
 ( 
 document 
 . 
 getElementById 
 ( 
 'info-box' 
 ) 
  
 as 
  
 HTMLElement 
 ). 
 textContent 
  
 = 
  
 event 
 . 
 feature 
 . 
 getProperty 
 ( 
 'letter' 
 ); 
  
 }); 
 } 
 initMap 
 (); 
   index 
 . 
 ts

JavaScript

 let 
  
 map 
 ; 
 async 
  
 function 
  
 initMap 
 () 
  
 { 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'maps' 
 )); 
  
 const 
  
 mapElement 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
 'gmp-map' 
 ); 
  
 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' 
 ), 
  
 strokeWeight 
 : 
  
 1 
 , 
  
 }; 
  
 }); 
  
 // Set mouseover event for each feature. 
  
 innerMap 
 . 
 data 
 . 
 addListener 
 ( 
 'mouseover' 
 , 
  
 ( 
 event 
 ) 
  
 = 
>  
 { 
  
 document 
 . 
 getElementById 
 ( 
 'info-box' 
 ). 
 textContent 
  
 = 
  
 event 
 . 
 feature 
 . 
 getProperty 
 ( 
 'letter' 
 ); 
  
 }); 
 } 
 initMap 
 (); 
   index 
 . 
 js

CSS

 /* 
 * 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 
 : 
  
 1 
 px 
  
 solid 
  
 black 
 ; 
  
 bottom 
 : 
  
 30 
 px 
 ; 
  
 height 
 : 
  
 20 
 px 
 ; 
  
 padding 
 : 
  
 10 
 px 
 ; 
  
 position 
 : 
  
 absolute 
 ; 
  
 left 
 : 
  
 30 
 px 
 ; 
 } 
   style 
 . 
 css

HTML

<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>  index.html

Try Sample

JSFiddle.net

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

  
  git 
  
 clone 
  
 https 
 : 
 //github.com/googlemaps-samples/js-api-samples.git 
 
  
  cd 
  
 samples 
 / 
 layer 
 - 
 data 
 - 
 event 
 
  
  npm 
  
 i 
 
  
  npm 
  
 start