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.

457 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

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

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;

atro212 Purchased

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

Suppose i use map then can I add link of external webpage on different states?

Hi, yes you can do that.

Hello, is there a feature to zoom on a particular country or region ?

Hi, yes that is possible. Please contact me by email, I will provide a solution (plugin update is required): https://codecanyon.net/item/mapsvg-jquery-responsive-vector-maps-floorplans-interactive-svg-images/1694201/support

Я включил меню – работает всё классно. Но вот пытаюсь сделать так, чтобы при наведении на пункт меню подсвечивалось сразу несколько регионов. Как это сделать? Может не на пункт меню, а просто на дополнительный div или ссылку? Было бы потрясающе!

Здравствуйте, проверьте ваш email на CodeCanyon – вы мне писали, я отвечал – но письмо не доходит, говорит адрес не существует.

Мой ответ был таким:


Это станет возможным в новой WordPress-версии MapSVG 3.2.0 которая выйдет на днях.

В jQuery-версии это к сожалению невозможно сделать напрямую, но вы можете попробовать реализовать это самостоятельно.

1) В поле Data добавьте список ID регионов, которые хотите подсвечивать, в следующем формате:
['Canada', 'Russia', 'Japan']
2) MapSVG > JavaScript > afterLoad (скопируйте и вставьте код):

    // объект содержащий методы MapSVG
    var mapsvg = this;

        // получаем ID региона из ссылки меню
        var regionID = $(this).attr('href').replace('#','');
        // получаем объект-регион из MapSVG
        var region = mapsvg.getRegion(regionID);
        // если объект не выделен (по нажатию), то подсвечиваем его
        if (!region.selected)
        // Если в "data" сохранен список регионов, подсвечиваем их:
        if(region.data && region.data.length){
            // перебираем список регионов из data
            // подсвечиваем
        // получаем ID региона из ссылки меню
        var regionID = $(this).attr('href').replace('#','');
        // получаем объект-регион из MapSVG
        var region = mapsvg.getRegion(regionID);
        // если объект не выделен (по нажатию), то убираем подсветку
        if (!region.selected)
        // Если в "data" сохранен список регионов, убираем с них подсветку:
        if(region.data && region.data.length){
            // перебираем список регионов из data
                // убираем подсветку

Не гарантирую что сразу заработает, код не проверял – если не будет работать, пишите (и дайте ссылку на вашу карту).

Fantastic Maps!

Thank you! :)

I am interested in an interactive mapping tool, but before I purchase this, is it possible to dynamically change state colors via a click event? Is there documentation to events, if any, are exposed for this?

Hi, yes that is possible. MapSVG allows you to define custom “onClick” event (that’s for jQuery version of the plugin. If you need WordPress version then event is called “click.region”).

If you need to change color:
  var clickedState = this;
If you need to change any other state color (Texas for example):
funciton(e, mapsvg){


is it possible to show Tooltips on click as well? Why? Because we’d like to show the information via mouse-over on devices that support the mouseover event. On devices that don’t support mouse-over event, the tooltip should be shown on TAP / Click. If a region has a link, a second tap to the same region should trigger the event bound to click (f.e. open another url).

Kind regards,


Additional information: If I click on another region (on mobile), the original tooltip may be closed like when I move the mouse.

Popovers seem not to be an option, because they seem not to support mouseOver event and activating tooltip @ popover produces more then one “Tooltip” to be shown at once.

Hi, I’ll think about adding such option in the next version of the plugin.