Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>POI Events</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOW7b0eVJzLBlTz1eY9XP04VJ48C_uaMQ&v=3.exp&libraries=places"></script>
<script>
  function initialize() {
    var origin = {lat: -33.871, lng: 151.197};
​
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 18,
      center: origin,
      styles: [
        {
          featureType: 'all',
          stylers: [
            { visibility: 'on' }
          ]
        }
      ]
​
    });
    var clickHandler = new ClickEventHandler(map, origin);
  }
​
  var ClickEventHandler = function(map, origin) {
    this.origin = origin;
    this.map = map;
    this.directionsService = new google.maps.DirectionsService;
    this.directionsDisplay = new google.maps.DirectionsRenderer;
    this.infowindow = new google.maps.InfoWindow;
    this.directionsDisplay.setMap(map);
    this.placesService = new google.maps.places.PlacesService(map);
​
    // 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.infowindow.setContent(
          '<div><img src="' + place.icon + '" height="16" width="16"> '
          + '<strong>' + place.name + '</strong><br>' + 'Place ID: '
          + place.place_id + '<br>' + place.formatted_address + '</div>');
        me.infowindow.open(me.map);
      }
    });
  };
</script>
</head>
<body onload="initialize()">
  <div id="map"></div>
</body>
</html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
susipro
0viewers