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.

478 comments found.

hey, is it possible to create a directory with search filters with the jquery version? one like in the wp version

Hi, no, filters are available only in WordPress.

Hi. Is this working on localhost? I have only two inputs both are text, would I need to select map, since I have one in user-upload?


Is it possible to save builder work? For instance when you refresh builder all settings are lost.



Yes it should work on localhost, no it doesn’t save – you need to click save and copy-paste the code somewhere.


egency Purchased

Will there be an update of the jquery version to 3.x?

Hi, version 3.x requires a lot of MySQL/PHP functions besides javaScript so if there would be an update then that would be a new MapSVG-PHP plugin and not MapSVG-jQuery.

If you really need 3.x functionality on a non-WordPress website then you could purchase a MapSVG-WP, install WordPress on a subdomain of your website and then insert a map to a page of your main website in an iframe from a wp-subdomain. The map on http://mapsvg.com front page is added that way. The website is non-WP, just plain HTML/CSS. And WordPress is installed on http://demo.mapsvg.com


egency Purchased

Hi Roman, thank you for your feedback and the advice. Great plugin. Best, Patrick

Hi Roman, the latest version does not support the popover to overflow the map. How to customise that the popovers will pop up even when the map is smaller? Best regards, Harold

Hi Roman. Yes I thought so, but then I can’t follow your solution. Can you just give me the small piece of code to add? Like ‘centermaponpopovers: true’. best regards, Harold

Hi Harold, sorry but I don’t understand – why can’t you do that? I just download latest version of MapSVG-jQuery from CodeCanyon to check if that option is there – and yes, “center map on popovers” option is definitely there in “Settings” tab. You can upload update from CodeCanyon and update MapSVG on your server to get that option. It’s just not in the demo on mapsvg.com yet but it does exists in the version uploaded to CodeCanyon.

Thanks. Found it. Best regards.


sbest58 Purchased

Hi Roman, how do I set different colours for different regions when selected? I have tried this : var selectedColours = { ‘Munster’:’#00936A’,’Leinster’:’#90A7D6’,’Ulster’:’#903F98’,’Connacht’:’#f00’,’National’:’#79936A’}; var newColour = function(region_id, mapsvg, region){ return ’”’ + (selectedColours[region_id]) + ’”’}; jQuery(document).ready(function(){ jQuery(”#mapsvg”).mapSvg({width: 823,height: 823,colors: {baseDefault: ”#fff”,background: ”#fff”,directory: ”#fafafa”,selected: newColour,status: {}},regions:

but it does not work


sbest58 Purchased

Hi Ronan, how do I stop the menu items – the pdf’s with links – in the lists for each region from triggering a ‘region.selected’ call on rollover and a ‘region.getCenter’ on click.


sbest58 Purchased

Hi Roman – sorted the link issue in the menu list – commented out lines 2313 – 2333 from mapsvg.js

Hi, please contact me by email if you need more help.

Hi, used this in an older project and we used to define the regions object with the ISO3166 code of the country. Now it’s changed to Country Name. Any way I can get this to work with the ISO Code? Otherwise we risk having a problem with countries such as Ivory Coast versus Cote d’Ivoire or East Timor versus Timor Leste. Alternatively, any way of getting all the defined world regions?

I found a solution to this – use calibrated world map which has region IDs of the country ISO codes.

How can I set viewBox from region ID for the calibrated world map?

Do you mean that you need to zoom to country?

Indeed, thanks so much!

Hi! is it possible to display same map (same country) multiple times on the same page to show statistical info? Only one map is interactive. Others are show the results by coloring each region. is it possible to do this by your code? Thanks!

Hi, yes, you can include multiple maps (it can be maps created from the same SVG file) with different settings on the same page.

ill get this then :) thank you!

demo Map & menu no work

Thank you! fixed


the disabled property inside the regions object doesn’t even work. It still allows interactions. NM this was a css issue. I still don’t see why the css has fonts linked to nothing.

Hi, I’ve sent you a fixed version by email


Tomski Purchased

The SVG file I want to use is about 5mb is that possible if I purchase this script the demo does not allow me to upload a file this big?


Tomski Purchased

Damn this is holding m,e back on this great script I have tried diff SVG that came with the script but I cant get the markers to show


Tomski Purchased

Fixed sorry it was my bad

An idea would be to create a map and be able to edit it is that possible at the moment?

After you insert the map to any page of your website, enter URL of that page on MapSVG builder start screen to continue editing settings of that map. Then update the code on the page when you’re done.


Is it possible to create a custom floor plan of an office space with desks that would show info taken from a Google Sheet where each cell was for each desk, and it would display the cell data from real-time whenever it is clicked on? I would love to purchase this product if that is something that is feasible to do

Hi, I don’t know if Google provides such API to read cells value from Google Sheet. If you know that such API exists and you have enough experience with javaScript to use it then you could use MapSVG event handlers such as onClick / afterLoad to read values from Google and load them into MapSVG.

Hey, I think I have a problem, everytime I click on “draw” everything freezes and stays grey. Something wrong?

Hi, can I get access to your WordPress? Please use support link to send your WP credentials: https://codecanyon.net/item/mapsvg-responsive-vector-maps-floorplans-with-directory-search-filters/2547255/support

Hi, can I add a background to my SVG map? Can we make the menu links look like buttons and position them anywhere? We want to create something that looks like the below link visually. https://www.japan.travel/en/

Hi, buttons in the example are part of SVG file. You can add such buttons InkScape editor and you can add image background there too: http://inkscape.org – don’t forget to set IDs for new SVG shapes (buttons) otherwise they would not appear in Regions list. If you need to make the buttons look exactly as in example, give the buttons transparent fill rgba(125,125,125,0). On mouse over change color of the buttons would change to visible color making the buttons visible (MapSVG > Colors > Hover)

hi RomanCode,

We will like to see if i can get some customisation to this or will it require custom job… please how can we contact you

Hi, please go to my profile page (click on my avatar or name) and on the bottom right side you’ll find an email contact form.

Hello RomanCode! My new version no work& https://www.avito.ooo/mapsvg/

I’m sorry for that, I’m working on a fix. Some javaScript code soaked in from MapSVG-WordPress version into MapSVG-jQuery version and that broke a few things. I’ll do my best to fix that as soon as possible.


KINGpromo Purchased

ok. Thanks!

Hi, the bug is fixed, new version uploaded to CC. Thanks for your patience! :)

Hi, I have the same problem as KINGpromo

Hi, I just uploaded latest version of MapSVG-jQuery to CodeCanyon again. Please try to download and update.

Hello there,

http://www.susbitkiciligifestivali.com/mapsvg/ not working can you help me? Note: Select the “sus.svg” file from the list of SVG files

Thank you

Hello RomanCode

I resolved the problem. Thank you for everything Good work

http://www.susbitkiciligifestivali.com/festival-alani.html you can see the latest version from this link :)

Hi, just uploaded a new update, please download. Thank you! :)