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.

POI Click Events

  • This example showcases how to use click event listeners on Points of Interest (POIs) on a Google Map.

  • When a POI icon is clicked, the code calculates and displays a route from a predefined origin to the clicked POI using the Directions Service.

  • It also retrieves and displays detailed information about the clicked POI, such as name, address, and place ID, in an info window.

  • The example prevents the default info window from showing and uses event.stop() to manage click behavior.

This example demonstrates the use of click event listeners on POIs (points of interest). It listens for the click event on the basemap, and shows an info window if a place ID is present in the event. The click event listener uses event.stop() to prevent the default POI info window from showing.

Read the documentation.

[フレーム]

TypeScript

letinnerMap:google.maps.Map;
asyncfunctioninit(){
// Request the needed libraries.
voidgoogle.maps.importLibrary('core');// preload
const{InfoWindow}=awaitgoogle.maps.importLibrary('maps');
// Retrieve the map element.
constmapElement=document.querySelector('gmp-map')!;
// Get the inner map from the map element.
innerMap=mapElement.innerMap;
// Create the initial info window.
constinfoWindow=newInfoWindow();
// Add a listener for click events on the map.
innerMap.addListener(
'click',
(event:google.maps.MapMouseEvent|google.maps.IconMouseEvent)=>{
// Prevent the default POI info window from showing.
event.stop();
// If the event has a placeId, show the info window.
if(isIconMouseEvent(event) && event.placeId){
voidshowInfoWindow(event,infoWindow);
}else{
// Close the info window if there is no placeId.
infoWindow.close();
}
}
);
}
// Helper function to show the info window.
asyncfunctionshowInfoWindow(
event:google.maps.IconMouseEvent,
infoWindow:google.maps.InfoWindow
){
if(!event.placeId)return;
const{Size}=awaitgoogle.maps.importLibrary('core');
// Retrieve the place details for the selected POI.
constplace=awaitgetPlaceDetails(event.placeId);
// Assemble the info window content.
constcontent=document.createElement('div');
constaddress=document.createElement('div');
constplaceId=document.createElement('div');
address.textContent=place.formattedAddress||'';
placeId.textContent=place.id||'';
content.append(address,placeId);
// Create an element to use the place name as header content.
constname=document.createElement('div');
name.style.fontWeight='bold';
name.style.fontSize='medium';
name.textContent=place.displayName||'';
// Update info window options.
infoWindow.setOptions({
position:event.latLng,
pixelOffset:newSize(0,-30),
headerContent:name,
content,
});
innerMap.panTo(event.latLng!);
infoWindow.open(innerMap);
}
// Helper function to get place details.
asyncfunctiongetPlaceDetails(placeId:string){
// Import the Places library.
const{Place}=awaitgoogle.maps.importLibrary('places');
// Create a Place instance with the place id and fetch the details.
constplace=newPlace({id:placeId});
awaitplace.fetchFields({
fields:['displayName','formattedAddress'],
});
// Return the place details.
returnplace;
}
// Helper type guard to determine if the event is an IconMouseEvent.
functionisIconMouseEvent(
e:google.maps.MapMouseEvent|google.maps.IconMouseEvent
):eisgoogle.maps.IconMouseEvent{
return'placeId'ine;
}
voidinit();

JavaScript

letinnerMap;
asyncfunctioninit(){
// Request the needed libraries.
voidgoogle.maps.importLibrary('core');// preload
const{InfoWindow}=awaitgoogle.maps.importLibrary('maps');
// Retrieve the map element.
constmapElement=document.querySelector('gmp-map');
// Get the inner map from the map element.
innerMap=mapElement.innerMap;
// Create the initial info window.
constinfoWindow=newInfoWindow();
// Add a listener for click events on the map.
innerMap.addListener('click',(event)=>{
// Prevent the default POI info window from showing.
event.stop();
// If the event has a placeId, show the info window.
if(isIconMouseEvent(event) && event.placeId){
voidshowInfoWindow(event,infoWindow);
}else{
// Close the info window if there is no placeId.
infoWindow.close();
}
});
}
// Helper function to show the info window.
asyncfunctionshowInfoWindow(event,infoWindow){
if(!event.placeId)return;
const{Size}=awaitgoogle.maps.importLibrary('core');
// Retrieve the place details for the selected POI.
constplace=awaitgetPlaceDetails(event.placeId);
// Assemble the info window content.
constcontent=document.createElement('div');
constaddress=document.createElement('div');
constplaceId=document.createElement('div');
address.textContent=place.formattedAddress||'';
placeId.textContent=place.id||'';
content.append(address,placeId);
// Create an element to use the place name as header content.
constname=document.createElement('div');
name.style.fontWeight='bold';
name.style.fontSize='medium';
name.textContent=place.displayName||'';
// Update info window options.
infoWindow.setOptions({
position:event.latLng,
pixelOffset:newSize(0,-30),
headerContent:name,
content,
});
innerMap.panTo(event.latLng);
infoWindow.open(innerMap);
}
// Helper function to get place details.
asyncfunctiongetPlaceDetails(placeId){
// Import the Places library.
const{Place}=awaitgoogle.maps.importLibrary('places');
// Create a Place instance with the place id and fetch the details.
constplace=newPlace({id:placeId});
awaitplace.fetchFields({
fields:['displayName','formattedAddress'],
});
// Return the place details.
returnplace;
}
// Helper type guard to determine if the event is an IconMouseEvent.
functionisIconMouseEvent(e){
return'placeId'ine;
}
voidinit();

CSS

/* Optional: Makes the sample page fill the window. */
html,
body{
height:100%;
margin:0;
padding:0;
}
.title{
font-weight:bold;
}

HTML

<html>
 <head>
 <title>POI Click Events</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="-33.871, 151.197" zoom="18"> </gmp-map>
 </body>
</html>

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. 

gitclonehttps://github.com/googlemaps-samples/js-api-samples.git
cdsamples/event-poi
npmi
npmstart

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.