here-apiinfobubble

How to customize the Nokia Here marker bubble?


I use Nokia Here map and I want to customize the marker bubble.

When I click on the marker, it opens a popup with some datas.

I would like to know if it's possible to change the popup design, like the black color and other ? And if so, how can I do this ?


Solution

  • For the latest HERE Maps for JavaScript API 3.0, the Infobubble content is held within a <div class="H_ib_body"> element (This used to be a <div class='nm_bubble_content'> element for the old 2.5.4 API) so it is possible to restyle the content of every bubble by applying a CSS style to the class

    e.g.

    .H_ib_body{
      color:black;
      background:white;
      border: 1px solid black;
      padding:0px;
    }
    

    Alternatively, since the content within the Infobubble in both the old 2.5.4 API (nokia.maps.map.component.InfoBubbles) and the new 3.0 API (H.ui.InfoBubble) is itself HTML, you are not restricted to passing a string, you could pass a <div> yourself, and style the content of an individual bubble using standard CSS (or an inline style)

    A fuller explanation can be found at http://developer.nokia.com/community/wiki/HERE_Maps_API_-_How_to_create_a_tabbed_Infobubble