How to add Marker in jVectorMap?

Question

I'm new to jVectorMap. I've already got the google map from the link: http://codepen.io/anon/pen/RPjJYb. I'm trying to add markers to this map. I tried the following code but couldn't add marker to the map:

$('#vmap').vectorMap({
    map: 'usa_en',
    backgroundColor: null,
    color: '#D2D3D4',  //#F58025
    hoverColor: '#754200',
    selectedColor: '#F58025',
    borderColor: '#FFFFFF',
    enableZoom: false,
    showTooltip: false,
    regionsSelectable: true,

    markersSelectable: true,
    markerStyle: {
        initial: {
            fill: 'grey',
            stroke: '#505050',
                "fill-opacity": 1,
                "stroke-width": 1,
                "stroke-opacity": 1,
            r: 5
        },
        hover: {
            stroke: 'black',
            "stroke-width": 2
        },
        selected: {
            fill: 'blue'
        },
        selectedHover: {
        }
    },
    markers: [
         {latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}},
    ],
    onRegionClick: function(element, code)
    {
    alert(code);
    }

});

Please help me. Thanks in advance.

score 4 · Answer 1 · answered Oct 19 '15 at 13:15

4

You are not using jVectormap, but jqvmap. I don't think it implements markers.

You can switch to jVectorMap, it's a bit different, but it has markers like: http://jvectormap.com/examples/markers-world/

Simple demo: http://jsfiddle.net/IrvinDominin/96o28qnh/

answered Oct 19 '15 at 13:15

Irvin Dominin

30,819
9
77
111

Thanks a lot for the reply. I've already tried this but I couldn't highlight map area as given :http://stackoverflow.com/questions/30714264/jqvmap-selected-regions-deselect-with-jsfiddle-demo. The link that I've mentioned in the question does have an option to highlight map areas. – Sankar V Oct 20 '15 at 05:41
jvectormap also have an option to highlight (not only areas, but even markers). See the following demo: http://jsfiddle.net/dqxccd7h/2/. Irvin's answer should, therefore, marked as a good answer. – agustin Oct 31 '15 at 10:36

Suchit kumar · Answer 2 · 2015-10-20T04:40:06.390

as @Irvin Dominin said jqvmap does not implement markers so try using jVectormap they are lot alike.

$(document).ready(function(){
 $('#vmap').vectorMap({
     map: 'us_aea_en',
     backgroundColor: '#00ff11',
     color: '#D2D3D4',  //#F58025
     hoverColor: '#754200',
     selectedColor: '#F58025',
     borderColor: '#FFFFFF',
     enableZoom: false,
     showTooltip: false,
     regionsSelectable: true,

     markersSelectable: true,
     hoverOpacity: 0.7,
     markersSelectable: true,
     markerStyle: {
         initial: {
             fill: 'grey',
             stroke: '#505050',
                 "fill-opacity": 1,
                 "stroke-width": 1,
                 "stroke-opacity": 1,
             r: 5
         },
         hover: {
             stroke: 'black',
             "stroke-width": 2
         },
         selected: {
             fill: 'blue'
         },
         selectedHover: {
         }
     },
     markers: [
               {latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}},
          ],
    onRegionClick: function(element, code)
    {
    alert(code);
    }

 });
  
});

.jvectormap-label {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}
.jvectormap-zoomin, .jvectormap-zoomout {
    position: absolute;
    left: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    padding: 3px;
    color: white;
    width: 10px;
    height: 10px;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
}

.jvectormap-zoomin {
top: 10px;
}
.jvectormap-zoomout {
top: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery-jvectormap-1.1.1.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery.jvectormap-us.js"></script>

<div id="vmap" style="width: 600px; height: 600px;"></div>

Thanks a lot for the reply. I've already tried this but I couldn't highlight map area as given :http://stackoverflow.com/questions/30714264/jqvmap-selected-regions-deselect-with-jsfiddle-demo. The link that I've mentioned in the question does have an option to highlight map areas. — Sankar V, Oct 20 '15 at 05:41

How to add Marker in jVectorMap?

2 Answers2