This example demonstrates the use of click event listeners on POIs
(points of interest). It listens for the click
event on a POI
icon and then uses the
placeId
from the event data with a directionsService.route
request to calculate and display a route to the clicked place. It also uses
the placeId
to get more details of the place.
Read the documentation or view this example fullscreen.
function initMap() { var origin = {lat: -33.871, lng: 151.197}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 18, center: origin }); var clickHandler = new ClickEventHandler(map, origin); } /** * @constructor */ var ClickEventHandler = function(map, origin) { this.origin = origin; this.map = map; this.directionsService = new google.maps.DirectionsService; this.directionsDisplay = new google.maps.DirectionsRenderer; this.directionsDisplay.setMap(map); this.placesService = new google.maps.places.PlacesService(map); this.infowindow = new google.maps.InfoWindow; this.infowindowContent = document.getElementById('infowindow-content'); this.infowindow.setContent(this.infowindowContent); // Listen for clicks on the map. this.map.addListener('click', this.handleClick.bind(this)); }; ClickEventHandler.prototype.handleClick = function(event) { console.log('You clicked on: ' + event.latLng); // If the event has a placeId, use it. if (event.placeId) { console.log('You clicked on place:' + event.placeId); // Calling e.stop() on the event prevents the default info window from // showing. // If you call stop here when there is no placeId you will prevent some // other map click event handlers from receiving the event. event.stop(); this.calculateAndDisplayRoute(event.placeId); this.getPlaceInformation(event.placeId); } }; ClickEventHandler.prototype.calculateAndDisplayRoute = function(placeId) { var me = this; this.directionsService.route({ origin: this.origin, destination: {placeId: placeId}, travelMode: 'WALKING' }, function(response, status) { if (status === 'OK') { me.directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); }; ClickEventHandler.prototype.getPlaceInformation = function(placeId) { var me = this; this.placesService.getDetails({placeId: placeId}, function(place, status) { if (status === 'OK') { me.infowindow.close(); me.infowindow.setPosition(place.geometry.location); me.infowindowContent.children['place-icon'].src = place.icon; me.infowindowContent.children['place-name'].textContent = place.name; me.infowindowContent.children['place-id'].textContent = place.place_id; me.infowindowContent.children['place-address'].textContent = place.formatted_address; me.infowindow.open(me.map); } }); };
<div id="map"></div> <div id="infowindow-content"> <img id="place-icon" src="" height="16" width="16"> <span id="place-name" class="title"></span><br> Place ID <span id="place-id"></span><br> <span id="place-address"></span> </div>
/* 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; } .title { font-weight: bold; } #infowindow-content { display: none; } #map #infowindow-content { display: inline; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap"> </script>
Try it yourself
You can experiment with this code in JSFiddle by clicking the <>
icon in the
top-right corner of the code window.
<!DOCTYPE html> <html> <head> <title>POI Click Events</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* 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; } .title { font-weight: bold; } #infowindow-content { display: none; } #map #infowindow-content { display: inline; } </style> </head> <body> <div id="map"></div> <div id="infowindow-content"> <img id="place-icon" src="" height="16" width="16"> <span id="place-name" class="title"></span><br> Place ID <span id="place-id"></span><br> <span id="place-address"></span> </div> <script> function initMap() { var origin = {lat: -33.871, lng: 151.197}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 18, center: origin }); var clickHandler = new ClickEventHandler(map, origin); } /** * @constructor */ var ClickEventHandler = function(map, origin) { this.origin = origin; this.map = map; this.directionsService = new google.maps.DirectionsService; this.directionsDisplay = new google.maps.DirectionsRenderer; this.directionsDisplay.setMap(map); this.placesService = new google.maps.places.PlacesService(map); this.infowindow = new google.maps.InfoWindow; this.infowindowContent = document.getElementById('infowindow-content'); this.infowindow.setContent(this.infowindowContent); // Listen for clicks on the map. this.map.addListener('click', this.handleClick.bind(this)); }; ClickEventHandler.prototype.handleClick = function(event) { console.log('You clicked on: ' + event.latLng); // If the event has a placeId, use it. if (event.placeId) { console.log('You clicked on place:' + event.placeId); // Calling e.stop() on the event prevents the default info window from // showing. // If you call stop here when there is no placeId you will prevent some // other map click event handlers from receiving the event. event.stop(); this.calculateAndDisplayRoute(event.placeId); this.getPlaceInformation(event.placeId); } }; ClickEventHandler.prototype.calculateAndDisplayRoute = function(placeId) { var me = this; this.directionsService.route({ origin: this.origin, destination: {placeId: placeId}, travelMode: 'WALKING' }, function(response, status) { if (status === 'OK') { me.directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); }; ClickEventHandler.prototype.getPlaceInformation = function(placeId) { var me = this; this.placesService.getDetails({placeId: placeId}, function(place, status) { if (status === 'OK') { me.infowindow.close(); me.infowindow.setPosition(place.geometry.location); me.infowindowContent.children['place-icon'].src = place.icon; me.infowindowContent.children['place-name'].textContent = place.name; me.infowindowContent.children['place-id'].textContent = place.place_id; me.infowindowContent.children['place-address'].textContent = place.formatted_address; me.infowindow.open(me.map); } }); }; </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script> </body> </html>