Search code examples
javascriptjqueryimagejvectormap

jVectorMap marker as icon

Does anyone know how to add a Image as Marker in jVectorMap?

I read a lot of posts here in stackoverflow resolving the same question, but i couldn't make it.

My code is the next one:

$(function(){
            $('#map').vectorMap({
              zoomOnScroll: false,
              scaleColors: ['#C8EEFF', '#0071A4'],
              hoverOpacity: 0.7,
              hoverColor: false,
              backgroundColor: '#6F644E',
              markers: [
                {latLng: [40.4381311, -3.8196209], name: 'Spain'},
              ],
              markerStyle: {
                initial: {
                  image: 'http://jvectormap.com/img/icon-np-2.png',
                }
              },
            });
        });
<link rel="stylesheet" href="resources/jquery-jvectormap/jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="resources/jquery-jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
<script src="resources/jquery-jvectormap/jquery-jvectormap-world-mill-en.js"></script>

<div id="map" class="container-fluid cont-slider">

But when I try to run the code, this error came up everytime:

enter image description here

Also I want to add I readed this http://jvectormap.com/examples/marker-icons/ but It didn't work.

Solution

  • I've faced the same problem. Looks like jVectorMap doesn't support all features of JQuery v.3.x.x. I've tried all the older versions and found that 2.2.4 is working great. Newest Jquery version could properly work only with non-image markers