Search code examples
here-api

How to hook into the "close infobubble" event in HERE maps Javascript API


I can create infobubbles using the HERE maps Javascript API - eg from their documentation:

    function addInfoBubble(map) {
      map.set('center', new nokia.maps.geo.Coordinate(53.430, -2.961));
      map.setZoomLevel(7);

      var infoBubbles = new nokia.maps.map.component.InfoBubbles(),
        TOUCH = nokia.maps.dom.Page.browser.touch,
        CLICK = TOUCH ? 'tap' : 'click',
        container = new nokia.maps.map.Container();

      container.addListener(CLICK, function (evt) {
        infoBubbles.openBubble(evt.target.html, evt.target.coordinate);
      }, false);
      map.components.add(infoBubbles);
      map.objects.add(container);

      addMarkerToContainer(container, [53.439, -2.221],
        '<div><a href=\'http://www.mcfc.co.uk\' >Manchester City</a>' +
        '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');

      addMarkerToContainer(container, [53.430, -2.961],
        '<div ><a href=\'http://www.liverpoolfc.tv\' >Liverpool</a>' +
        '</div><div >Anfield<br>Capacity: 45,362</div>');
    }
    function addMarkerToContainer(container, coordinate, html) {
      var marker = new nokia.maps.map.StandardMarker(
        coordinate,
        {html: html}
      );
      container.objects.add(marker);
    }

I would like to hook into the close event of the infobubble. I realise I could use jQuery to find the span that contains the close button (examining the markup, I believe it has the class nm_bubble_control_close) and do something when this is clicked. However I thought there would be a built-in event that I could use.

Does anyone know if there is a built-in event that fires when the infobubble is closed? I can't find anything in the documentation.


Solution

  • AFAIK there is no built-in event, there's also no related property which may be observed.

    Possible workaround: override the built-in close-method with a custom function:

      container.addListener(CLICK, function (evt) {
        var b = infoBubbles.openBubble(evt.target.html, evt.target.coordinate),
            c = b.close;
        b.close = function(){
          //do what you want to
          alert('bubble will be closed');
          //execute the original close-method
          c.apply(b)
        }
      }, false);