HERE Map InfoBubble -

Question

I'm using the HereMap in my Vue.js application (here the link for the HereMap code https://developer.here.com/tutorials/how-to-implement-a-web-map-using-vuejs/). The next step is to insert InfoBubble into this map (here the code to insert the infobubble into the heremap https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble). The problem is: The infobubble appears on the map, but when I try to click on the infobubble (for the moment, it has a static position assigned by me), the infobubble doesn't show any tipe of information. It does not open... it's only a static marker on the map without any other funcition. Here is the error that I can visualize in the console when I click on it: "Uncaught TypeError: this.ui is undefined" Anyway ui is defined in my code. Here is my code: (Thank you so much for your help!)

export default {
  name: "MapContainer",
  props: {
    center: Object
  },
  data() {
    return {
      platform: null,
      apikey:"AuXyuAIzhpLcZgo4JTieWmGjl1BwTvP0u4SbRQl8r9U",
      map: null,
      ui: {}
    };
  },
  mounted() {
    // Initialize the platform object:
    const platform = new window.H.service.Platform({
      apikey: this.apikey
    });
    this.platform = platform;
    this.initializeHereMap()
    this.addInfoBubble()
    
  },
  methods: {
    initializeHereMap() { // rendering maphhhh

      const mapContainer = this.$refs.hereMap;
      const H = window.H;
      // Obtain the default map types from the platform object
      var maptypes = this.platform.createDefaultLayers();

      // Instantiate (and display) a map object:
      this.map = new H.Map(mapContainer, maptypes.vector.normal.map, {
        zoom: 15.15,
        center: this.center
      });

      addEventListener("resize", () => this.map.getViewPort().resize());

      // add behavior control
      new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

      // add UI
      this.ui = H.ui.UI.createDefault(this.map, maptypes) 
      
      // End rendering the initial map
    },

    addMarkerToGroup(group, coordinate, html) {
      var marker = new H.map.Marker(coordinate);
      // add custom data to the marker
      marker.setData(html);
      group.addObject(marker);
    },



    addInfoBubble() {
      var group = new H.map.Group();

      this.map.addObject(group);

      // add 'tap' event listener, that opens info bubble, to the group
      group.addEventListener('tap', function (evt) {
        // event target is the marker itself, group is a parent event target
        // for all objects that it contains
        console.log("Click Listen")
        var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
          // read custom data
          content: evt.target.getData()
          });
          console.log(bubble)
        // show info bubble
        this.ui.addBubble(bubble);
        
      }, false);

      this.addMarkerToGroup(group, {lat: 40.7679, lng: 14.0200},
      '<div><a href="https://www.mcfc.co.uk">Manchester City</a></div>' +
      '<div>City of Manchester Stadium<br />Capacity: 55,097</div>');

    }






  }
};

Answer 1

You need to proxy this inside the function or use =>. So change this part:

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

To

group.addEventListener('tap', (evt)=> {

And then the code will work.