How to add a World Map to your Squarespace website

Written by

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

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

[show-map id=’1′]

World Map

[show-map id=’2′]

World Map with Markers

[show-map id=’3′]

interactive maps squarespace

Comments

179 responses to “How to add a World Map to your Squarespace website”

September 4, 2017

Keith Laws

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. September 4, 2017
  
  Carlos Moreira
  
  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. January 10, 2019
    
    Valerie P
    
    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. January 14, 2019
      
      Carlos Moreira
      
      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
September 28, 2017

Jacob

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. September 28, 2017
  
  Carlos Moreira
  
  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
September 29, 2017

Jacob

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. September 29, 2017
  
  Carlos Moreira
  
  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
September 29, 2017

Gabriel

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

Reply
1. September 29, 2017
  
  Carlos Moreira
  
  Hi Gabriel! No, the $14 it’s a one time payment and then you can use the script forever 🙂
  
  Reply
October 12, 2017

Wen

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. October 12, 2017
  
  Wen
  
  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. October 12, 2017
    
    Carlos Moreira
    
    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. October 12, 2017
  
  Carlos Moreira
  
  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
October 16, 2017

Gabriel

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. October 16, 2017
  
  Carlos Moreira
  
  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
October 17, 2017

Gabriel

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. October 17, 2017
  
  Carlos Moreira
  
  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
October 23, 2017

Brooke

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. October 23, 2017
  
  Carlos Moreira
  
  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
October 30, 2017

Simon Jaeger

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. October 30, 2017
  
  Carlos Moreira
  
  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. October 31, 2017
    
    Simon Jaeger
    
    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. October 31, 2017
      
      Carlos Moreira
      
      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. October 31, 2017
        
        Simon Jaeger
        
        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. November 1, 2017
        
        Simon Jaeger
        
        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. November 1, 2017
        
        Carlos Moreira
        
        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
November 7, 2017

Mark

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. November 7, 2017
  
  Carlos Moreira
  
  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
November 20, 2017

kevin Wilkinson

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. November 21, 2017
  
  Carlos Moreira
  
  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
December 1, 2017

Will

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. December 1, 2017
  
  Carlos Moreira
  
  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
December 19, 2017

JJ

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. December 20, 2017
  
  Carlos Moreira
  
  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. December 26, 2017
    
    JJ
    
    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. December 26, 2017
      
      Carlos Moreira
      
      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
December 21, 2017

Steve Jones

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. December 21, 2017
  
  Carlos Moreira
  
  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. December 21, 2017
    
    Steve Jones
    
    I switched from Safari to Chrome and it’s working now, thanks!
    
    Reply
January 18, 2018

ferentari

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. January 18, 2018
  
  Carlos Moreira
  
  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. January 23, 2018
    
    ferentari
    
    Thank’s a lot!
    
    Regards
    
    Reply
  2. December 11, 2018
    
    Rachel
    
    How do I direct a click on specific countries to another squarespace pages? Obrigada!
    
    Reply
January 28, 2018

Penelope

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. February 8, 2018
  
  Carlos Moreira
  
  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
February 26, 2018

Elwyn

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
1. February 26, 2018
  
  Carlos Moreira
  
  Hi Elwyn! Contact me through the support channels and I can look into it. Cheers, Carlos
  
  Reply
April 10, 2018

Katie B

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. April 11, 2018
  
  Carlos Moreira
  
  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
May 15, 2018

Patty

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. May 16, 2018
  
  Carlos Moreira
  
  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
May 31, 2018

David

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. May 31, 2018
  
  Carlos Moreira
  
  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
June 1, 2018

Ryan Cassidy

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
1. June 3, 2018
  
  Carlos Moreira
  
  Hi! Contact me using the ‘contact author’ option to follow up with email. Cheers, Carlos
  
  Reply
June 3, 2018

David

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
1. June 3, 2018
  
  Carlos Moreira
  
  Hi! I have this video for the WordPress version, where the interface is very similar: https://cmoreira.net/interactive-world-maps-demo/advanced-tips/create-first-map/ It should be helpful. Contact me using the ‘contact author’ option to follow up with email if needed. Cheers, Carlos
  
  Reply
June 26, 2018

Jacob

Is this widget compatible with weebly?

Reply
1. June 26, 2018
  
  Carlos Moreira
  
  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
July 11, 2018

Daniel J

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. July 12, 2018
  
  Carlos Moreira
  
  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
July 17, 2018

Noraly

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. July 18, 2018
  
  Carlos Moreira
  
  Hi! Check if you selected the proper ‘active region action’ option. Cheers, Carlos
  
  Reply
  1. July 19, 2018
    
    Noraly
    
    Great!! Many thanks, it’s working now 🙂
    
    Reply
July 25, 2018

Travel Pockets (Crystal)

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. July 25, 2018
  
  Carlos Moreira
  
  Hi! Yes, that’s all possible. 🙂 Cheers, Carlos
  
  Reply
July 28, 2018

Jen

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. July 29, 2018
  
  Carlos Moreira
  
  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
August 21, 2018

Diana

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. August 21, 2018
  
  Carlos Moreira
  
  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
October 8, 2018

Sarah Manriquez

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. October 15, 2018
  
  Carlos Moreira
  
  HI Sarah! Thank you for using the generator! Seems you might be missing the Google Maps API Key?
  
  Reply
  1. October 18, 2018
    
    Sarah A Manriquez
    
    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. October 18, 2018
      
      Carlos Moreira
      
      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. October 18, 2018
      
      Carlos Moreira
      
      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
November 15, 2018

Sarah Elizabeth Pole

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. November 29, 2018
  
  Carlos Moreira
  
  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
November 18, 2018

Wim

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. November 19, 2018
  
  Carlos Moreira
  
  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. November 29, 2018
    
    Wim
    
    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. November 29, 2018
      
      Carlos Moreira
      
      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
November 23, 2018

Megan Clark

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. November 23, 2018
  
  Carlos Moreira
  
  Hi Megan! Does it work after you publish the page?
  
  Reply
December 3, 2018

Bridget

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. December 5, 2018
  
  Carlos Moreira
  
  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. January 22, 2019
    
    Bruno
    
    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. January 25, 2019
      
      Carlos Moreira
      
      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
December 11, 2018

Olivia Moser

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. December 11, 2018
  
  Carlos Moreira
  
  Hi Olivia, yes, there’s a field to add information where it will display in a tooltip, when hovering the states.
  
  Reply
January 19, 2019

Becca

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. January 19, 2019
  
  Carlos Moreira
  
  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
January 25, 2019

Danielle

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. January 28, 2019
  
  Carlos Moreira
  
  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
January 31, 2019

Elizabeth

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. January 31, 2019
  
  Carlos Moreira
  
  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
March 4, 2019

Auden

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. March 5, 2019
  
  Carlos Moreira
  
  Unfortunately this is not possible. It’s only possible to have the countries with one colour.
  
  Reply
May 26, 2019

Kaitlin

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. May 27, 2019
  
  Carlos Moreira
  
  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
May 29, 2019

Elizabeth

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. May 31, 2019
  
  Carlos Moreira
  
  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
June 22, 2019

James

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. June 23, 2019
  
  Carlos Moreira
  
  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
July 29, 2019

Matthew Manning

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. July 30, 2019
  
  Carlos Moreira
  
  Hi! Yes, you can simply write ‘transparent’ in the background colour option field. That should make the background transparent.
  
  Reply
August 22, 2019

Sarah

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. August 22, 2019
  
  Carlos Moreira
  
  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
August 27, 2019

Brit Wright

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. August 27, 2019
  
  Carlos Moreira
  
  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
August 28, 2019

Daniel

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. August 28, 2019
  
  Carlos Moreira
  
  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
September 1, 2019

Jenny

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. September 1, 2019
  
  Carlos Moreira
  
  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
September 6, 2019

Steph

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. September 6, 2019
  
  Carlos Moreira
  
  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
September 6, 2019

Stephanie

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. September 6, 2019
  
  Carlos Moreira
  
  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
October 9, 2019

Chris Larson

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. October 20, 2019
  
  Carlos Moreira
  
  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
October 19, 2019

Leah J

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. October 20, 2019
  
  Carlos Moreira
  
  Hi! Unfortunately the state maps are not divided by counties.
  
  Reply
November 5, 2019

SM

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

Reply
1. November 8, 2019
  
  Carlos Moreira
  
  Hi! The maps will only display when the page is published. Squarespace prevents custom scripts from running in the preview mode.
  
  Reply
February 28, 2020

Whitney B Saxon

Hi! I love your map and have had an easy time with it in the past! however, this time, when I click on the countries, the URLs are not popping up or opening. Do you have any tips?

I also need a map with just US + Canada. That doesn’t exist, does it? Just wanted to make sure I’m not missing it. Thanks!

Reply
1. March 2, 2020
  
  Carlos Moreira
  
  Hi Whitney. It could be related to their new security features, which don’t allow links triggered in javascript to open in the same window. Try the option to open in a new tab. If the problem persists, contact me using the support channels.
  Unfortunately the generator doesn’t include a map of Canada + US. Sorry for this limitation.
  Greetings, Carlos
  
  Reply
April 5, 2020

Daniel Hagemann

Hi Carlos, any chance there is a way I can add Antarctica to the world map/continents view? Desperately trying to find a map that will work that has Antartica included for my travel website!

Reply
1. April 6, 2020
  
  Carlos Moreira
  
  Hi! In the current version of the generator this is not possible unfortunately. The generator uses the Geochart API from Google, which doesn’t include Antarctica.
  If you where using WordPress I would recommend this plugin:
  https://interactivegeomaps.com/docs/adding-antarctica-to-the-world-map/
  
  Reply
April 19, 2020

T. Golden

Hello! I am interested in this feature to add to my website. But before I buy, I wanted to make sure I correctly understand how this could function. I really just need a US map that would allow the user to hover over a state, see a pop up and click on a link (or multiple links) that would open in a new tab. Looking at the examples you’ve listed, it would be similar to the US elections map, but with a link rather than the name of the candidate. Can this interactive map serve that purpose?

Reply
1. April 21, 2020
  
  Carlos Moreira
  
  Hi! Thank you for your interest. The content in the tooltip can’t be clickable (because it follows mouse movements), so you would need to associate the link to the state itself, meaning you could only have one link per state.
  
  Reply
May 1, 2020

Todd

Hi Carlos. Thank you this – it is exactly what I was after for my website. It’s working perfectly, but I was wondering if there was a way to have whichever region you are hovering over change to a different colour? Thank you!

Reply
1. May 1, 2020
  
  Carlos Moreira
  
  Hi! Unfortunately not, there’s no option to change the hover colour unfortunately.
  
  Reply
  1. May 5, 2020
    
    Todd Dudley
    
    No problem, thank you for getting back to me!
    
    Reply
May 8, 2020

Todd Dudley

Hi Carlos, is it possible to delete the second line of tooltip box? I know I can leave it blank, but can I get rid of the blank space when it pops up on hover? Thanks!

Reply
1. May 8, 2020
  
  Carlos Moreira
  
  You can enable the html tooltips options and it should do that if it’s blank. Greetings, Carlos
  
  Reply
May 13, 2020

Marck

Olá Carlos,

I’m interested in buying the IMG script. After reading the description and comments I still have a couple of pre-purchase questions:
1. Can the map be resized or does it only work full width?
2. Are the links working properly? Want to make sure they are and they open in the same tab. If they only open on a new window/tab it doesn’t work for me.

Obrigado!

Reply
1. May 14, 2020
  
  Carlos Moreira
  
  Hi! You can set a fixed width for the map. When the ‘responsive’ mode is enabled, it will take 100% of the available width, which would be the width of the container where you place the map.
  On Wix the links will no longer be able to open in the same tab. That’s because of some security restrictions implemented by Wix. They are not allowing embed code to trigger a url change in the main window. This used to be possible, but it’s not possible anymore. On squarespace it still works. So it depends on where you’ll be using the maps.
  Greetings, Carlos
  
  Reply
  1. May 16, 2020
    
    Marck
    
    Good to know! Am planning on using the map on a Squarespace site, so it should work. Thanks.
    
    Reply
May 15, 2020

Todd Dudley

Hi Carlos, me again!

When the magnifying glass pops up for markers that are close together, is there any way to change the background colour within the magnifying glass, as currently it is just grey?

Thank you!

Todd

Reply
1. May 18, 2020
  
  Todd Dudley
  
  Ignore this Carlos, I’ve figured it out! Thank you
  
  Reply
September 27, 2020

Chris

I apologize if you have already answered this before but on mobile, does the functionality of the map change a lot from desktop?

-Can you zoom into the map on mobile?
-Are there mobile only features that aren’t available from desktop?

Thanks

Reply
1. September 28, 2020
  
  Carlos Moreira
  
  Hi Chris
  There aren’t any mobile specific features. If your page allows it, you can ‘pinch zoom’ the map on mobile, but this is something controled at page level, not by the map directly.
  
  Reply
March 24, 2021

kristin cooknell

Hi! Is it possible to add 10000+ GPS markers with this? Using a KML file or similar? Or is it to be entered manually? Appreciate your help! Thanks

Reply
1. March 24, 2021
  
  Carlos Moreira
  
  That’s not possible unfortunately.
  
  Reply
June 11, 2021

Mathilde

Hi

I have purchased the map and want to create 2 different maps – one for our own website and one for our clients (i have already set up the one for our client). But I cant figure out how I create more than the one. The client has changes to their map once in a while, so I done want to “delete” the settings for that map, in order to generate the new one for our own website. Thank you for your help.

Best, Mathilde.

Reply
1. August 2, 2021
  
  Carlos Moreira
  
  Hi Mathilde. You will need to save the content of the ‘current settings’ tab, to be able to build a different map and in the future load the ones you previously built, loading the previously saved ‘current settings’.
  
  Reply
July 22, 2021

Justine Fisher

Hi Carlos!

I’m wondering if I need a certain premium level on Squarespace to embed the map? Does it work in the free trial builder?

Thank you!

Reply
1. August 2, 2021
  
  Carlos Moreira
  
  Hi! It seems you would need a paid plan now, to embed scripts in Squarespace. Before you could do it in the free tier.
  
  Reply
August 2, 2021

Reenie

HI,
I am working on a Squarespace website for a client and have a question. The client has a list of about 250 colleges in the United States and a few internationally that they would like mapped. Can your script support that type of mapping? If so, would I have to input the addresses? Or can I just enter the name of the college? Thanks!

Reply
1. August 2, 2021
  
  Carlos Moreira
  
  Hi! You would need to add coordinates for each location in the generator, for it to work better. It works better with up to 200 markers, but it should be able to handle 250. Greetings, Carlos
  
  Reply
August 31, 2021

Eric

I purchased your map builder add on to use on a Squarespace 7.1 site that I am working with. I believe that I copied and pasted the code to the embed add-on as per the instructions. Saved it. But, didn’t see anything. Also, checked on the website itself directly and didn’t see anything. Please advise. Thanks!

Reply
1. September 1, 2021
  
  Carlos Moreira
  
  Hi Eric
  Please write us using the support contact form, sharing access to the page where you have the embed code, so we can check what could be missing. Greetings, Carlos
  
  Reply
  1. September 1, 2021
    
    Eric
    
    Thank you! Will do.
    
    Reply
September 13, 2021

katie

I see that when You hover over highlighted areas of the map it can pop up with the name of the country/state and on your example of the US world map it has “click for more info” – how do I link the highlighted areas so that when someone clicks on them it will bring them somewhere? I’ve already bought your map

Reply
1. September 14, 2021
  
  katie
  
  I figured that out haha – Is there any way to make this responsive? on mobile view it hangs over the side
  
  Reply
  1. September 14, 2021
    
    katie
    
    nvm figured that out too! sorry
    
    Reply
January 9, 2022

Heather R Sisson

I just bout this and downloaded the files. All the links to the generator in the download are broken so I’m not able to us it. Please help.

Reply
1. January 10, 2022
  
  Heather R Sisson
  
  I figured out what I was doing wrong…problem resolved.
  
  Reply
April 7, 2022

Patrick

Greetings! Just picked up this great little tool to add maps to my humanitarian aid nonprofit’s Squarespace website showing where we’ve launched program in and around Ukraine. You mention in an older comment that it is possible to crop the maps with CSS. Can you share how to do this so I can focus in more on the region of Ukraine in the Europe map? Thank you!

Reply
1. April 11, 2022
  
  Carlos Moreira
  
  Hi Patrick! The crop solution isn’t perfect because it expects the map to have a fixed size (not responsive). Here’s an example: https://codepen.io/carmoreira/pen/NWwZKPX
  Notice the last part of the code, inside the style tags. You would need to try to fiddle with the margin values to find the right combination for your case. Hope it helps and sorry for the limitations.
  
  Reply
April 12, 2022

Patrick

Cool, thanks for the quick response. I’m running into another issue now. I’m working on a map of Ukraine, and the background color creates a border at the top and bottom of the map, inside the defined border, which makes the map look odd. Is there a way to get rid of that? You can see an example of what I mean here: https://www.liftinghandsinternational.org/maps-test-page-ukraine

Reply
1. April 12, 2022
  
  Carlos Moreira
  
  Try setting a smaller map height or disable the ‘keep aspect ratio’ option.
  
  Reply
  1. April 12, 2022
    
    Patrick
    
    Unchecking keep aspect ratio did it. Thank you!!!
    
    Reply
  2. April 12, 2022
    
    Patrick
    
    One more quick question. Is it possible to set the country border to stay highlighted like when you mouse over the country? Or to disable the border highlight altogether? On my map, I would love for the border of Ukraine to be highlighted all the time, then still have the tool tips pop up when someone mouses over the markers. Or is there another way to highlight the focus country to set it apart more from the surrounding countries? Thanks!
    
    Reply
    1. April 12, 2022
      
      Carlos Moreira
      
      Not possible unfortunately. But you can disable ‘Enable interactivity’ to remove the hover effect.
      
      Reply
      1. April 13, 2022
        
        Patrick
        
        Thanks again for being so responsive! I have run into another issue and can’t figure what is causing it. Some of the tool tips on this map flicker or flash when I hover over a marker, but other behave normally. Can you tell me why this is happening? https://www.liftinghandsinternational.org/maps-test-page-moldova
      2. April 18, 2022
        
        Carlos Moreira
        
        Try adding this together with your embed code to prevent the tooltip issue: https://gist.github.com/carmoreira/93d5b3f5d002d6f9989c68466afd25a0
August 15, 2022

Susana

This is just what I was looking for Carlos! Thank you!
Is there a character limit on the Action Value? I am able to get the map to appear and function as expected without any action values but when I add in my action values the map will not appear on my page. My longest action value is 480 characters long. If there is no character limit could you think of any other reason why it may not appear once I add the action values?

Reply
1. August 21, 2022
  
  Carlos Moreira
  
  Hi! Most likely a syntax issue. Maybe something in your action value is breaking the code. Contact us using the ‘contact author’ option to follow up: https://codecanyon.net/item/interactive-maps-generator/3272382/support Greetings, Carlos
  
  Reply
November 8, 2022

Bryn

Hello. I am using the interactive map on my website – but there is a large blank space beneath the map when i view it in the mobile version.

Any recommendations for how i can fix this please?

Many Thanks

Reply
February 1, 2023

Leo

Hi Carlos,
I’ve bought your maps generator recently and the interactive features work great. However I do have a question about whether it can also work like your WordPress plugin. What I meant by that is what you have here at https://interactivegeomaps.com/usa-maps-for-wordpress/
Is it possible to have the State abbreviations shown on the map along with the interactive feature where you can zoom into a specific State when you either hover over or click on it?

Reply
1. February 2, 2023
  
  Carlos Moreira
  
  Hi Leo
  Unfortunately that’s not possible with this generator. Sorry for the limitation.
  
  Reply
May 4, 2023

Aditya Advani

Hi Carlos. Love your software – it’s the only thing close to what I needed with as little manual work as possible.
I have two questions.

1. Is it possible to change the appearance of the markers? If I have to use a custom code that’s fine.
2. Is it possible to change the map to a satellite, or terrain map? Binary colors are functional, but a little bare bones.

advani.ca/hongkong for my example.

Appreciate your response.

Reply
1. May 4, 2023
  
  Carlos Moreira
  
  Hi! Thank you for using the generator. Unfortunately it’s not possible to change the marker appearance, only the colour. It’s also not possible to add more details to the map, only show the vector region shapes. Both limitations come from Google Geochart API, which is used to create the vector maps and don’t offer those features. Sorry for the limitation.
  
  Reply
  1. May 6, 2023
    
    Aditya Advani
    
    That’s alright. A follow up question, how can I get a map of provinces? For example, British Columbia in Canada. There are only states available. Is it a limitation?
    
    Reply
  2. May 6, 2023
    
    Aditya Advani
    
    Hi again Carlos. Just discovered something else – the secondary text on my tooltip isn’t appearing on my Squarespace website. Any ideas what could be the cause?
    
    Reply
    1. May 8, 2023
      
      Carlos Moreira
      
      Hi! We don’t have province maps unfortunately. For more questions, please use the contact author form at https://codecanyon.net/item/interactive-maps-generator/3272382/support so we can open a proper support ticket. Cheers, Carlos
      
      Reply
November 28, 2023

Jessica Knowlden

Hello! Question – can I use both the regions AND the markers on the same map? I’d like to shade all countries I’ve traveled to and then place markers for each city I’ve visited including a link to that specific blog post. Thank you!

Reply
1. November 28, 2023
  
  Carlos Moreira
  
  Unfortunately it’s not currently possible to both add markers and color countries. Only use one of the features. Sorry for the limitation.
  
  Reply