Currently, I am integrating HereMap into my Vue.js application. You can find the code for implementing HereMap in Vue.js here. Next, I need to add an InfoBubble to this map using the code available here. However, I encounter a problem where the InfoBubble is displayed on the map but fails to show any information when clicked. It remains static and does not open as expected. The console displays an error stating "Uncaught TypeError: this.ui is undefined", even though ui is defined in my code. Here is the relevant portion of my code:
export default {
name: "MapContainer",
props: {
center: Object
},
data() {
return {
platform: null,
apikey:"AuXyuAIzhpLcZgo4JTieWmGjl1BwTvP0u4SbRQl8r9U",
map: null,
ui: {}
};
},
mounted() {
const platform = new window.H.service.Platform({
apikey: this.apikey
});
this.platform = platform;
this.initializeHereMap()
this.addInfoBubble()
},
methods: {
initializeHereMap() {
const mapContainer = this.$refs.hereMap;
const H = window.H;
var maptypes = this.platform.createDefaultLayers();
this.map = new H.Map(mapContainer, maptypes.vector.normal.map, {
zoom: 15.15,
center: this.center
});
addEventListener("resize", () => this.map.getViewPort().resize());
new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, maptypes)
},
addMarkerToGroup(group, coordinate, html) {
var marker = new H.map.Marker(coordinate);
marker.setData(html);
group.addObject(marker);
},
addInfoBubble() {
var group = new H.map.Group();
this.map.addObject(group);
group.addEventListener('tap', function (evt) {
var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
content: evt.target.getData()
});
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>');
}
}
};