One-Box Search

Request a list of nearby places based on a query string 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>One-Box Search</h1>
<p><div>This example searches for a <i>"hotel"</i> 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> using the <code>search</code> Places API entrypoint. The Search Entrypoint returns POIs and addresses matching the user's query, taking into account the user's location context. 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-search.html">Search Entrypoint Places API documentation</a>.</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 uses the Search Places API entypoint to find hotels in the
 * Chinatown District of San Francisco
 *
 * 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-search.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 searchPlaces(platform) {
  // creates a Search entypoint
  var search = new H.places.Search(platform.getPlacesService());
  // creates parameters for search request
  var params = {
    'q': 'hotel',
    'at': '37.7942,-122.4070'
  };
  // creates a request with callbacks
  search.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...