Explore Popular Places by Category

Request a list of places within a category around 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 Popular Places by Category</h1>
<p>This example uses the <code>explore</code> entrypoint to find places by using categories without typing search queries. It looks for sights and museums (i.e. within the <code>sights-museums</code> category) , around the <b>Brandenburg Gate</b> (52.5159°N, 13.3777°E) in <b>Berlin</b>. For more information about available parameters and options visit <a target="_blank" rel="nofollow" href="http://developer.here.com/rest-apis/documentation/places/topics_api/resource-explore.html">Explore Entrypoint Places API documentation</a>.</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 uses the explore entrypoint to find sights and museums, around the
 * Brandenburg Gate (52.5159°N, 13.3777°E) in Berlin.
 *
 * 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
 *
 * 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 explorePlaces(platform) {
  var explore = new H.places.Explore(platform.getPlacesService());
  var params = {
    'cat': 'sights-museums',
    'in': '52.5159,13.3777;r=500'  // Berlin
  };
  explore.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);
}


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


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


// Hold a reference to any infobubble opened
var bubble;

/**
 * Opens/Closes a infobubble
 * @param  {H.geo.Point} position     The location on the map.
 * @param  {String} text              The...