Detailed Place Information

Request detailed information about a place marked on the map selected using a mouse click

HTML

<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-places.js"></script>

<!-- BODY -->
<h1>Detailed Place Information</h1>
<p><div>This example searches for places to eat (i.e. within the <code>eat-drink</code> category) close to the <b>Chinatown</b> district of <b>San Francisco</b> <i>(37.7942</i><i>°N,</i><i>-122.4070</i><i>°W</i><i>)</i>. The response contains places links and those links are rendered on the map as markers. All Places API's Search &amp; Discovery entrypoints return place links with a function for easy access to place details. On place link click, user triggers this function and returns place details inside a panel. For more information about place details responses visit <a target="_blank" rel="nofollow" href="http://developer.here.com/rest-apis/documentation/places/topics_api/media-type-search-results.html">Places API Documentation</a>.</div><div><br></div></p>
<hr/>
<div id="map" style="width: 600px; height: 300px; background: grey;" ></div>
<hr/>
<div id="panel" style="width: 600px; "></div>

CSS

code, h1, h2, h3{
  color: #124191;
  letter-spacing: -0.03em;
}
body {
  font-family:"Lucida Grande",Tahoma,sans-serif;
  color: rgb(102, 102, 102);
  font-size: 80%;
}
b, strong {
  color: black;
}
code {
  font-weight: 700;
  font-size: 120%;
}

JavaScript

/**
 * This example searches for places to eat in the Chinatown district of San Francisco
 * (37.7942N, 122.4070W). The response contains places links and those links are rendered
 * on the map as markers.
 *
 * When a marker is clicked, the user triggers the follow function and full place details
 * are displayed in the panel on the right.
 *
 * Note that the places module https://js.api.here.com/v3/3.0/mapsjs-places.js
 * must be loaded to use the Places API endpoints
 *
 * A full list of available request parameters can be found in the Places API documentation.
 * see:  http://developer.here.com/rest-apis/documentation/places/topics_api/resource-explore.html
 *
 * @param   {H.service.Platform} platform    A stub class to access HERE services
 */
function exploreRequest(platform) {
  var explore = new H.places.Explore(platform.getPlacesService());
  var params = {
    'cat': 'eat-drink',
    'in': '37.7942,-122.4070;r=500'
  };

  explore.request(params, {}, onResult, onError);
}


/**
 * This function will be called once the Explore request provides a response
 * @param  {Object} result    A JSONP object representing result of Explore request
 *
 * see: http://developer.here.com/rest-apis/documentation/places/topics_api/media-type-search.html
 */
function onResult(result) {
  addPlaceLinksToMap(result.results.items);
  addPlacesToPanel(result.results.items);
}


/**
 * This function will be called once user clicks on the marker
 * @param  {Object} placeLink    A JSONP object representing place link
 *
 * see: http://developer.here.com/rest-apis/documentation/places/topics_api/object-link.html#place-link
 */
function onPlaceDetailLinkClick(placeLink) {
  /*
   * Follow method on place link is used to create new request that will fetch
   * additional place details.
   */
  placeLink.follow(onPlaceDetailResult, onError);
}


/**
 * This function will be called once the follow method provides a place details response
 * @param  {Object} placeDetails    A JSONP...