CODEWITHSUNDEEP
here-apiinfobubble
JGeo
JGeo

Reputation: 380

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 ?

Upvotes: 1

Views: 2158

Answers (1)

Jason Fox
Jason Fox

Reputation: 5300

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

Upvotes: 4

Related Questions