I am new to here maps and need to show a div on marker hover. I have been able to put markers with icons but now need to show a div with some extra information. Does HERE maps API provide this functionality? Any doc URL or piece of code will be appreciated. NOTE: I am using HERE maps JS API for web.

I am new to here maps and need to show a div on marker hover. I have been able to put markers with icons but now need to show a div with some extra information. Does HERE maps API provide this functionality? Any doc URL or piece of code will be appreciated. NOTE: I am using HERE maps JS API for web.

• javascript
• maps
• here-api

4 Answers 4

You can create a tooltip effect by adding various event listeners to the map to check if the mouse pointer is over an object.

(function (ctx) {
  // ensure CSS is injected
  var tooltipStyleNode = ctx.createElement('style'),
    css = '#nm_tooltip{' +
      ' color:white;' +
      ' background:black;' +
      ' border: 1px solid grey;' +
      ' padding-left: 1em; ' +
      ' padding-right: 1em; ' +
      ' display: none;  ' +
      ' min-width: 120px;  ' +
      '}';

  tooltipStyleNode.type = 'text/css';
  if (tooltipStyleNode.styleSheet) { // IE
    tooltipStyleNode.styleSheet.cssText = css;
  } else {
    tooltipStyleNode.appendChild(ctx.createTextNode(css));
  }
  if (ctx.body) {
    ctx.body.appendChild(tooltipStyleNode);
  } else if (ctx.addEventListener) {
    ctx.addEventListener('DOMContentLoaded',  function () {
      ctx.body.appendChild(tooltipStyleNode);
    }, false);
  } else {
    ctx.attachEvent('DOMContentLoaded',  function () {
      ctx.body.appendChild(tooltipStyleNode);
    });
  }
})(document);


Object.defineProperty(Tooltip.prototype, 'visible', {
  get: function() {
    return this._visible;
  },
  set: function(visible) {
    this._visible = visible;
    this.tooltip.style.display = visible ? 'block' : 'none';
  }
});


function Tooltip(map) {
  var that = this;
  that.map = map;
  that.tooltip  = document.createElement('div');
  that.tooltip.id = 'nm_tooltip';
  that.tooltip.style.position = 'absolute';
  obj = null,
  showTooltip = function () {
    var point = that.map.geoToScreen(obj.getPosition()),
      left = point.x - (that.tooltip.offsetWidth / 2),
      top = point.y + 1; // Slight offset to avoid flicker.
    that.tooltip.style.left = left + 'px';
    that.tooltip.style.top = top + 'px';
    that.visible = true;
    that.tooltip.innerHTML =  obj.title;
  };


  map.getElement().appendChild(that.tooltip);
  map.addEventListener('pointermove', function (evt) {
    obj = that.map.getObjectAt(evt.currentPointer.viewportX,
        evt.currentPointer.viewportY);
    if(obj && obj.title){
      showTooltip();
    } else {
      that.visible = false;
    }
  });

  map.addEventListener('tap', function (evt){
    that.tooltip.visible  = false;
  });
  map.addEventListener('drag', function (evt){
    if (that.visible) {
      showTooltip();
    }
  });
};

This is initialised by passing the map object as shown:

function addTooltipControlToMap(map) {
  tooltip = new Tooltip(map);
}

The code as written is looking for a .title attribute to be added to the map objects - this could be updated to use .getData() if preferred. Tooltips can be initialised as shown below, taking either text or html:

function addMarkersWithTooltips(map) {

    // Simple Marker with tooltip
  var brandenburgerTorMarker = new H.map.Marker(
    {lat:52.516237, lng: 13.35}),
    fernsehturmMarker = new H.map.Marker(
      {lat:52.520816, lng:13.409417});

  brandenburgerTorMarker.title = 'Brandenburger Tor';

  // Marker with HTML Tooltip
  fernsehturmMarker.title ='<div>' +
    '<h2>Tooltip with HTML content<\/h2>' +
    '<img width=\'120\' height=90 src=' +
    '\'http://upload.wikimedia/wikipedia/mons/' +
    '8/84/Berlin-fernsehturm.JPG\' ' +
    'alt=\'\'/><br/><b>Fernsehturm, Berlin<\/b>' +
    '<\/div>';

  // Add the markers onto the map
  map.addObjects([brandenburgerTorMarker, fernsehturmMarker]);
}

I have been able to find proper mouse over events for HERE map's markers which are pointerenter and pointerleave and sample code to use these events is:

// After Initializing map with your own credentials.
var map = new H.Map(document.getElementById('map'),
      defaultLayers.normal.map,{
      center: {lat: LAT_VAL, lng: LNG_VAL},
      zoom: 12
    });

var domMarker = new H.map.DomMarker(coords, {
            icon: domIcon
          });
var bubble;
domMarker.addEventListener('pointerenter', function(evt) {
              bubble = new H.ui.InfoBubble({lat:"SOME_VALUE",lng:"SOME_VALUE"}, {
              content: "Your content e here"
            });
            ui.addBubble(bubble);
          }, false);
          domMarker.addEventListener('pointerleave', function(evt) {
            bubble.close();
          }, false);
map.addObject(domMarker);

Depending on the api version you are using, you may find what you are looking for inside the documentation pdf (or at least start from there). Supposing you need do make some HTML styled marker, you may need:

• DomMarker (instead of a Marker, because it allows you to use ->2)
• DomIcon (which can embed html) An example can be found here https://developer.here./apiexplorer-v2-sample-data/template-web-default/examples/map-with-dom-marker/index.html

Anyway, if you need to show informations about the marker, I would suggest to use InfoBubbles, which have been developed for this purpose. From the 3.0.5 docs:

// Create an info bubble object at a specific geographic location:
ui = H.ui.UI.createDefault(self.map, defaultLayers);
var bubble = new H.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
 content: '<b>Hello World!</b>'
 });

// Add info bubble to the UI:
ui.addBubble(bubble);

To show them, you should attach an event to the marker tap event:

marker.addEventListener('tap', function (evt) {

    //create and add the bubble

}

In any case, you can find the documentation of your api version here: https://developer.here./documentation/versions

You do not have "hover" listener for marker, but you can show infoBubble on click

http://heremaps.github.io/examples/explorer.html#infobubble-on-marker-click

If this doesn't work for you, you will have to use jquery and to bind "hover" on HTML marker element. (This is not very easy task)