Last Updated: April 16, 2020

Introduction

Many applications such as vehicle tracking, routing, weather forecasting and more require geocoordinates. The Geocoding and Search API helps find geocoordinates of addresses, places, localities and administrative areas (e.g. city, state and country).

The Geocoding and Search API allows you to do forward geocoding and reverse geocoding. This tutorial focuses on "forward geocoding". You can learn about reverse geocoding here.

Forward geocoding allows you to find the coordinates from a known address.

In this tutorial, we will show you how you leverage the "Autosuggest" feature of HERE Geocoding and Searching API and build a sample application that receives a street address and then places a marker on a map.

In the map below you will see the final output. Output

To see the final product, click here to view the working map.

Pre-Reqs.

Roadmap

To complete this tutorial, we will follow the general steps below:

  1. Create a basic HERE map.
  2. Add a search box to the map.
  3. Implement the Geocoding and Search API to find the geocoordinates.
  4. Add a marker to the map.

Create a Basic HERE Map

To create a HERE map, follow the steps below:

  • Open your favorite editor.
  • Create an index.html file.
  • Copy the following boilerplate code into the index.html and replace the HERE-API-KEY with your own.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--HERE JS libs-->
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<!--HERE JS libs-->
<style>
 .dropdown {
  position: absolute;
  z-index: 99999;
  list-style-type: none;
  width: 360px;
  border: rgb(15, 22, 33);
  list-style: none;
  top: 135px;
}
input{
  z-index: 9999; font-size: 18px;
  font-family: 'Allerta', Helvetica, Arial, sans-serif;
  color: #495057;position: absolute; top: 100px; left: 20px; 
  width: 350px; height: 35px; padding: 5px; margin-left: 17px; 
  margin-top: 7px; border: none;
}
ul{
  list-style: none; background-color: white; padding: 0px;
  margin-left: 29px;
width: 360px;
}
li{
  list-style-type: none;
  height: 12px;
  padding: 12px;
  box-shadow: rgb(158, 202, 237) 0px 0px 4px;
  display: list-item;
  text-align: -webkit-match-parent;
  font-family: 'Allerta', Helvetica, Arial, sans-serif;
  color: #495057;
  }
li:hover {
  background-color: yellowgreen;
}
#list {
  cursor: pointer;
}
.fa-search-custom {
  position: absolute;
  left: 375px;
  top: 123px;
  z-index: 99999;
}
</style>

<title>Geocoding API Demo</title>
</head>
  <body>
  <div style="height: 100vh;width: 100vw;" id="mapContainer" class="container-1"></div>
    <script>
        var platform = new H.service.Platform({
            apikey: `HERE-API-KEY`
        });
        var defaultLayers = platform.createDefaultLayers();

        //Step 2: initialize a map - this map is centered over Europe
        var map = new H.Map(document.getElementById('mapContainer'),
            defaultLayers.vector.normal.map, {
            center: { lat: 50, lng: 5 },
            zoom: 4,
            pixelRatio: window.devicePixelRatio || 1
        });
        // add a resize listener to make sure that the map occupies the whole container
        window.addEventListener('resize', () => map.getViewPort().resize());
        //Step 3: make the map interactive
        // MapEvents enables the event system
        // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    </script>
  </body>
  </html>

This code will render a web map like the image below.

Map
Figure 1. Map

Add a Search Box to the Map

Once the HTML map is added, we will add code for the search box to the map. Copy the following HTML snippet inside the mapContainer div tag in the index.html after the script tag.

    <div style="position:absolute;z-index: 9999;margin-top: 100px;">
        <input type="text" name="search" id="search" onkeydown="autosuggest(this.value)"
            style="width: 300px;height: 30px;border-radius: 5px;border-color:white;">
        <ul id="list"></ul>
    </div>

Implement the Geocoding and Search API to Find the Geocoordinates.

The Geocode endpoint is used to find geocoordinates of a location. Below is the endpoint.

https://autosuggest.search.hereapi.com/v1/autosuggest?at=52.5199813,13.3985138&limit=5&q=res&resultTypes=categoryQuery,place&apiKey=YOUR_API_KEY_HERE

The response to the above request looks like the following:

{
  "items": [
    {
      "title": "Hackescher Hof",
      "id": "here:pds:place:276u33db-fb00197ffa5041b2b656ea3d23145dca",
      "resultType": "place",
      "address": {
        "label": "Hackescher Hof, Rosenthaler Straße 40, 10178 Berlin, Deutschland"
      },
      "position": { "lat": 52.52401, "lng": 13.40249 },
      "distance": 523,
      "categories": [ { "id": "100-1000-0000" }, ... ],
      "foodTypes": [ { "id": "300-000" }, ... ],
      "highlights": { "title": [ ], "address": { "label": [ ] } }
    },
    {
      "title": "restaurant",
      "id": "here:cm:ontology:restaurant",
      "resultType": "categoryQuery",
      "href": "http://ci.opensearch.dev.api.here.com/v1/discover?q=restaurant&_ontology=restaurant&at=52.51998%2C13.39851",
      "highlights": { "title": [{ "start": 0, "end": 3 }] }
    },
    {
      "title": "Cordobar",
      "id": "here:pds:place:276u33db-6b5445c1f1854148a8b351822a0ddc0c",
      "resultType": "place",
      "address": {
        "label": "Cordobar, Große Hamburger Straße 32, 10115 Berlin, Deutschland"
      },
      "position": { "lat": 52.52572, "lng": 13.39888 },
      "distance": 639,
      "categories": [ { "id": "100-1000-0000" }, ... ],
      "foodTypes": [ { "id": "300-000" }, ... ],
      "highlights": { "title": [ ], "address": { "label": [ ] } }
    },
    {
      "title": "McDonald's",
      "id": "here:pds:place:276u33db-dc6f6db9cef943c1b1ff3f74b30f03f9",
      "resultType": "place",
      "address": {
        "label": "McDonald's, Friedrichstraße 142, 10117 Berlin, Deutschland"
      },
      "position": { "lat": 52.52003, "lng": 13.38812 },
      "distance": 703,
      "categories": [{ "id": "100-1000-0009" }],
      "foodTypes": [{ "id": "800-067" }],
      "highlights": { "title": [ ], "address": { "label": [ ] } }
    },
    {
      "title": "Meliá Berlin",
      "id": "here:pds:place:276u33db-10e35e5ad0b0460e9fe49fc85a2bb8e7",
      "resultType": "place",
      "address": {
        "label": "Meliá Berlin, Friedrichstraße 103, 10117 Berlin, Deutschland"
      },
      "position": { "lat": 52.52138, "lng": 13.38833 },
      "distance": 706,
      "categories": [ { "id": "100-1000-0000" }, ... ],
      "foodTypes": [{ "id": "300-000" }, ... ],
      "highlights": { "title": [ ], "address": { "label": [ ] } }
    }
  ]
}

When the user starts typing in the search box, we will use the Autosuggest API to return address suggestions.

Add the below code in the index.html file anywhere in the <script> tag:

const autosuggest = (e) => {
    console.log(e.metaKey,"metakey")
    if(event.metaKey){
       console.log(event.metaKey,"metakey inside")
       return
    }
  let searchString = e.value

if (searchString != "") {
  fetch(
    `https://autosuggest.search.hereapi.com/v1/autosuggest?apiKey=${window.apikey}&at=33.738045,73.084488&limit=5&resultType=city&q=${searchString}&lang=en-US`
  )
  .then((res) => res.json())
  .then((json) => {
    console.log(json);
    if (json.length != 0) {
      document.getElementById("list").innerHTML = ``;
      let dropData = json.items.map((item) => {
        if ((item.position != undefined) & (item.position != ""))
          document.getElementById(
            "list"
          ).innerHTML += `<li onClick="addMarkerToMap(${item.position.lat},${item.position.lng})">${item.title}</li>`;
      });
    }
  });
}
};

Add a Marker to the Map.

Once we find the desired location from the search box, lets add a marker to the map. To do that, copy the following code snippet to the script tag below the autosuggest function in the index.html file.

  // to get deafult location
  function getDeafultLocation(){
      var lat=52.5159;
      var lng=13.3777;
      var title = "Berlin, Germany";
      addMarkerToMap(lat, lng, title);
  }
  const addMarkerToMap = (lat, lng, title) => {
      map.removeObjects(map.getObjects())
      document.getElementById("search").value =  title;
      var selectedLocationMarker = new H.map.Marker({ lat, lng });
      map.addObject(selectedLocationMarker);
      document.getElementById("list").innerHTML = ``;
      map.setCenter({ lat, lng }, true); 
  };

Final Code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <style>
        .dropdown {
          position: absolute;
          z-index: 99999;
          list-style-type: none;
          width: 360px;
          border: rgb(15, 22, 33);
          list-style: none;
          top: 135px;
        }
        input{
          z-index: 9999; font-size: 18px;
          font-family: 'Allerta', Helvetica, Arial, sans-serif;
          color: #495057;position: absolute; top: 100px; left: 20px; 
          width: 350px; height: 35px; padding: 5px; margin-left: 17px; 
          margin-top: 7px; border: none;
        }
        ul{
          list-style: none; background-color: white; padding: 0px;
          margin-left: 29px;
        width: 360px;
        }
        li{
          list-style-type: none;
          height: 12px;
          padding: 12px;
          box-shadow: rgb(158, 202, 237) 0px 0px 4px;
          display: list-item;
          text-align: -webkit-match-parent;
          font-family: 'Allerta', Helvetica, Arial, sans-serif;
          color: #495057;
          }
        li:hover {
          background-color: yellowgreen;
        }
        #list {
          cursor: pointer;
        }
        .fa-search-custom {
          position: absolute;
          left: 375px;
          top: 123px;
          z-index: 99999;
        }
        </style>
        <title>Geocoding Demo</title>
    </head>
    <body>
        <div style="height: 100vh;width: 100vw;" id="mapContainer">
            <div style="position:absolute;z-index: 9999;margin-top: 100px;">
                <input type="text" name="search" id="search" onkeydown="autosuggest(this.value)"
                    style="width: 300px;height: 30px;border-radius: 5px;border-color:white;">
                     <i class="fa fa-search fa-search-custom" aria-hidden="true"></i>
                <ul id="list"></ul>
            </div>
        </div>
    </body>
    <script>
        function showPosition(position) {
            console.log('Latitude: ' + position.coords.latitude + 'Longitude: ' + position.coords.longitude);
        }
        var platform = new H.service.Platform({
            apikey: window.apikey
        });
        var defaultLayers = platform.createDefaultLayers();

        //Step 2: initialize a map - this map is centered over Europe
        var map = new H.Map(document.getElementById('mapContainer'),
            defaultLayers.vector.normal.map, {
            center: { lat: 50, lng: 5 },
            zoom: 4,
            pixelRatio: window.devicePixelRatio || 1
        });
        // add a resize listener to make sure that the map occupies the whole container
        window.addEventListener('resize', () => map.getViewPort().resize());

        //Step 3: make the map interactive
        // MapEvents enables the event system
        // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

        // Create the default UI components
        var ui = H.ui.UI.createDefault(map, defaultLayers);
        if (searchString != "") {
          fetch(
            `https://autosuggest.search.hereapi.com/v1/autosuggest?apiKey=${window.apikey}&at=33.738045,73.084488&limit=5&resultType=city&q=${searchString}&lang=en-US`
          )
          .then((res) => res.json())
          .then((json) => {
            console.log(json);
            if (json.length != 0) {
              document.getElementById("list").innerHTML = ``;
              let dropData = json.items.map((item) => {
                if ((item.position != undefined) & (item.position != ""))
                  document.getElementById(
                    "list"
                  ).innerHTML += `<li onClick="addMarkerToMap(${item.position.lat},${item.position.lng})">${item.title}</li>`;
              });
            }
          });
        }
        // to get deafult location after loading the page
        function getDeafultLocation(){
          var lat=52.5159;
          var lng=13.3777;
          var title = "Berlin, Germany";
          addMarkerToMap(lat, lng, title);
        }
        // adding marker to map
        const addMarkerToMap = (lat, lng, title) => {
          map.removeObjects(map.getObjects())
          document.getElementById("search").value =  title;
          var selectedLocationMarker = new H.map.Marker({ lat, lng });
          map.addObject(selectedLocationMarker);
          document.getElementById("list").innerHTML = ``;
          map.setCenter({ lat, lng }, true); 
        };    
    </script>

    </html>
final-output
Figure 2. final-output

Conclusion

After going through this tutorial:

  • You should have learned how to use Geocoding and Search API in an application to search for an address.

Next Steps

Are you a Google Maps User? Then, the following tutorials will help you to transition to HERE Maps:

results matching ""

    No results matching ""