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

let innerMap;

async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');

    // Retrieve the map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    // Get the inner map from the map element.
    innerMap = mapElement.innerMap;

    // Create the initial info window.
    let infowindow = new google.maps.InfoWindow({});

    // 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) {
            showInfoWindow(event, infowindow);
        } else {
            // Close the info window if there is no placeId.
            infowindow.close();
        }
    });
}

// Helper function to show the info window.
async function showInfoWindow(event: google.maps.IconMouseEvent, infowindow: google.maps.InfoWindow) {
    // Retrieve the place details for the selected POI.
    const place = await getPlaceDetails(event.placeId);

    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = 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.
    const name = 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: new google.maps.Size(0, -30),
        headerContent: name,
        content: content,
    });

    innerMap.panTo(event.latLng);
    infowindow.open(innerMap);
}

// Helper function to get place details.
async function getPlaceDetails(placeId) {
    // Import the Places library.
    const { Place } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;

    // Create a Place instance with the place id and fetch the details.
    const place = new Place({ id: placeId });
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress'],
    });

    // Return the place details.
    return place;
}

// Helper type guard to determine if the event is an IconMouseEvent.
function isIconMouseEvent(
    e: google.maps.MapMouseEvent | google.maps.IconMouseEvent
): e is google.maps.IconMouseEvent {
    return 'placeId' in e;
}

initMap();
index.ts

JavaScript

let innerMap;
async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');
    // Retrieve the map element.
    const mapElement = document.querySelector('gmp-map');
    // Get the inner map from the map element.
    innerMap = mapElement.innerMap;
    // Create the initial info window.
    let infowindow = new google.maps.InfoWindow({});
    // 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) {
            showInfoWindow(event, infowindow);
        }
        else {
            // Close the info window if there is no placeId.
            infowindow.close();
        }
    });
}
// Helper function to show the info window.
async function showInfoWindow(event, infowindow) {
    // Retrieve the place details for the selected POI.
    const place = await getPlaceDetails(event.placeId);
    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = 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.
    const name = 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: new google.maps.Size(0, -30),
        headerContent: name,
        content: content,
    });
    innerMap.panTo(event.latLng);
    infowindow.open(innerMap);
}
// Helper function to get place details.
async function getPlaceDetails(placeId) {
    // Import the Places library.
    const { Place } = (await google.maps.importLibrary('places'));
    // Create a Place instance with the place id and fetch the details.
    const place = new Place({ id: placeId });
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress'],
    });
    // Return the place details.
    return place;
}
// Helper type guard to determine if the event is an IconMouseEvent.
function isIconMouseEvent(e) {
    return 'placeId' in e;
}
initMap();
index.js

CSS

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

.title {
    font-weight: bold;
}

style.css

HTML

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

Try Sample

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/event-poi
  npm i
  npm start