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.

Answer 1

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/

Answer 2

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>