Marker change based on text/address input using HERE map

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);