Discussion on MapSVG jQuery - Responsive Vector Maps, Floorplans, Interactive SVG Images


RomanCode supports this item


This author's response time can be up to 5 business days.

451 comments found.

I purchased this plugin. how can I use it out of wordpress. shoud I buy JQuery mode again?

Hi, if you don’t need jQuery MapSVG builder and you’re able to enter all settings by writing them into JS code then you can take all necessary files from WP MapSVG: mapsvg.min.js, mapsvg.css, etc. You need to include these files into your page:
<link href="/css/mapsvg.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/mapsvg.min.js"></script>

And then use jQuery documentation: http://mapsvg.com/documentation/jquery/

If you want to use jQuery MapSVG Builder (which is much easier to use) then you have to buy jQuery MapSVG plugin.


Thanks for your jquery maps, Its great so far. I just have a question.

I have a jquery array of markers that I show on a map , but I update it though filters, I need to re-init/update/relaunch the map when the markers are updated and I doesn’t see any method for this.

Can you help ?


You can update any mapsvg settings via .update method:
jQuery('#mapsvg-123').mapSvg().update( { 
   markers: {
      marker_id_1: {...options...}, 
      marker_id_2: {...options...}


I just purchased the MapSVG Jquery version and I am facing the following problems:-

1. I get the 2.4.1 version of MapSVG Jquery Builder but in documentation you talked about 3.x.x version. Why I did not get the latest version?

2. I am running MapSVG Jquery Builder on localhost but when I choose SVG file from dropdown the map is keep loading and I get the following error in developer console in browser: -

“Failed to load resource: the server responded with a status of 403 (Forbidden)”

I am using Wampp server on my local machine. Do I need to change my server settings to load SVG files? If yes, which settings I need to change.

Waiting for your kind reply. Thanks.


Thanks for reply. 1 more thing I need to know.

1. How I show multiple countries/region dynamically on map. Please note that I am getting all values from database using ajax (e.g Country Name, Belgium, USA, Canada etc ). How I can create below type of Object format in loop using countries name from database?

regions: {‘Germany’: { OPTIONS }, ‘Sweden’: { OPTIONS } }

Moreover, countries name that I get from database will be stored in variable or array but MapSVG require country/region name in between ’’ quotes.

How I create below Object format in loop using countries name from database?

var regions = { ‘Belgium’: { id : ‘Test’, ‘id_no_spaces’: ‘test’, title : ‘test’, fill :”rgba(255,255,0,1)”, tooltip : country }, ‘USA’: { id: ‘Test’, ‘id_no_spaces’: ‘test’, title: ‘test’, fill:”rgba(255,255,0,1)”, tooltip: “test”, }, ‘Canada’: { id: ‘Test’, ‘id_no_spaces’: ‘test’, title: ‘test’, fill:”rgba(255,255,0,1)”, tooltip: country, }, };

Hi, are you asking how to convert array to object?
var mapsvgRegionsObject = {};
  mapsvgRegionsObject[region.id] = region;

Sorry but I did not understand your answer. can you please provide some sample code? I want to add multiple markers on map dynamically. For markers I am getting latitude and longitude from database. Now, how I use these longitude and latitude to add multiple markers on map dynamically? Below is my code I am creating object dynamically but below code is not working.

var i =0;
var mapFormat = [];
for (var country in countries_coord) {
values = countries_coord[country];
            objFormat = '{"id:" "marker_""' + i + '","tooltip:" "' + country + '","src:" "//localhost/mapsvg/markers/pin1_red.png","width:" "'+ 15 + '","height:" "'+ 24 + '","geoCoords:" [ "'+ values.latitude + '", "'+values.longitude + '" ]}';

Then, I add “mapFormat” variable in MapSVG option like this:- I think I am not creating the object in right way. can you please look at my code and see what I am doing wrong? Thanks..

markers: [mapFormat],
responsive: true

Hi, Will MapSVG 3 have a jQuery version eventually or will this be WordPress only? We’d really love to use it when possible.

Thanks, Statement

Hi, there are many things in MapSVG 3 which work with MySQL / PHP. Adding those features into jQuery plugin would make jQuery version not “just jQuery” but full-stack jQuery/PHP/MySQL application. However I think I will create such application soon but it would be moved from “jQuery” category on CodeCanyon to some other.

Thematic maps – Is it possible to compare two or more sets of data to display on map? For example, compare crime rate vs. income levels USA states.

Hi, that’s not possible yet. You could use multiple maps in tabs.

Ok, thanks. This would be a great feature. In cartography, we used to create thematic maps where two or more sets of data could be visualized on one map. For example, color range would represent one set of data and a pattern density or other contrasting visual would represent another set of data. Great way to quickly visualize and understand two sets of geodata! I suggest adding such a feature.

Thanks, I’ll definitely add that in one of the feature versions.

I’m having a problem using this with any pages with ‘jquery-2.1.0.min.js’ already referenced. I know almost nothing about js , but guess there is a simple solution.

Hi, please provide a link to your mapsvg installation with jQuery 2.10


acctim007 Purchased

Is this what you mean? I copied everything to the root—http://www.uk-golf-courses.co.uk/mapsvg/

[replied by email]

Is it possible to put ‘Anglesey’ (The Island North West of Mainland Wales) ‘back’ onto the united-kingdom-counties.svg map? It’s on the united-kingdom.svg but missing counties map.

Hi, thanks for letting me know about the issue, I’ll do that now. Please contact me through support page to get the updated map: https://codecanyon.net/item/mapsvg-responsive-vector-maps-floorplans-with-directory-search-filters/2547255/support


tradeally Purchased

I have send you an email 3 days ago about my issue but you did not respond yet. I request you to reply me as soon as possible. Its urgent issue. Thanks.

Hi, I just replied, please check your mail.


n1kki6 Purchased

I may be overlooking something simple, but can or where do I adjust the stroke width? Thanks, Mike

Hi, there’s no such option but you can do that in InkScape / AI. Do you need to change all strokes at once or by each region separately?


n1kki6 Purchased

All at once. Just need to make it appear as if the state have more spacing.

Then you can try to change strokes width via CSS:
.mapsvg path {
  stroke-width: 5px;

Hey bro, i’m really impressed with your product and your level of response to customers queries. Your a gem ;) I’d like to purchase your script and make it play well with php and mysql (codeigniter). I like the details you got for every country and region… can you point me in the direction of a database with all the regions and region codes, after I purchase your script? If so, I’ll purchase. Furthermore, it seems that the plugin is only really for wordpress… would it play well with codeigniter and working with mysql? Thanks in advance

Hi and thank you for your kind words :)

MapSVG-jQuery latest version is 2.4.1 so it lacks some newest features of WP version which latest version is 3.1.1.

You can compare both versions:
jQuery: http://mapsvg.com/mapsvg/
WP: http://demo.mapsvg.com/

It is possible to connect MapSVG-jQuery with PHP/MySQL and many people have done that successfully in different frameworks. They load data from DB and put it into MapSVG.

I have no database with regions/codes but you can extract those from included SVG files with a few lines of PHP code and create your own database.

Hello, Can include this into a wordpress page?

Hi, yes you can insert the code generated by MapSVG-jQuery into a WordPress page but it is much better to use special MapSVG-WordPress version of the plugin: https://codecanyon.net/item/mapsvg-responsive-vector-maps-floorplans-with-directory-search-filters/2547255