Search code examples
javascripthere-api

How to open info bubble on hover


I have trouble coming with a solution to the stated problem. It seems that there is some other way of adding an event listener to the marker than this proposed in official example here.

The troublesome piece of code in question:

    group.addEventListener('mouseover', function (evt) {
    // event target is the marker itself, group is a parent event target
    // for all objects that it contains
    console.log(`Is it working yet?`)
    var bubble =  new H.ui.InfoBubble(evt.target.getPosition(), {
      // read custom data
      content: evt.target.getData()
    });
    // show info bubble
    ui.addBubble(bubble);
  }, false);


Solution

  • You're almost there. The event that you want to listen to is called pointermove:

    group.addEventListener('pointermove', function (evt) {
        // event target is the marker itself, group is a parent event target
        // for all objects that it contains
        console.log(`Is it working yet?`)
        var bubble =  new H.ui.InfoBubble(evt.target.getPosition(), {
          // read custom data
          content: evt.target.getData()
        });
        // show info bubble
        ui.addBubble(bubble);
    }, false);
    

    See the map events guide