13

I've just implemented the jQuery plugin jvectormap, for the use of a world map. Everything's working perfectly, except this maybe.. I added a few markers and have been trying to implement HTML to the markers label/tooltip. So instead of just "blabla" I want an image/html to show up, when hovering the marker.

How can I achieve this result?

Here's the initializing JS:

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "<img src=\"img/logo.png\">"}
    ],
...(other code isn't important)...

The important part is name: "<img src=\"img/logo.png\">"

Thanks for the help!!

James Cazzetta
  • 3,122
  • 6
  • 32
  • 54

1 Answers1

13

If you want to customize the label/tooltip that is displayed when you mouse over the marker, you should provide a function for onMarkerLabelShow.

onMarkerLabelShow Function (Event e, Object label, String code) Will be called right before the marker label is going to be shown.

For example:

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "My marker name"}
    ],
    onMarkerLabelShow: function(event, label, code) {
     label.html("<img src=\"img/logo.png\"><br>"+ label.html());                
    }
});
Mads Hansen
  • 63,927
  • 12
  • 112
  • 147
  • Very nice, got it working for 1 label! :) So how can I differenciate between two labels in the "onMarkerLabelShow" function? – James Cazzetta Oct 18 '12 at 06:34
  • 3
    `code` will return the `name` for that marker in the `onMarkerLabelShow()` function. Check out this example of how to display a country flag image when hovering over a region, same technique could be applied for markers: http://stackoverflow.com/a/12769847/14419 – Mads Hansen Oct 18 '12 at 10:56
  • 4
    onMarkerLabelShow is deprecated for now, onMarkerTipShow function with same params is instead. – Dmitrii Malyshev Mar 16 '15 at 10:22
  • Nice @MadsHansen. How to display database value in label ? when i click country? i trying last two weeks i cant get answer pls help me – Thennarasu May 26 '15 at 07:01
  • 1
    @Thennarasu Ideally try retrieving the database value via an AJAX call within the `onMarkerLabelShow` function. You need something like this: `var dbValue; $.ajax({ url: "database.php", success: function(data) { dbValue = data; } });` – James Cazzetta Aug 25 '15 at 15:30