Explore Nearby Places

Request a list of places close to a location and display them on a map

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>Explore Nearby Places</h1>
<p><div>This example identifies places close to a location in 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> For this purpose we are using the <code>here</code> Entrypoint, one of Places API entrypoints, that helps users identify places at a specified location or at a point selected on a map. The results returned included places close to a given point, sorted by distance. For more information on possible parameters and options regarding this entrypoint visit <a target="_blank" rel="nofollow" href="http://developer.here.com/rest-apis/documentation/places/topics_api/resource-here.html">Here Entrypoint Places API documentation</a>.<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 identifies places close to a location in the Chinatown
 * district of San Francisco (37.7942N, 122.4070W)
 * using the here Entrypoint, one of the Places API entrypoints.
 *
 * 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-here.html
 *
 * 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
 *
 * @param   {H.service.Platform} platform    A stub class to access HERE services
 */
function placesNearby(platform) {
  var here = new H.places.Here(platform.getPlacesService());
  // List of parameters passed to the Explore entrypoint
  var params = {
    'at': '37.7942,-122.4070'
  };
  // Creating a here request with parameters and callbacks
  here.request(params, {}, onResult, onError);
}


/**
 * This function will be called once the Places REST API provides a response
 * @param  {Object} result          A JSONP object representing the  location(s) found.
 *
 * see: http://developer.here.com/rest-apis/documentation/places/topics_api/media-type-search.html
 */
function onResult(result) {
  var places = result.results.items;
  /*
   * The styling of the places response on the map is entirely under the developer's control.
   * A representative styling can be found the full JS + HTML code of this example
   * in the functions below:
   */
  addPlacesToMap(places);
  addPlacesToPanel(places);
}


/**
 * Boilerplate map initialization code starts below:
 */


/**
 * This function will be called if a communication error occurs during the JSON-P request
 * @param  {Object} error  The error message received.
 *
 * see: http://developer.here.com/rest-apis/documentation/places/topics_api/object-error.html
 */
function onError(error) {
  error = data;
}


// 1. initialize platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
 ...