Marker change based on text/address input using HERE map - here-api

Question

I'm using HERE map plugin and I need to change marker position based on address/text input. I was looking for an examples in internet, but nothing was found.
Is it even possible to do such thing, using this plugin? May be someone can point out, where do I have to look, or may be someone have working example? Any help appreciated.
Something similar is used in "Google Maps"
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Answer 1

You can refer to the documentation for "Search for a Location based on an Address" can be found at https://developer.here.com/documentation/examples/maps-js/services/geocode-a-location-from-address
The working example is available at https://jsfiddle.net/4Lodwfb3/ - request a location using a free-form text input and display a marker on the map.
function geocode(platform) {
var geocoder = platform.getSearchService(),
geocodingParameters = {
q: '200 S Mathilda Sunnyvale CA'
};
geocoder.geocode(
geocodingParameters,
onSuccess,
onError
);
}
function onSuccess(result) {
var locations = result.items;
addLocationsToMap(locations);
addLocationsToPanel(locations);
}
function onError(error) {
alert('Can\'t reach the remote server');
}
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,{
center: {lat:37.376, lng:-122.034},
zoom: 15,
pixelRatio: window.devicePixelRatio || 1
});
window.addEventListener('resize', () => map.getViewPort().resize());
var locationsContainer = document.getElementById('panel');
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
var bubble;
function openBubble(position, text){
if(!bubble){
bubble = new H.ui.InfoBubble(
position,
{content: text});
ui.addBubble(bubble);
} else {
bubble.setPosition(position);
bubble.setContent(text);
bubble.open();
}
}
function addLocationsToPanel(locations){
var nodeOL = document.createElement('ul'),
i;
nodeOL.style.fontSize = 'small';
nodeOL.style.marginLeft ='5%';
nodeOL.style.marginRight ='5%';
for (i = 0; i < locations.length; i += 1) {
let location = locations[i];
var li = document.createElement('li'),
divLabel = document.createElement('div'),
address = location.address,
content = '<strong style="font-size: large;">' + address.label + '</strong></br>';
position = location.position;
content += '<strong>houseNumber:</strong> ' + address.houseNumber + '<br/>';
content += '<strong>street:</strong> ' + address.street + '<br/>';
content += '<strong>district:</strong> ' + address.district + '<br/>';
content += '<strong>city:</strong> ' + address.city + '<br/>';
content += '<strong>postalCode:</strong> ' + address.postalCode + '<br/>';
content += '<strong>county:</strong> ' + address.county + '<br/>';
content += '<strong>country:</strong> ' + address.countryName + '<br/>';
content += '<strong>position:</strong> ' +
Math.abs(position.lat.toFixed(4)) + ((position.lat > 0) ? 'N' : 'S') +
' ' + Math.abs(position.lng.toFixed(4)) + ((position.lng > 0) ? 'E' : 'W') + '<br/>';
divLabel.innerHTML = content;
li.appendChild(divLabel);
nodeOL.appendChild(li);
}
locationsContainer.appendChild(nodeOL);
}
for (i = 0; i < locations.length; i += 1) {
let location = locations[i];
marker = new H.map.Marker(location.position);
marker.label = location.address.label;
group.addObject(marker);
}
group.addEventListener('tap', function (evt) {
map.setCenter(evt.target.getGeometry());
openBubble(
evt.target.getGeometry(), evt.target.label);
}, false);
map.addObject(group);
map.setCenter(group.getBoundingBox().getCenter());
}
geocode(platform);