Here Maps - Reposition map, If Info Bubble in not completely visible in current window

Question

I am integrating "heremap" in Vue. In our scenario, we have lot of markers on map. On clicking any marker, some information about the markers is being shown on info bubble popup.

If a marker is at top of map and I clicked on the marker, it's info bubble is not completely visible in viewport as some of the bubble popup is hidden as can be seen in the below pic.

Click on the Picture of Info Bubble of a marker on heremap

In google map if info window of marker is not fully visible, it automatically readjust map to fit the window.

Any idea, how can I achieved this in heremap using vue?

Here is working example of heremap with marker. Opening an Infobubble on a Mouse Click https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble

Go to above link, move map to little bit up. Click one marker on map, it's info window bubble with show and map do not reposition itself to fully show info window bubble as you can see in the below picture.

Click on the Picture of Marker on working example

Here the same working example of google map. https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Click on the marker, it's info window will start showing and if it is not fully in the window, map automatically readjust itself.

Answer 1

One approach might be to centre the map on the marker whenever you click on it. This still won't guarantee the whole infowindow will appear on the screen, depending on how big it is. But it's likely to work in most cases.

You should be able to get the map's centre using map.getCenter()

Using the examples given at

• https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble
• https://developer.here.com/documentation/examples/maps-js/events/position-on-mouse-click

you should be able to do something like:

group.addEventListener('tap', function (evt) {
    var bubble = new H.ui.InfoBubble(coord, {
      // read custom data
      content: evt.target.getData(),
      position: group.getCenter()
    });
    // show info bubble
    ui.addBubble(bubble);
}, false);