Question
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.
https://stackoverflow.com/questions/18669417
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!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 3
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
OTHER TIPS
It works, here's the proof.
It's likely you're not pointing correctly to the files in your html.
And you don't need to point to a map, the default value for "map" is "world_mill_en":
jvm.WorldMap.defaultParams = {
map: "world_mill_en",
This is an excerpt from jquery-jvectormap-1.2.2.min.js which makes $('#world-map').vectorMap() perfectly fine.
sorry to weigh in late, but the issue is most likely that the line
<script src="jquery.js"></script>
is failing (if you look in the debug message in your web browser you would find the line ReferenceError jquery is not defined - e.g. in Firefox from the right click menu: Inspect Element -> Console and then reload the page).
I'm not sure what system you are running, but in Linux jquery.js is often at /usr/share/javascript/jquery/jquery.js.
So, replace the line
<script src="jquery.js"></script>
with
<script src="/usr/share/javascript/jquery/jquery.js"></script>
Alternatively, if you have a webserver, make sure it knows where jquery.js is.
