Interactive US Map on your Squarespace website
Squarespace is one of the most popular site builders available, it has definitely become one of the best tools to create attractive websites with a professional look.
Many business owners or even bloggers will need to add an interactive map of the United States of America to their website to showcase locations across the country or information that varies from state to state. The Interactive Maps Generator script that I developed a while back, allows you to generate a US map divided by states using the Google Geochart API.
The steps are simple:
- Get the Interactive Maps Generator
- Build the US Map following the on-screen instructions
- Copy the Embed Code
- Place it on an Embed Content block on your SquareSpace website
- Save your changes
You can embed the map on your squarespace website easily once you’ve built it. The script costs $16 and you can create as many maps as you want for your website. It includes not only the map for the US, but also for all other countries in the world.
Example Map
US Map
Using the Interactive Maps Generator
Once you have the script (get it here), 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. The first step will be to select ‘United States of America – States’ in the ‘Region to display’ option. You should then see the US map below in the preview. Follow the onscreen instructions to build your map. To colour states, use the ISO-3166-2:US codes.
You’ll be able to colour states or add markers to specific locations. If you use markers we advise you to add a Google Maps API Key in the generator. There will be options on how to get one.
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 US 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.
WordPress Maps
If you’re looking for a similar but much more flexible solution for WordPress, I strongly advise you to check out Interactive Geo Maps WordPress plugin.
12 Replies to “Interactive US Map on your Squarespace website”
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Is there a way to just show Orange County, California and not the entire state?
It’s only possible to show the entire state, sorry.
I just need the state of Oklahoma, but I need to be able to add Pin Marker points throughout the state that can show a photo and some text info (Like a hover over small pop-up) with the ability for someone to click on the pin/small pop-up and open up a new page. Is that possible?
Hi! Yes, you can display only the shape of the state of Oklahoma. You can use the display mode ‘markers (coordinates)’ and place markers based on coordinates. You can display a tooltip on hover that can contain HTML, so you can add images (you will need to add the html code for those images). The marker can link to a different page on the website, yes.
Hello I embedded the code into squarespace and it is saying the Script is Disabled
Hi! It should work once you publish or preview the page.
Hello! I need to make a regional map of Nebraska, Iowa, Missouri, and Kansas. Then I need to put pins that open up to different hospitals with info. Is this possible?
Hi! You can do it with each state individually, but only with the state shape, without details.
Greetings, Carlos
Hi Carlos,
I cannot get the text labels to display even though text labels are selected. How do you get this to work?
Hi Jan
Make sure you’re using the coordinates display option, with correct coordinates format. That’s the most common reason for the labels/markers not displaying.
Greetings, Carlos
Hi — I purchased this and it’s a great product for mapmaking. Wondering, though, about Washington DC — it’s not included in the US map, which can be problematic for certain clients. Any way to update with that inclusion? Thanks.
DC is there, but it’s really small, since it a real scale is used. The map would need to be very big to be visible. Sorry for the limitation.