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 $16, 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.

Interactive Maps Generator Screen

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 Placeholder
US Map

World Map

All Countries Placeholder
All Countries

World Map with Markers

Map Markers Placeholder
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.

Posted by Carlos Moreira

Web developer based in Porto, Portugal, working mostly with WordPress. Disclosure: Some of the links in this blog are 'affiliate links.' This means if you click on a link to a commercial product and purchase the item, I will receive an affiliate commission.

47 Replies to “How to add a World or Country Map to Wix”

  1. 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,

    Reply

    1. 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.

      Reply

      1. 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.

        Reply

        1. Hi! I see you also sent a support email. We can follow up using email. Cheers, Carlos

          Reply

          1. 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?

          2. 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.

    2. I need a map of counties within New York State. Is there such a map?

      Reply

      1. Unfortunately not for Wix. But for WordPress there would be.

        Reply

  2. 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?

    Reply

    1. 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

      Reply

      1. thanks that solved it!

        Reply

  3. Hey there, would this work on a Weebly website as well? If not, do you have an alternative that does? Thank you!

    Reply

    1. 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.

      Reply

  4. Greetings!

    Is there a way this could be applied to fictional maps I have drawn?

    Reply

    1. This will only work with the maps provided by the Geochart API and it’s not possible to use custom maps unfortunately.

      Reply

  5. 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?

    Reply

    1. 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.

      Reply

  6. 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)?

    Reply

    1. 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

      Reply

  7. 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!

    Reply

    1. 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

      Reply

  8. 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?

    Reply

    1. 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.

      Reply

  9. 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

    Reply

    1. 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.

      Reply

  10. 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?

    Reply

    1. Hi Courtney!

      • – Yes, it possible to link the country or markers to a page on wix or a different website. You’ll just need to add the URL you want.
      • – When using regions mode, you can colour the countries and water the way you need. In markers mode you can also colour the water and the full map (not individual countries). You can choose the color of your markers individually.
      • – You can only have round coloured markers, but they can have different colours on the same map.

      If you have any other question, let me know. Greetings, Carlos

      Reply

  11. 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

    Reply

    1. 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

      Reply

  12. 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?

    Reply

    1. 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.

      Reply

  13. 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.

    Reply

    1. 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

      Reply

      1. 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.

        Reply

        1. Yes, write me using the Contact Author option on envato market page, where the script is for sale. Greetings, Carlos

          Reply

  14. 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?

    Reply

    1. 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.

      Reply

  15. 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.

    Reply

    1. 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

      Reply

  16. 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

    Reply

    1. 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.

      Reply

  17. 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 🙂

    Reply

    1. 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

      Reply

  18. 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.

    Reply

    1. Hi Lynnea, the tooltip content accepts HTML, so you can add html to include images. Greetings, Carlos

      Reply

  19. 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?

    Reply

    1. 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

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.