here-apiheremaps

Marker change based on text/address input using HERE map


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


Solution

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