How to add a World or Country Map to Wix
There are a lot of reasons why you might want to add a map to your Wix website. You might want to display where you’ve traveled, the locations of the different offices for your business or who to contact on a certain state or region.
I developed the Interactive Maps Generator script, that allows you to create interactive maps that you can embed on your Wix website without the need to upload any file. It generates the maps using the Google Geochart API, which generates vector maps that work on all modern browsers. The generator costs $19, comes with 6 month support if something is not working and you can generate as many maps as you want for your website. You can choose to display a world map or any country map, including the US divided by states. The map code generated by the script will also work on Squarespace and other website builders that allow you to embed javascript code.
Creating your Map
After you download the zip file from codecanyon with the Interactive Maps Generator, unzip it and open the index.html file. Make sure you unzip the file, because if you open the index file from within a zipped folder, the generator won’t work properly. Once you have the generator working, follow the instructions on screen. Here’s a quick youtube video going showing you how to do it.
You’ll be able to select which map to display, if you want to colour regions or add markers, set an action for the click events and customize the map colours. You might need to generate a Google API key, depending on the type of map you’re building.
Get the Embed Code
When your map is ready, you can copy the content of the ‘Javascript Embed Code’ textarea.
This is the code you’ll add to your Wix website.
Paste the embed code on your Wix website
When you’re editing the page where you want to add your map, you can click the ‘Add’ option on the left side of the Editor. Click on the option ‘More’ and select the ‘HTML Code’ option. When the window for the HTML settings display, select the ‘Code’ option and add the map code you previously copied to the text area.
You can read more information on how to add HTML code in the Wix support site.
Once you update the code, you should be able to see the map and interact with it when the page is published or in preview mode.
Quick Video
Map Examples
Some examples of maps that you can create with the Generator.
US Map divided by states
US Map
World Map
All Countries
World Map with Markers
Map Markers
Contact Me
Feel free to contact me leaving a comment below for any pre-purchase questions or write me through codecanyon, once you have the script.
91 Replies to “How to add a World or Country Map to Wix”
Leave a Reply to Carlos Moreira Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Hello Carlos,
I just buy the maps generator.($16 licence version) .I want to use it on my new site with WIX.But codes doesn’t work properly. For example,i tried to upload world maps examples that you put on program doesn’t work on my site when i tried to upload.I couldn’t find how map preview works.I wrote all the html codes in right places but nothing happens on preview map.
Is there any youtube video for wix?
Thanks,
Hi Ali! Make sure you also have the Google Maps API key. Some maps might not work when that’s missing. That would be the case for my examples also, they would only work when testing on your computer. If you’re not even seeing the preview when you open the generator, then it could be another problem. Make sure you have unzipped the folder and that you’re not opening the file from within the zipped folder. If the problem persists, write me using the ‘contact author’ option on the support tab of the generator page on envato market.
Hi,
I am having the same problem as Ali. I am working with Wix. When I bought the plugin, it wasn’t a zip file as you describe but a folder with the index in it . I clicked on the index. But I am not able to see a preview of what I’m doing and once I enter the code into the code area on Wix, it still shows as a clear map. I don’t understand this whole API key thing, I am not a coder. What do I do next? It looked so simple in your video I thought I could handle it.
Hi! I see you also sent a support email. We can follow up using email. Cheers, Carlos
I have the same problem as Stephanie.
The preview is not changing, and i would like to change it to continents only.
What can I do?
Hi Sarah
Try opening the generator in a different browser to check if it works. If the problem persists, write me using the support tab of the generator page on codecanyon.
I need a map of counties within New York State. Is there such a map?
Unfortunately not for Wix. But for WordPress there would be.
Hi Carlos,
I am trying to use your map on my Wix website and i am running into a issue which i can’t solve but hopeful you can. Everything works fine but when i try to add an action value so that it can link it to another part of the website nothing happens. Even when copying code from example like World Map – Continents proves no better. When i click on the generator on the preview it says “This page says: http://en.wikipedia.org/wiki/Europe” which is the link but it doesn’t come up on the website any advise?
Hi! Usually what’s missing is to select the proper ‘active region action’, in this case, set it to ‘open new url’. If the problem persists even after this is correctly set, write me using the ‘contact author’ on the support tab from the Generator page at envato market, sharing the link to the page where you have the generator code. Cheers
thanks that solved it!
Hey there, would this work on a Weebly website as well? If not, do you have an alternative that does? Thank you!
Hi! Yes, this will work on Weebly also. I never used it, but from what I see online, you’re able to add custom javascript to your pages, so it would also work.
Greetings!
Is there a way this could be applied to fictional maps I have drawn?
This will only work with the maps provided by the Geochart API and it’s not possible to use custom maps unfortunately.
Hello, does it include the countries and continents count? I am just starting up my wordpress blog, not sure if this interactive map work with my current theme, does it work with every themes?
It doesn’t include the automatic countries and continents count, that would need to be done manually. But for WordPress this would be the correct version: https://cmoreira.net/interactive-world-maps-demo/ not the one linked in this article. It will work will all themes.
I have a quick question,
Would I be able to customize the map even further by splitting regions (having southern California and Northern California be two different colors for example)?
Hi Jenni. The generator only works with the maps provided by the Geochart API, which doesn’t allow for customizations and doesn’t include a map for California divided that way. However you can display a map of the US States divided by DMA regions, which isn’t the same as counties, but might be helpful in some scenarios. Here’s a screenshot of how California looks like when divided by dma/metropolitan regions: https://prnt.sc/ilxkhy hope it helps. Greetings, Carlos
Hi,
Do you also know of a maps program which I could use to split it up even further?
I wish to link my Instragam photos to the exact spot in every city.
Loved using your program by the way, works perfectly!
Hi! If you need city level detail, you’ll need to use something with Google Maps. Probably Google Maps directly allows you to build a map and then embed it on wix using the same concept. Hope it helps. Greetings, Carlos
Hi Carlos
I just need a map from Spain and would like to manually place diferent symbols for places. Would this be possible ?
Images could be bigger when people link at them and show a particular comment or rating?
Hi Helen, you can display Spain: https://cmoreira.net/interactive-world-maps-demo/spain/ but it’s not possible to use custom symbols, only coloured round markers.
Hi, Carlos
Do you know any example of WIX site, that is using your map code?
I have tried to add your example scripts to Wix html embed, but it does not work, so I am not sure if Wix is OK (many limitations)
Thanks
Hi Rita! I have tested myself with Wix, so it should work well. If you’re still having issues adding your map, contact me using the support option on envato.
Hello Carlos,
Is possible to link each country/marker to another page on wix or another website? Also, using wix, it is possible to customise the colours on the map and the shape of the marker, or two have two different types of markers on the same map?
Hi Courtney!
If you have any other question, let me know. Greetings, Carlos
Hi Carlos,
I can’t seem to make the world map bigger once I pasted the code in Wix.
Any idea how to change the size of the map? It’s a bit too small now.
Thanks alot!
Detlef
Hi! In wix you can resize the container where you place the map code. Make sure it’s as big as you want the map to be. Then on the map generator, make sure you have the ‘Responsive (Beta)’ option enabled and the map should take the full space available. Greetings, Carlos
Hi, do I have used this code on wix and it has worked perfectly! But now I don’t use that website anymore and I am trying to set it up on a new wix website and it is not working at all, it is just blank. Do I have to purchase a new license even if I already purchased one?
Hi! You might need to have a new google maps api key together with the code. I would say to download the latest version of the generator, import your map if you have the settings saved and get the new embed code again. No need to get a new license.
Hi Carlos,
I am from Vietnam, I would love to ask if the map has Vietnam divisions? Is it the latest update? I would love to buy but making sure that it has Vietnam divisions.
Thanks Carlos.
Hi! Yes, there’s a map for Vietnam. Here’s how it will look like: https://cmoreira.net/interactive-world-maps-demo/vietnam/
Greetings, Carlos
Thanks Carlos,
That is an awesome work.:) May I email you regards to this? Because there is some issues I cannot share in public. Thanks Carlos.
Yes, write me using the Contact Author option on envato market page, where the script is for sale. Greetings, Carlos
Hi Carlos, once I generate a map with the countries I have been (coloured and with links) and embed it in my Wix website, will I be able to update it from my website (e.g. adding new countries I will travel to), or each time I want to add a new country will I need to create the whole map in your generator first and then embed the link again in my website?
Hi Thomas! You can save the ‘current settings’ of your map in the generator. This way when you need to add a new country, you can load your settings back in the generator to get your map back and continue to add countries and get the updated embed code. You won’t need to rebuild the full map again.
I have purchased and downloaded the Interactive World Maps and can’t seem to access them. I have also tried the example Embed Codes for Wix, and those don’t seem to work as well. Please advise…. I was about to purchase the Interactive Map Generator, but held off pending your response. I can’t keep spending without getting results.
Hi! The ‘Interactive World Maps’ is a WordPress plugin, so it won’t be possible to use on wix. The ‘Interactive Map Generator’ linked in this map is a standalone script that will generate code that will work on Wix. The current examples unfortunately won’t work because they don’t include some necessary paramaters, I need to update them, sorry. You can write me using the Contact form on envato if needed. Greetings, Carlos
Hi Carlos
I am looking for an interactive map that I can add to a clients real estate site built in Wix. I am looking for something that has the ability to display a real-estate site map and the functionality to highlight specific areas on the map with pop-up information about that location.
Is this something that your plugin can provide?
Thank you
Hi! Unfortunately I don’t think my maps generator will be the most appropriate, since it won’t be able to display city details, which for a real estate website I think it’s importante. It’s only able to display full country shapes divided by regions.
Hello Carlos! First, thank you for this software, it’s great!! I had it on my travel blog but now I would like to had some more countries on my map. How can I change it? I can’t find any info about that.
Thank you 🙂
Hi Sarah!
When you initially built your map, the information from your edit usually would stay cached in the browser, if you open the generator from the same location it might bring up the map as you built it. Another way to have a backup of your generator is to save the information from the ‘current settings’ tab to later be able to import those settings. This would be the way to edit your map to add new countries. Greetings, Carlos
Hi, interested in possibly purchasing this but I do have a question… I will be using this for a travel agency website. When you hover over a n area, for example if I hover over Hawaii, is that box that pops up only suitable for text or can images be put into the info box? The idea is that they can hover over different locations for quick pictures or brief descriptions of things to do or places to visit.
Hi Lynnea, the tooltip content accepts HTML, so you can add html to include images. Greetings, Carlos
Hi,
I am new to blogging so it could be great if you could help me.
I have purchased the map and successfully installed it to my Wix page. But now I have no idea how to link one country to the article, how to make the URL, am I doing that in the generator?
Hi Zoran, thank you for using the generator. You’ll have to explore the ‘open new url’ option in the ‘active region action’ of the generator. When you have that option selected you’ll need to add the URL you want to open in the action value for each country entry. Your posts on Wix will have categories or tags with the name of that country and when clicking those tags/categories a page with a list of posts about that country should open. That’s the link you’ll need to use in the generator.
You can also contact me using the ‘contact author‘ option on envato. Hope it helps.
Greetings, Carlos
Hello Carlos
I’m interested in purchasing your map generator. But obvisiously the price increased to 19$ instead of 16$ indicated and there are 2$ handling fees added. Please, could you clear me up about the price strategie. Thank you
Hi! Thank you for your interest in the generator! At the time of this writing – Feb 2020 – the script base cost is $19 ($16 was indeed the original price until the end of last year). Then depending on the payment method and country from where you’re purchasing, other fees might apply (VAT or payment fees for example). Sorry for the misleading information on the post. I need to update the image and text. If you have any other question let me know. Greetings, Carlos
Hi Carlos,
Is it possible to embed your map onto a regular site and not Squarespace or Wix? I would assume JS script will work on any site, still just want to make sure. Thank you!
Hi! Yes, it will work on any site that allows you to embed javascript. Greetings, Carlos
Hi Carlos,
Can your map function display PDFs or other file types?
Thanks,
Hi Jeff
You can link to any type of file, if it’s online. The map itself is only able to link to them, not to open/display them.
Hi. I am considering using this app for a client’s website. Can you please confirm if I can open this app on an Apple mac and access the dashboard. I am sure I will have more questions . Just this one for now. Thanks.
Hi Mickey, you can. It works on a browser, no need to install anything. Greetings, Carlos
Hi Jeff,
I have a question. I am trying to have the link (URL) that I am inputting into the ‘action value’ connect to a separate page on my website and take me to that page outside of the map box. Right now it takes me there, but it is a little window within the website so it looks unprofessional. Is there a way around this?
Thank you.
Hi Leo
Try setting the map to open the url on a new window. Wix is a bit picky and for security reasons it won’t allow you to have external code open the link in the full page.
Carlos* (my apologises)
Hi Carlos,
I am trying to link the countries that I have linked to certain anchors/parts of my wix page. How do I do this via the map that I have created?
Thank you!
Hi Carlos,
Can you respond to this question, please? Also, my map has its own scroller on my page, how do I remove this?
Thank you!
Hi Leo, sorry for the late reply. You can use anchor links. Basically use the full URL of the page where your map is (and your content) plus an anchor tag with the hashtag. The same way that if I use https://cmoreira.net/blog/how-to-add-world-or-country-map-to-wix/#comment-2338 it will link to this particular comment. Greetings, Carlos
About the scroll, it would be Wix adding that, making the container for the map code smaller. If you can resize it, try to make it bigger. For follow up questions, please use the support contact form.
Hello Carlos.
I would like to create an interactive map of the Czech republic devided into its departments. Does your maps generator include even this? Or there is only Czech republic as a whole country?
Thanks.
BR.
Erik
Hi! The generator has a map of CZ divided by 13+1 regions.
Hi Carlos:
I would love to use this on my website but I’m not seeing Antartica. Basically I want people to click on a country and be directed to the relevant travel articles. I understand Antartica is not a country, however, it will still be part of my travels and would like website visitors to get directed to the articles when clicked.
Hi Kelly, unfortunately at the moment it’s not possible to include Antartica.
did this get fixed over the past year + by chance? I need Antartica as well.
Thanks
Hi Johnny
No, with the current generator it’s still not possible to have Antartica.
It might be worth checking out this new alternative: https://my.interactivegeomaps.com/
Hello! Is it possible to create an interactive map of the Camino de Santiago – the Camino Frances – and have it as a narrow strip on the bottom of pictures in my picture gallery, so the picture has a corresponding location on the map? Thank you!
Hi! Unfortunately not, that’s not possible. It’s not possible to add lines, I’m sorry.
Hi Carlos,
Thanks for making the tool available. I am trying to create a map of Africa alone (excluding visual of ME, Europe and South America. Also, instead of a tooltip popping up, I’d like to have a lightbox open on Wix.
Please, could you advise?
Thank you,
Andrew.
Hi Andrew
Unfortunately that’s not possible. In the generator it’s not possible to exclude regions from the maps available and it’s not possible to have a lightbox, only have content in tooltip and open a new url. Sorry for the limitations.
If you consider switching to a self hosted WordPress, I would recommend this tool: https://interactivegeomaps.com/
I hear rumours that Google have stopped the Google Geochart API. Is that true? If so do you have a workaround I need to be able to show data of product take-up by country on a world map.
The Geochart is part of the Google Visualization API, which is not deprecated. They have deprecated Image Charts and the Charts API, which are different.
Carlos,
Is it possible to have a feature that does the following to be embedded into my six website:
1. A map search option
2. Resembles Google Earth’s Satellite opton
3. So users of my website can input an address into my website and then see the house based on the address?
Not with this generator unfortunately. Sorry for the limitations.
Hello Carlos, thanks a lot for your tool, it is really helpful. Hovewer, i have difficulties with size of it in WIX. When i plaxe everything on max, at generator i put Responsive (beta), aspect ratio on so still it is very small, i dont know what to do with that. Can you help me please? Best, Tadeas
I have found the solution, that beta is not working as it should be. It is better way to place it manually (above section).
Hi Carlos. I am working for a research team on their Wix website. We would like to have the world map on the Home Page and have a few pinpoints on it (like the last photo above) for every city that is collaborating with the research team. Then when someone clicks on that pinpoints, we would like that to be directed to a new page where there will be detailed description of that city. Would it be feasible to use this app?? And do we have to use Google Maps API key for this action also (we do not want to showcase any detailed address)??
We were also wondering about the Price. Is this one-time payment??
Thanks in advance.
Hi Sevil. This is a one time payment. You don’t need to use the google maps api key, if you use coordinates directly. What you describe should be possible with the maps, yes.
Hello,
I would like to install an interactive map on my Wix site that allows me to add markers. Under the map, I would have a list of documents. When a visitor clicks on a marker, I need it to open one of the documents from the list below the map.
Will your program allow me to do this?
Thank you,
Mike
Yes, you can have the link link to any url, so you could link to the document, which would open in a new tab.
Hi Carlos,
I host a website which requires a fairly complex map system to show case articles (listed in info submitted privately below).
At the moment we embed some of our own code into Wix to generate the pins and pop up boxes, this is overlaid onto an image of a world map. We have encountered some issues whereby when editors go into make changes to other parts of the website, the pins migrate down the screen, generating white space where before there was none. I am currently looking for a solution to this and wondered whether your software could solve this and if it could fulfil the visual and user requirements of the existing map, or perhaps you had other suggestions?
Thank you so much for your time.
Best wishes,
Maddie
Hi Maddie
The map visuals would look different, but it’s possible to do something with my map generator yes. Contact me and I can provide a demo.
Greetings, Carlos
Hi there! Would it be possible to have a sample of code to see if it works properly on my website before i purchased it? Thank you 🙂
Hi! You can check a sample here: https://jsfiddle.net/qmu4r7Lo/
Hi,
I would like to use the map as a preview of where to travel, but I have a question about the world map. Does the user have the ability to zoom in on the world map at all?
Thanks so much
Hi Johnny
No, with the current generator it’s not possible to have zoom controls.
It might be worth checking out this new alternative: https://my.interactivegeomaps.com/
Hi Carlos,
I would like to purchase your map generator and display it on my Wix site to show where I have traveled. Can you confirm the following: 1) This purchase would allow me to create both a world map and a US map (2 different maps for 1 purchase) and 2) The maps can continued to be updated as I continue to travel to new places. Thanks!
Hi Kat, thank you for your interest in the generator! You can generate different maps, but they will need to be in different pages of your website, so they don’t conflict.
In the generator, there’s a field called ‘Current Settings’. You should backup that content to be able to load them again in the future and continue to edit the same map.
Thank you! I purchased the generator, the USA and World maps look great on my site.