Unable to get domMakers to be clickable in mobile for Here.com map

Question

I'm using v3.0 API and my map works fine in a desktop browser, but when I try to access it in mobile it doesn't respond when I use the click event handler. Nothing happens when I tap on icons in either Chrome for Android or Safari for iOS. I've tried to use the infoBubble code I found on Here.com, and when I do that, I can get the icons to see tap events, but I have not been able to add the markup that I need (see the markupData variable below) only a generic bubble that isn't even styled as I would like, let alone having appropriate content per icon.

Here is the JS for my map:

function ShowMap() {
    // Here.com maps code
    var defaultLayers = platform.createDefaultLayers();

    var map = new H.Map(
        document.getElementById("map-canvas"),
        defaultLayers.normal.map,
        {
            zoom: 10,
            center: { lat: 52.5, lng: 13.4 }
        }
    );

    map.addEventListener("drag", showTag);

    map.addEventListener("dragend", showTag);

    map.addEventListener("dragstart", showTag);

    var mapEvents = new H.mapevents.MapEvents(map);

    var behavior = new H.mapevents.Behavior(mapEvents);

    var modelString = document.getElementById("mapModel");
    if (modelString == null) return;

    var model = JSON.parse(modelString.innerHTML);

    var group = new H.map.Group();
    for (var i = 0; i < model.length; i++) {
        var infoDiv = document.createElement("div");
        var markerPng = document.createElement("img");
        markerPng.src = "/_inc/img/Tri-MapMarker.png";
        infoDiv.style.left = "-20px";
        infoDiv.style.top = "-53px";
        var locationData = document.createElement("div");
        locationData.classList.add("locLabels");
        locationData.style.display = "none";
        var markerData = '<span class="cancelButton" onkeypress="closeTag(this)" onclick="closeTag(this)"></span>' +
            '<div class="locName"> ' +
            '<a href="' + model[i].PageUrl + '">' + model[i].Name + '</a>' +
            '</div>' +
            '<div class="locAddr">' +
            model[i].Address1 +
            '<br> ';

        if (model[i].Address2 != null && model[i].Address2 != "")
            markerData += model[i].Address2 + "<br>";

        markerData += model[i].City + ', ' + model[i].State + ' ' + model[i].Zip +
            '</div>' +
            '<a href="' + model[i].MapUrl + '" class="locDir">Get directions</a>';

        locationData.innerHTML = markerData;

        infoDiv.appendChild(markerPng);
        infoDiv.appendChild(locationData);

        var icon = new H.map.DomIcon(infoDiv, {
            onAttach: function (clonedElement, domIcon, domMarker) {
                clonedElement.childNodes[0].addEventListener('click', function (evt) {
                    clonedElement.childNodes[1].style.display = "block";
                    this.parentNode.style.zIndex = "100";
                    currentTag = this.parentNode;
                });
                clonedElement.childNodes[0].addEventListener('tap', function (evt) {
                    clonedElement.childNodes[1].style.display = "block";
                    this.parentNode.style.zIndex = "100";
                    currentTag = this.parentNode;
                });

//clonedElement.childNodes[1].addEventListener('blur', function (evt) {
                //    this.style.display = "none";
                //});
            }
        });
        var marker = new H.map.DomMarker({ lat: model[i].Latitude, lng: model[i].Longitude }, { icon: icon });

        //marker.setData(markerData);
        group.addObject(marker);
    }

    // Add the marker to the map and center the map at the location of the marker:
    map.addObject(group);

    var bounds = group.getBounds();
    var adjust = 0.01;
    if (bounds.ga > bounds.ha) {
        bounds.ga += adjust;
        bounds.ha -= adjust;
    }else {
        bounds.ga -= adjust;
        bounds.ha += adjust;
    }
    if (bounds.ja > bounds.ka) {
        bounds.ja += adjust;
        bounds.ka -= adjust;
    } else {
        bounds.ja -= adjust;
        bounds.ka += adjust;
    }

    map.setViewBounds(bounds);


    var ui = H.ui.UI.createDefault(map, defaultLayers);
    }

Answer 1

I was finally able to get this working by adding the following to my code:

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


        document.getElementById("locLabels" + evt.target.icon.i.firstElementChild.id).style.display = "block";
        document.getElementById("infoDiv" + evt.target.icon.i.firstElementChild.id).style.zIndex = "100";


    }, false);