POI click Event
HTML
<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>
<!-- 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>
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;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
JavaScript
function initMap() {
var origin = {lat: -33.871, lng: 151.197};
var clicks = 0;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: origin,
disableDoubleClickZoom: true
});
/**
* @constructor
*/
map.addListener('click', handleClick);
//map.addListener('mousemove', handleHover);
map.addListener('dblclick', handleDBLClick);
function handleDBLClick(event) {
click++;
console.log('~double click~');
console.log(click);
console.log(event);
}
function handleClick(event) {
click = 1;
console.log('******NEW EVENT TRIGGERED*****');
console.log('~single click~');
console.log(click);
// If the event has a placeId, use it.
if (event.placeId) {
console.log('___you clicked on place___');
}else{
console.log('___you did NOT click on a place ___');
}
console.log(event);
}
//function getPlaceInformation(placeId) {
// var service = new google.maps.places.PlacesService(map);
// service.getDetails({placeId: placeId}, function(place, status) {
// if (status === 'OK') {
// console.log(place);
// }
// });
//}
}