Search code examples
javascripticonsmarkershere-api

Nokia here maps api: infobubble marker icon

I'm using "Nokia Here Maps" API trying to change the standard mark icon with a tooltip. I tried to use the property icon: url, but the icons don't change.

Here is my ascriptive code:

marker = new InfoBubbleMarker(data.location.position,infoBubbles,"<font style='font-size:2em'>"+ name</font>",{ 
eventDelegationContainer: markersContainer,
brush: { color: "#1080dd" },
icon: "../images/icon.png",
text: (markersContainer.objects.getLength() + 1),
draggable: false
});

markersContainer.objects.add(marker);

How can I change the standard icon?

Solution

  • I guess you are referring to the InfoBubbleMarker class used in the Extend Standard Marker with InfoBubble example in the API Explorer. As the title of the example suggests, it is using Standard Markers rather than Custom Markers, so the base code will need to be altered to work with icons.

    Alter line 110 from:

    extend(InfoBubbleMarker, nokia.maps.map.StandardMarker);

    to 

    extend(InfoBubbleMarker, nokia.maps.map.Marker);

    and you create icon-based Custom Markers instead.

    Replace brush and text in line 216 onwards:

    eventDelegationContainer: markersContainer,
    brush: { color: "#1080dd" },
    text: (markersContainer.objects.getLength() + 1),
    draggable: true

    With

     eventDelegationContainer: markersContainer,
        icon: "../path_to_icon/icon.png
        draggable: true

    as well.

    Personally I would just create a Container, and add a click listener to the Container instead as shown in the Infobubble on Marker click example on the HERE Maps Community Pages. The Container could hold any clickable objects so would work with both StandardMarker pins and custom Marker icons.