How to add a World Map to your Squarespace website

Squarespace is a popular solution for people who want to quickly create a website with quality design. It allows you to create a website easily, with their advanced builder.

The Interactive Maps Generator script that I developed a while back, allows you to generate maps using the Google Geochart API, that you can embed on your squarespace website. The script costs $16 and you can create as many maps as you want for your website.

Country maps are also available, like the map for the United States of America, divided by states, that you can give interaction to.

Create your Map

Once you have the script, unzip the file and open the index.html file on your browser. Make sure you unzip the file and not open it directly from inside the zipped file, the script won’t work this way. Once you have the generator working follow the onscreen instructions to create your map.

You’ll be able to select which kind of map to display and what interaction to have. You can either have a map and colour regions or add markers to different locations.

Get the Embed Code

Interactive Maps Generator Screen

Once your map is ready, you’ll just need to copy the content of the ‘Javascript Embed Code’ box to place it on your squarespace site. Make sure you select all the content of the box, so all the necessary code is copied.

Paste the Embed Code

In your squarespace website, go to the edit screen of the page where you want to place the map and click the ‘+’ button to add a content block (More information on how to add blocks). Select the ‘Embed’ option.

The embed screen will only show a field to add a URL, but you can click the < / > button to add the code directly. Once you click that button a new screen will display, with a bigger text area where you should place the code you copied from the generator.

Save your changes

Once you save these changes, you should see the map on your page. You now have a map on your squarespace website! You can get the map generator script on Envato Market. It will work on most modern browsers, no need to install any new software.

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

 

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.

124 Replies to “How to add a World Map to your Squarespace website”

  1. Ive added a map to my site but it doesnt load when you click the nav bar titles “Audiences”. It only loads once you refresh the browser.

    url where the map should be [url removed]

    Any ideas why its doing this?

    Reply

    1. Seems your site loads content via ajax, with a navigation/transition effect. When the page loads this way, the javascript code doesn’t run. If you disable the navigation effect/transition, it will fix the issue. If the problem persists, we can follow up via email.

      Reply

      1. Hi Carlos, your maps are lovely! We need a customizable map of only the US state, Mississippi, with the different counties within. The hope is the user can hover over the different counties and see contact information for each. Also, we need to be able to change the contact information within our Squarespace site as the business expands and more service areas are added. Is this something you can create for us?

        Reply

        1. Hi Valerie! Thank you for your interest. You can display a map with the shape of Mississippi and add markers to it, but it’s not possible to display the county borders, just the state borders. So you would need to add the interaction using markers. Sorry for the limitation. If you have any other question let me know. Greetings, Carlos

          Reply

  2. Great service! I have some questions however. Is there a way to make the background transparent and is there a way to only show a smaller country like Sweden (without bordering countries)?

    Reply

    1. Thank you! Yes, the trick is to use the word ‘transparent’ in the background color field and in the ‘inactive regions’ field. This will make the background transparent and the regions without data will also be transparent.

      Reply

  3. Nice. Is it also possible with the Markers display mode? And is it possible to make the map zoomable by scrolling (or any other means)? I’m using Squarespace. Sorry for the barrage of questions :9

    Reply

    1. The maps are generated using the Google Geochart API, which doesn’t have a builtin zoom feature. It has the magnifying lens effect when the markers are close together. In the WordPress version I was able to implement a zoom feature and some tricks to hide regions on markers mode, but with the generator version, that uses purely the geochart options, this is not possible unfortunately.

      Reply

  4. Hi Carlos, for using the plug-in I have to pay $14 every month?
    Thanks.

    Reply

    1. Hi Gabriel! No, the $14 it’s a one time payment and then you can use the script forever ๐Ÿ™‚

      Reply

  5. Hi Carlos,

    Great map, I really love it! However, I’m currently trying to add a second map with markers into my Squarespace website. The markers can show up in the embedded script previews, but they won’t show up when I view from my website. Is there anything I need to change?

    My first map (only regions) is on another page and has a different ID from the second map that’s giving me the issues.

    Reply

    1. Update: Using coordinates will work.

      I would still love to know why text location would not show the markers on the website. Otherwise, it would be a lot of work looking up coordinates for each location.

      Thanks ๐Ÿ˜›

      Reply

      1. When using text locations, they need to be converted into coordinates, which takes a bit a time and requires a Google Maps API Key, like I mentioned in the other comment. If you’re missing the API Key, that’s probably why they weren’t displaying. If you use coordinates, then the markers will display directly. I would recommend using coordinates directly, since this way the maps will also load much faster.

        Reply

    2. Hi Wen! Thank you for using the generator! You are probably missing the Google Maps API key. This is needed when we need to convert text address into coordinates. Once you have added the API Key, it should work. Cheers, Carlos

      Reply

  6. Hi Carlos, it’s me again, I just bought the plug-in. Is there a way to just show a region, for example, in Italy?
    Thanks again.

    Reply

    1. Hi Gabriel, thank you for purchasing the generator! You can choose to display Italy divided by regions, but it’s not possible to display only a region of Italy, only the full country.

      Reply

  7. There is no way or trick to display a region at all? Are you looking forward to upgrading the plug-in?
    Thank you Carlos.

    Reply

    1. The maps are generated using the Google Geochart API, which doesn’t provide maps of individual country regions (only for the USA), so I won’t be able to implement that on the generator. If they implement this feature, then yes, the generator will also be able to do it. Unfortunately at the moment it is not possible.

      Reply

  8. Hi Carlos – I’m glad I came across your website and the script you created. Before purchasing, I want to clarify that this will serve my client’s needs. They are a sales representative to the East coast of the US. They want to have an outline image of just the North East region of the country. When they hover over a state they would like to have the logo of the company they represent in that state. I know this is very specific but I just want to see if downloading your script will allow for this type of map function!
    Thanks

    Reply

    1. Hi! You can have the states on East Coast coloured and have an image display on the tooltip when you hover the state. By default the generator will only provide the full map of US. However, with some custom CSS it’s possible to ‘crop’ the map and display only a certain part. If you’re ok with working a bit with CSS I can give instructions. With the WordPress version this is much easier, since I have integrated a CSS Generator: https://cmoreira.net/interactive-world-maps-demo/southeastern-united-states-map/

      Reply

  9. Hi Carlos
    Awesome service. I have a few questions I want to clarify before buying your script!
    I want to add a map of surfspots and nice beaches in Portugal on my website. Thus I need a map of Portugal, is that possible? Also I want each of the pins on the map to have some info attached when you click it. Is that possible to add using your script?
    Thanks in advance!
    Simon

    Reply

    1. Olรก Simon! Yes, the generator includes a map of Portugal, but it only displays mainland Portugal. Here are some examples: https://cmoreira.net/interactive-world-maps-demo/map-portugal-wordpress/ (built with the WordPress version of the generator, but the maps are the same). You can set a URL to open when you click a marker for example. With some extra javascript (not provided by the generator, but easy to implement) you can also have information display below the map when a marker is clicked. And you can always have information display on hover, in the tooltip. If you have any other question let me know. Greetings, Carlos

      Reply

      1. Thanks for the quick reply Carlos.
        That looks good – only need mainland Portugal, so that’s all good.
        Found this example on your website: https://cmoreira.net/interactive-maps-generator/examples.html
        The information display below the map when you click the marker, that you are talking about, is that like with the map of Germany in the above website?
        Would you still be able to assist with this extra javascript and would it be extra?
        Also, is it possible to control the size of the markers? Because I recon I will have a lot of markers on the map, so it would be ideal for me with smaller markers or a zoom function on the map!
        Thanks again!
        Simon

        Reply

        1. Yes, that’s exactly it. You’ll see in the screenshot the ‘custom action’ was selected, and there’s some extra javascript code. I can help with that, no problem. Yes, it’s possible to control the size of the markers and when there are markers overlaying there’s a ‘magnifying lens’ effect that pops up. I’ve updated the markers map of Portugal and added 2 markers close to each other so you see what I mean: https://cmoreira.net/interactive-world-maps-demo/portugal/ Greetings, Carlos

          Reply

          1. Sweet! Thanks so much Carlos – that looks awesome! I’ll get get started with my map then ๐Ÿ™‚
            And thanks for the possibility to help out if need be.

          2. Hi Carlos.
            Great map generator mate!
            I have been working on my map of Portugal and are trying to make the information display below the map that we were chatting about yesterday. The extra javascript code you were talking about, is that something I need to add in the script itself or in the map generator? It would be a big help if you could assist me in this matter!
            Thanks a lot
            Simon

          3. Hi Simon, now that you have the script, please contact me using the ‘contact author‘ option in the support tab of the codecanyon item page. We can follow up via email after. Greetings, Carlos

  10. Hi Carlos,
    Is it possible to use this version of a UK map and add location dots as different schools enter a competition?

    see attached linkโ€ฆ
    [link removed]

    Thanks
    Mark

    Reply

    1. Hi Mark! You can have a map of UK with markers on specific locations, yes. Consider however that the map doesn’t have a zoom feature like the map on your example and the markers would need to be added manually, when there were new entries.

      Reply

  11. Carlos,

    I just purchased your map generator and wanted to have an interactive map of North Carolina and have the name of counties pop up when you hover. I have been unable to figure this out. Can you help?

    Reply

    1. Hi! Only way to do this would be with markers. The Geochart API doesn’t include county maps unfortunately. You can contact me via email for further details.

      Reply

  12. Hi Carlos,

    I am having an issue with the world map on my website. When I view the map in Squarespace editor, I can see the color-coded countries and pop-up windows, but when I go to the website, the map is blank and not interactive. I think it’s a Squarespace issue, but I am not sure.

    Reply

    1. Hi! Most likely the Google API Key is missing and the regions are not being geocoded when published. In the generator, add a Google Maps API key and try to add the new code, with the key incorporated. Check if this is the issue. If the problem persists, contact me directly using the support channels.

      Reply

  13. Hi Carlos.

    I have a Squarespace site I use for photos while traveling internationally. I would like to somehow have a map of all the places I’ve been, which currently is in a CSV file, and then embed it on my site.

    Is this possible with your program? I’m new to all this so just looking for options.

    Also, does your program allow from tracking or do you need to manually enter each place?

    Reply

    1. Hi JJ! If the CSV is formatted correctly, you can import it easily into the ‘advanced tab’ of the generator. This would be the format:

      Region Code, Tooltip Title, Tooltip Text, Action Value, HTML Color Value;

      For example:

      US, USA, Click to visit the White House Website, http://www.whitehouse.gov/,#6699CC;
      PT, Portugal, Click to visit Portugal’s Government Website, http://www.portugal.gov.pt/,#660000;

      Or if you only want to highlight the country with no interaction, you can leave some columns empty, like:

      US,USA,,,#6699CC;
      PT,Portugal,,,#660000;

      You would need to add the countries manually, it doesn’t have a tracking system.
      Hope it helps.

      Reply

      1. Thanks. I’ve been playing with the free version from countries traveled to see if the full generator will be useful. I think it will be. I am however struggling to figure out how, on squarespace, to get the world map centered on a page solely for it. Might be simple fix but if I dedicate myself to the full version I would need something that centers and dominates the page and is interactive. Any thoughts?

        Reply

        1. The free ‘visited countries’ generator I have on my site only allows you to embed an image which is different from what the actual standalone generator provides. With the generator you’ll get javascript code, which will allow the map to be interactive, to have click actions and tooltips displaying on hover. You can enable the responsive mode and have the map take the full space of it’s container, meaning that if you place the map code on a full width container, it will take the full width. As long as your container is centered, so will the map be.

          Reply

  14. Hi Carlos, I just bought your mapping tool but nothing seems to be updating. When I add a coloured region, or even when I change the map from ‘World’ to ‘Africa’ for example, neither the preview changes nor the end result after I embed the Javascript on my website. Any idea why this is happening?
    Thanks, Steve

    Reply

    1. Hi Steve, usually when the generator is not working properly is because it wasn’t properly unzipped from the folder. You should unzip the folder/file you download from codecanyon and not open it directly from the zip folder. Check if this is the issue. You can also try to open the index.html file with a different browser, to check if it makes any difference. If the problem persists, contact me directly using the support channels.

      Reply

      1. I switched from Safari to Chrome and it’s working now, thanks!

        Reply

  15. Hello Carlos!
    I’m willing to buy the script but I have 2 question:
    -Is the map of southern Europe available, specifically the Balkans area?
    -if the case, what happens when I click, for instance, on a specific country such as Bulgaria? Can I order the redirection towards, another link ( in squarespace case, another page) that provides all the details of the country, comments, studies, and so on?
    Thank you very much

    Reply

    1. Hi! Thank you for your interest! The balkan countries are actually divided between the southern europe and eastern europe maps, so it wouldn’t be possible to display only one of those maps if you need for example Bulgaria (which is in the eastern map) and Serbia (which is in southern europe map). The maps follow this hierarchy: https://unstats.un.org/unsd/methodology/m49/ (click ‘geographic regions’ on the left menu). So you would need to display the full Europe map. Apart from that, yes, you can set a country to open a new link/page when clicked. Greetings, Carlos

      Reply

      1. Thank’s a lot!

        Regards

        Reply

      2. How do I direct a click on specific countries to another squarespace pages? Obrigada!

        Reply

  16. Hi Carlos,

    I’m having problems with adding the countries I’ve been to on the map. I type in the ISO codes and nothing populates or updates and I’m not sure why. I also, would love assistance on the width. The map looks good on the computer, but when I go to the mobile version on my phone, the map is cut off. If you could assist in both of these issues I’d greatly appreciate it.

    Thanks!

    Reply

    1. Hi Penelope! Double check the codes you’re adding. They should be 2 letter codes for regions mode, but coordinates or an address for markers mode. The generator has an option to enable a responsive behaviour. With this option enabled, it will resize the map on mobile.

      Reply

  17. HI Carlos,

    Great little plugin, however I keep getting a blank screen when publishing the embed code (have tried on Squarespace and a blank html file). I have also tried 2x google API keys, any idea as to what could be the issue?

    Many thanks,

    Elwyn

    Reply

  18. Hey Carlos!
    Before purchasing I wanted to see if it is possible to have a world map with US broken out by states, or if only two separate maps.

    Thanks,
    Katie

    Reply

    1. Hi Katie, it’s only possible to have the US broken into states in a individual US map, not the world map. Sorry for this limitation.

      Reply

  19. Hello –
    I’m trying to create something like mapify on my site. I’m traveling the US and Canada in an RV and want to show locations – with links to blog posts or videos, possible routes, places of interest, etc.
    Will your map code do this?
    Thank you,
    Patty

    Reply

    1. Hi Patty
      You can have a map of the US with round coloured markers on specific locations that will link to articles or any other URL of your choice. It won’t be possible however to have routes/lines connecting dots. If you have any other question let me know.
      Greetings, Carlos

      Reply

  20. Carlos, I am looking to add a world map to my clients squarespace site. To put it simply, I would like to have a world map where whenever you click a country my client has visited, it will take you to a gallery of images he has shot in that country. Would I be able to do that with your code?

    Reply

    1. Yes, you should be able to do that. The gallery will need to be on a separate page and then all you need to do is link the country to that page. When there’s a new country to be added, you’ll have to use the generator again to add that country and update the map on the page.

      Reply

  21. The map is not showing up centered on the page i have put it on, can I show you and get some feedback on how to fix it?

    Reply

  22. Carlos, I purchased the code and Ive been trying to get it to work, Im unable to get the map centered or posted with the data I want, other than the overview do you have a more step by step instruction-set to create one. Im just trying to create the World map so the counties are colored differently and when I click on one of them, it goes to the gallery on my site with photos from that country.

    Reply

  23. Is this widget compatible with weebly?

    Reply

    1. Hi Jacob
      Yes, this is compatible with Weebly. Although I haven’t used weebly myself, I know there are users doing it sucessfully. Just check how you can add javascript embed code in weebly, I believe they have documentation explaning how to do it.

      Reply

  24. Hi Carlos,

    I copied the embedded code and I am getting the error “Script Disabled”. Any ideas on how to fix this? Great script by the way. Very useful.

    Daniel

    Reply

    1. Hi Daniel! Usually this means there’s a javascript error. Or the preview might not display the map, only when you publish the page. I see you also sent me an email. We’ll follow up using email. Cheers, Carlos

      Reply

  25. Hi Carlos,

    I bought the script and it’s working fine except that it is not interactive. I cannot figure out what I’m doing wrong. The country is colored, and the text appears, but when you click on it nothing happens (I’ve filled in the Action Value). I’m working with firefox and squarespace.

    Reply

    1. Hi! Check if you selected the proper ‘active region action’ option. Cheers, Carlos

      Reply

      1. Great!! Many thanks, it’s working now ๐Ÿ™‚

        Reply

  26. Hi Carlos! This script looks great. Before I make my purchase, I wanted to make sure your script can do this: I want to show a world map and highlight the regions I’ve traveled to. It would be great if the the highlighted country can go to a website link as well. Is that possible? And the colors are customizable, correct? I want to use pretty specific colors associated with my logo. Thank you!

    Reply

    1. Hi! Yes, that’s all possible. ๐Ÿ™‚ Cheers, Carlos

      Reply

  27. HI Carlos,
    Sorry if this is already covered, I read through the questions and couldn’t find it (and I’m new to development and coding). If I have a world map and want to have pins on different locations (countries or coordinates) can I make the ‘pins’ clickable to navigate to somewhere else on my site? Or have a ‘box’ of some sort pop up with additional info?

    Many thanks, this may be just what i was looking for!

    Reply

    1. Hi! Yes, this is all possible. Markers can have links to other pages and you can have a tooltip on hover display with more info.

      Reply

  28. Hi Carlos! I want to map my paintings and add this map to my Squarespace website (now building) and I thought about the markers map. I want to ask if it is possible for the markers to turn into clickable images to redirect the clients directly to my paintings. And also to make 2 marker colors – one for the blogs and other for the artworks.
    Thank you!

    Reply

    1. Hi! You can have markers with different colours – you can choose the colour of each marker individually – and link them to any page you want. It’s not possible however to have custom images instead of markers. It’s only possible to use the round markers. Greetings, Carlos

      Reply

  29. Hi Carlos!!!

    I am obsessed with this map you have created! I bought it on Envato and embedded it on my website the other day. I have it set up so it marks different locations in the world I have travelled and when people click on the points they direct the user to a new tab with all the images.

    I have sent the link to several of my friends and they can see the map but they can’t see the points. For some reason they aren’t populating but I can see them on my computer? What do you think the issue is?

    https://www.sarahmanriquez.com/travel/

    I look forward to hearing from you!
    Sarah

    Reply

    1. HI Sarah! Thank you for using the generator! Seems you might be missing the Google Maps API Key?

      Reply

      1. Hi Carlos,

        Thank you so much for replying to me! So, I’m having a new problem! The points have started populating but they don’t always populate. So, then, I have to go into the back end of my website and resave the code again. Once I do that, the points will populate again for people who have already been to my website but new visitors have the same issue of none or few of the points populating.Also, what is the google maps API key? I am probably definitely missing that whatever it is haha

        Thanks,
        Sarah

        Reply

        1. Hi Sarah! It still seems it’s a problem with the Google Maps API Key. Did you add one? You can write me using the ‘contact author’ option on the support page on codecanyon/envato. I’ll be able to help you better if you write me from there. Greetings, Carlos

          Reply

        2. To get the google api key, you can go here.

          You can workaround this limitation by using the ‘markers – coordinates’ display mode and get the coordinates from another website. This way the markers will load faster and for everyone for sure. But write me using the link I provided in my other comment and we can follow up using email. Greetings, Carlos

          Reply

  30. Sarah Elizabeth Pole November 15, 2018 at 7:50 pm

    Hi Carlos,

    This map is fantastic, thank you so much! Quick question โ€“ย when attempting to list something in the tool tip, it is not letting me use commas.

    Initial entry was: a, b, and c
    When I hit “done”, it converted to a- b- and c

    When I went in and manually edited it again to be a, b, and c
    hit done and it converted to a. b. and c

    Any thoughts?

    Reply

    1. Hi! Unfortunately the tooltip doesn’t take commas because they are used to separate the content in the code. You can use this code if you have the html tooltips option enable: & # 4 4 ; https://www.toptal.com/designers/htmlarrows/punctuation/comma/

      Reply

  31. Hi Carlos! Looks like a great map generator. We however, wonder if the Netherlands and Belgium are also supported. We would like to implement a map to our Squarespace site that visualizes where our partners and customers are located, preferably per province or via markers. Up to how many markers can you put on one map? Would love to know if this is possible!

    Kind regards,

    Wim

    Reply

    1. Hi Wim! Yes, Netherlands and Belgium maps are included:

      https://cmoreira.net/interactive-world-maps-demo/netherlands

      https://cmoreira.net/interactive-world-maps-demo/belgium/

      The marker limit per map is about 400.

      Cheers, Carlos

      Reply

      1. Thanks! One more question, i inputted all the markers on my map, but it is painstakingly slow to load on any device i tried it on. It takes more than a minute to load the final markers, somewhat making the map pointless, as we don’t want people to wait that long. Is there a way to load the map faster?

        Link to the site where the map is located: https://hen-oval-mbz6.squarespace.com/testimonials/

        Reply

        1. Hi
          The best is to use the ‘markers – coordinates’ mode. If you have the markers with coordinates, it will load instantly, since the text location doesn’t need to be converted one by one into coordinates.
          Hope it helps. Greetings, Carlos

          Reply

  32. Hi Carlos!
    I have tried to embed the map and it says that: This block contains embedded scripts. Embedded scripts are disabled while youre logged in and editing your site’ and it has a block saying ‘PREVIEW IN SAFE MODE’
    and underneath it says twice: script disabled

    It does not show anything except the above, please help, thank you Meg

    Reply

    1. Hi Megan! Does it work after you publish the page?

      Reply

  33. Hi Carlos – this looks amazing. One quick question before purchasing – we are a travel company and would love to have a map displaying where we’ve sent people – US and US territories only. We’d love for the markers to be clickable/hoverable to show a picture of that place and like one key “fact” about it. Is that possible by chance?

    Reply

    1. Hi! Thank you for your interest in the generator! Yes, that’s possible. You can have HTML content in the tooltips that display on hover (or on click on mobile), so you can have code to display an image. Greetings, Carlos

      Reply

      1. Hey Carlos,

        I just bought the script looking to do exactly what Bridget inquired about.
        Could you please go into more details about how I can use HTML code to insert images in each tooltip?
        Thanks!

        Reply

        1. Hi! You’ll need to enable the HTML Tooltips option and then use normal HTML code to include images: https://www.w3schools.com/HTML/html_images.asp images need to be hosted online somewhere. Hope it helps.

          Reply

  34. Hi Carlos!
    Is there a way to add a Name or title that shows up when someone hovers over a state? (I’m trying to put a US map on our squarespace website).
    Let me know!
    Best,
    Olivia

    Reply

    1. Hi Olivia, yes, there’s a field to add information where it will display in a tooltip, when hovering the states.

      Reply

  35. Hi there – I am looking to move from wordpress to squarespace, but one of my favorite features of my blog is our route map (using the nomad map plugin). Before I make the switch, I want to make sure I can find a similar plugin for Squarespace. Yours seems to be the closest. My question is — can I build routes on your maps (elect to have lines drawn between points on the map)? And can I add points on the map (with lines) after I’ve published it, or do I need to re-do the code and republish with every change? Thanks!

    Reply

    1. Hi Becca, thank you for your interest in the generator. Unfortunately it’s not possible to have lines between markers. It’s only possible to have the markers.

      Reply

  36. Hi Carlos, I just bought your script. Where do I find the country codes? It is not clear to me how to add the country codes to the map. Thanks!

    Reply

    1. Hi Danielle
      Thank you for using the script! When you select a region to display and a display mode, there’s some instructions below that first settings box with some instructions that include links to pages where you can get the codes. Hope it helps! Greetings, Carlos

      Reply

  37. Hello Carlos, is there a way to show the US and Canada together? I selected “United States -Provinces”, but I cant see the Provinces at all.

    Reply

    1. Hi Elizabeth. You’ll need 2 different maps, one for each country. It’s not possible to display US and Canada in the same map unfortunately. The ‘provinces’ denomination is just the variable the API uses to display the first level of regions of a given country, so in this case it would be the States.

      Reply

  38. Hi Carlos,

    I’m wondering what the flexibility is the change the appearance of the map is. I was hoping to fill the outline of each country with a different design/artwork. Is this possible?

    Reply

    1. Unfortunately this is not possible. It’s only possible to have the countries with one colour.

      Reply

  39. Hello! I completed the map, but when I click on a region, I am not taken to the URL that I put in the “Action Value” space. I’m not sure how to fix it.

    Reply

    1. Hi! The most common reason for this to happen is when people didn’t set the ‘active region action’ option to ‘open url’. Check if that’s the issue.
      Greetings, Carlos

      Reply

  40. Hello Carlos! I have been looking for a solution for this problem for a while. Because I can not seem to find it, I can only conclude that the problem so simple that no one else has needed to post anything about it. So, sorry in advance. I am trying to make a map of the US where one can click on certain states to open up (or download) specific excel spreadsheets. Here is where I am struggling: where (or how) might a person find (or make) the url to put in the “action value” space? It seems that no mater what I try, when I make the page live on square-space, I don’t click-through to anything. Also, I am using windows, if that helps.
    This is especially frustrating because I seem to have stumbled across the the solution several months ago, but now that I am trying to update one of the maps, nothing seems to work.

    Reply

    1. Hi! Usually when the click action is not working is because the ‘active region action’ option is not set correctly. Check if that’s the case. Greetings, Carlos

      Reply

  41. Hi, how can I enlarge the embed box on my squarespace site to allow the map to be a full page on the site? changing the size in the generator is simply altering the size of the map within the embed box
    thank you

    Reply

    1. Hi James. That would depend mostly on the Squarespace template you’re using and it’s not something I can control from the generator side. Usually they allow you to change the size of the embed box, with resize handles, but it will only go as much as the template allows. They usually have full screen components, so it should be possible to have full screen embeds. Unfortunately at this point I don’t know exactly how it would be done, but I suggest you take this question to the Squarespace support, hopefully they will be able to help you. From the generator side, I would advise you to have the ‘responsive’ option enabled, which will make the map 100% the available space. Hope it helps. Greetings, Carlos

      Reply

  42. Hi, Carlos! Appreciate the excellent plugin. Question for you… is there a way to remove the background behind the map altogether? In other words, can I make the background transparent so that the map can overlay and image or video?

    Thanks!

    Reply

    1. Hi! Yes, you can simply write ‘transparent’ in the background colour option field. That should make the background transparent.

      Reply

  43. Hello! This is a really cool idea. I was wondering if it’s possible to use a base map of my own choosing? (Like a jpeg that I upload)
    Also, is it possible to have a hover-effect that results in an image popup?

    Reply

    1. Hi! You can use HTML in the ‘tooltips’ so you can display an image using HTML code. But unfortunately it is not possible to use custom images, it will only work with the maps provided. Greetings, Carlos

      Reply

  44. Hi Carlos, I followed your steps for adding the map to my Squarespace page I pressed embedded, then the sign and inserted the code after that I press set and then apply. once I did that my map did not render it said scripts disabled and even when I preview in live mode the map still doesn’t show up. I hope you can help. Cheers, Brit

    Reply

    1. Hi Brit
      Only after you publish the page and see it live, the maps will display.
      Squarespace won’t render custom javascript in preview mode for security reasons.
      Greetings, Carlos

      Reply

  45. Hi Carlos! thank you for designing such a great map! I recently purchased the map and have a question. Once I have embedded into Squarespace it seems that I have to scroll to see the whole map rather than just have it all appear in one image? Can you help? I don’t want to have to scroll to move around the map but rather just see it all at once! Thank you so much!

    Reply

    1. Hi Daniel, thank you for the positive feedback. You might need to adjust the component where you placed the map, inside squarespace. Check if you can make bigger so the full map fits. If the problem persists, write me using the contact author in the support page.

      Reply

  46. Hi Carlos,

    I need to make an international map with PROJECT NAME and a brief description. I need to be able to hover over markers to expand this information. Questions:

    Is there room for a brief description and title in any of these scripts?
    Are colors customizable?

    Reply

    1. Hi! Yes, it’s possible to have that content in the tooltip that displays on hover of the region or marker.
      The colours of the regions/markers are customizable, yes.
      Greetings, Carlos

      Reply

  47. I apologize if I missed seeing this response. I have an international interview series. I envision the map action being that it takes you to posts tagged with a specific country. Is that action possible if I have tagged things appropriately? WhatRDsDo.com – for example if someone wants to see the Australian interviews.

    Reply

    1. Hi Stephanie. If your website has a page with all the posts for a specific country, then yes, you can do that. You can link the countries to any link you want. Greetings, Carlos

      Reply

  48. Hi, I don’t see my comment, so I don’t think it posted. I’m hoping to use the map to link to interview posts tagged with specific countries. For example if someone wants to see the Australian interviews they would click on Australia. Is that action possible?

    Thanks.

    Reply

    1. Hi Stephanie. If your website has a page with all the posts for a specific country, then yes, you can do that. You can link the countries to any link you want. Greetings, Carlos

      Reply

  49. Hi Carlos,

    First of all really great to see the map and at a great price! I have tried embedding the map into my website like you lay out here in this article (with the example from here https://cmoreira.net/interactive-maps-generator/examples.html#03) but it doesn’t seem like it is working. Is this example not compatible with Squarespace? Also, is there a way to link sections of the map when you hover over them and then click on them? SO for example I do a world map, then want to hover over North America and be able to click on it and have it lead to other content on the page?

    Just want to make sure before I purchase. Thank you!

    Reply

    1. Hi Chris!
      You’ll need to publish the page and visit the live page to see the map. Squarespace won’t render the map on preview mode.
      You can link any country to a specific page if displaying the world map or link a continent if you’re displaying the world map divided by continents.

      Reply

  50. Hi Carlos,

    Is the California region map divided by counties? I’m trying to create an interactive California county map. If so would it work on SquareSpace? I’m already using a plugin on my site that allows me to lightbox any URL. Do you think it would be possible to click the county and then display a lightbox over the map with a list of blog posts related to that county?

    Thanks!!

    Reply

    1. Hi! Unfortunately the state maps are not divided by counties.

      Reply

  51. Nothing I try to do shows up during preview ? Any idea why this is happening?

    Reply

    1. Hi! The maps will only display when the page is published. Squarespace prevents custom scripts from running in the preview mode.

      Reply

Leave a Reply to ferentari Cancel 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.