Tutorials / How to Find Geocoordinates (GPS) using the Autosuggest Feature of the Geocoding and Search API
Last Updated: October 01, 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.
To complete this tutorial, we will follow the general steps below:
Create a basic HERE map.
Add a search box to the map.
Implement the Geocoding and Search API to find the geocoordinates.
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 sheet -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- end of style sheet -->
<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
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="height: 100vh; width: 100vw;" id="mapContainer" class="container-1">
<input placeholder="Search for a Place or an Address." type="text" name="search" id="search" value="Berlin, Germany" autocomplete="off" onkeyup="autosuggest(this)" autofocus/>
<i class="fa fa-search fa-search-custom" aria-hidden="true"></i>
<div class="dropdown">
<ul id="list"></ul>
</div>
</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.
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" class="container-1">
<input placeholder="Search for a Place or an Address." type="text" name="search" id="search" value="Berlin, Germany" autocomplete="off" onkeyup="autosuggest(this)" autofocus />
<i class="fa fa-search fa-search-custom" aria-hidden="true"></i>
<div class="dropdown">
<ul id="list"></ul>
</div>
</div>
</body>
<script>
function moveMapToBerlin(map) {
map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(10);
}
var platform = new H.service.Platform({
apikey: `HERE-API-KEY` // replace with your 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));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
window.onload = function () {
moveMapToBerlin(map);
getDeafultLocation();
}
const autosuggest = (e) => {
if(event.metaKey){
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) => {
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}')">${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
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.
You also develop the demo application using the HERE Maps API for JavaScript. Check out this documentation for more info.
Next Steps
Are you a Google Maps User? Then, the following tutorials will help you to transition to HERE Maps: