Maps API for JavaScript Developer's Guide

Integration with the Map

You can easily integrate Maps API for JavaScript with the map to display the results of a request. To demonstrate this, we reuse the example that searches for places matching the word "hotel" in the Chinatown district in San Francisco, showing the search results as markers on the map.

The first step is to create an HTML page and to add the <script> tags to the <head> element to load the map API, including the Places module:


      <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, 
      width=device-width" />
    <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" 
      type="text/javascript" charset="utf-8"></script>
    <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" 
      type="text/javascript" charset="utf-8"></script>
    <script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" 
      type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="UTF-8"
      src="http://js.api.here.com/v3/3.0/mapsjs-places.js"></script>
    <link rel="stylesheet" type="text/css" 
      href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
  </head>
    

The next step is to create the <body> element and in it the map container (a <div>) in which to display the map. Finally, we need another <script> section with the application logic.


      <body>
  <div id="map" style="width: 640px; height: 480px"/>
  <script type="text/javascript" charset="utf-8">
    // Instantiate the Platform class with authentication and
    // authorization credentials:
    var platform = new H.service.Platform({
      useCIT: true,
      app_id: '{YOUR_APP_ID}',
      app_code: '{YOUR_APP_CODE}'
    });

    // Instantiate a map inside the DOM element with id map. The
    // map center is in San Francisco, the zoom level is 10:
    var map = new H.Map(document.getElementById('map'),
      platform.createDefaultLayers().normal.map, {
      center: {lat: 37.7942, lng: -122.4070},
      zoom: 15
      });

    // Create a group object to hold map markers:
    var group = new H.map.Group();

    // Create the default UI components:
    var ui = H.ui.UI.createDefault(map, platform.createDefaultLayers());

    // Add the group object to the map:
    map.addObject(group);

    // Obtain a Search object through which to submit search
    // requests:
    var search = new H.places.Search(platform.getPlacesService()),
      searchResult, error;

    // Define search parameters:
    var params = {
    // Plain text search for places with the word "hotel"
    // associated with them:
      'q': 'hotel',
    //  Search in the Chinatown district in San Francisco:
      'at': '37.7942,-122.4070'
    };

    // Define a callback function to handle data on success:
    function onResult(data) {
      addPlacesToMap(data.results);
    }

    // Define a callback function to handle errors:
    function onError(data) {
      error = data;
    }

    // This function adds markers to the map, indicating each of
    // the located places:
    function addPlacesToMap(result) {
      group.addObjects(result.items.map(function (place) {
      var marker = new H.map.Marker({lat: place.position[0],
        lng: place.position[1]})
      return marker;
      }));
    }

    // Run a search request with parameters, headers (empty), and
    // callback functions:
    search.request(params, {}, onResult, onError);

  </script>
</body>
    

As in the previous examples, the code follows the general implementation pattern, with the parameter object containing the plain text "hotel" and the location 37.7942,-122.4070. The request object is H.places.Search.

The code submits a request, which is processed asynchronously.

The callback invoked on successful response calls a function named addPlacesToMap() to add a markers to the map, indicating the located places. addPlacesToMap() takes advantage of the fact that, for each of the places, the results contain a position object with the geographic coordinates.