Search code examples
jqueryjvectormap

Why does the jvectormap example display a blank page?


http://jvectormap.com/tutorials/getting-started/

The following code was copied from the example obtained from the above web page, except I have had to alter the jquery-jvectormap.css and jquery-jvectormap.js as the downloaded file names did not match the example code. The download button of the map did not download a file but displayed the data which I copied and pasted into a file I named jquery-jvectormap-world-mill-en.js. All files reside in the same directory as the demo file.

<!DOCTYPE html>
<html>
<head>
    <title>jVectorMap demo</title>
    <link rel="stylesheet" href="jquery-jvectormap.css" type="text/css" media="screen"/>
    <script src="jquery.js"></script>
    <script src="jquery-jvectormap.js"></script>
    <script src="jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
    <div id="world-map" style="width: 600px; height: 400px"></div>
    <script>
        $(function(){
            $('#world-map').vectorMap();
        });
    </script>
</body>
</html>

The result when displayed in a browser is an all white web page. I am new to web programming but it seems to me that $('#world-map').vectorMap(); should supply some information to say which map to use. Please help.

Some examples are brilliant they explain what the code does and where resources need to reside. Others expect you to intuitively know how it all works but when you are learning you don't know. "Free" software is not always free sometimes it comes at a cost, time and stress, I would sooner pay money.


Solution

  • I had the exact same problem as you Jie, I discovered as Paul mentioned that I needed to make the path relative, however in addition to that solution I had to also modify the map jquery file I was using and thus replace "jquery" with $ just as follows:

    <----! Original file: ->

    jquery.fn.vectorMap('addMap'..)

    <----! Modified file: ->

    $.fn.vectorMap('addMap'...)

    Feel free to refer to the following forum post: https://forum.jquery.com/topic/trying-to-get-jvectormap-working