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
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
World Map
All Countries
World Map with Markers
Map Markers
177 Replies to “How to add a World Map to your Squarespace website”
Leave a Reply to Patrick Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
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?
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.
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?
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
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)?
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.
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
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.
Hi Carlos, for using the plug-in I have to pay $14 every month?
Thanks.
Hi Gabriel! No, the $14 it’s a one time payment and then you can use the script forever 🙂
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.
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 😛
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.
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
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.
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.
There is no way or trick to display a region at all? Are you looking forward to upgrading the plug-in?
Thank you Carlos.
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.
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
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/
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
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
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
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
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.
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
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
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
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.
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?
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.
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.
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.
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?
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.
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?
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.
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
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.
I switched from Safari to Chrome and it’s working now, thanks!
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
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
Thank’s a lot!
Regards
How do I direct a click on specific countries to another squarespace pages? Obrigada!
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!
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.
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
Hi Elwyn! Contact me through the support channels and I can look into it. Cheers, Carlos
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
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.
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
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
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?
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.
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?
Hi! Contact me using the ‘contact author’ option to follow up with email. Cheers, Carlos
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.
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
Is this widget compatible with weebly?
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.
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
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
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.
Hi! Check if you selected the proper ‘active region action’ option. Cheers, Carlos
Great!! Many thanks, it’s working now 🙂
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!
Hi! Yes, that’s all possible. 🙂 Cheers, Carlos
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!
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.
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!
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
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
HI Sarah! Thank you for using the generator! Seems you might be missing the Google Maps API Key?
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
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
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
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?
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/
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
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
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/
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
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
Hi Megan! Does it work after you publish the page?
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?
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
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!
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.
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
Hi Olivia, yes, there’s a field to add information where it will display in a tooltip, when hovering the states.
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!
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.
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!
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
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.
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.
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?
Unfortunately this is not possible. It’s only possible to have the countries with one colour.
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.
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
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.
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
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
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
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!
Hi! Yes, you can simply write ‘transparent’ in the background colour option field. That should make the background transparent.
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?
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
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
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
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!
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.
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?
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
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.
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
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.
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
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!
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.
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!!
Hi! Unfortunately the state maps are not divided by counties.
Nothing I try to do shows up during preview ? Any idea why this is happening?
Hi! The maps will only display when the page is published. Squarespace prevents custom scripts from running in the preview mode.
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!
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
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!
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/
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?
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.
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!
Hi! Unfortunately not, there’s no option to change the hover colour unfortunately.
No problem, thank you for getting back to me!
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!
You can enable the html tooltips options and it should do that if it’s blank. Greetings, Carlos
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!
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
Good to know! Am planning on using the map on a Squarespace site, so it should work. Thanks.
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
Ignore this Carlos, I’ve figured it out! Thank you
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
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.
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
That’s not possible unfortunately.
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.
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’.
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!
Hi! It seems you would need a paid plan now, to embed scripts in Squarespace. Before you could do it in the free tier.
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!
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
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!
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
Thank you! Will do.
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
I figured that out haha – Is there any way to make this responsive? on mobile view it hangs over the side
nvm figured that out too! sorry
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.
I figured out what I was doing wrong…problem resolved.
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!
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.
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
Try setting a smaller map height or disable the ‘keep aspect ratio’ option.
Unchecking keep aspect ratio did it. Thank you!!!
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!
Not possible unfortunately. But you can disable ‘Enable interactivity’ to remove the hover effect.
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
Try adding this together with your embed code to prevent the tooltip issue: https://gist.github.com/carmoreira/93d5b3f5d002d6f9989c68466afd25a0
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?
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
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
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?
Hi Leo
Unfortunately that’s not possible with this generator. Sorry for the limitation.
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.
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.
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?
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?
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