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:

  1. Get the Interactive Maps Generator
  2. Build the US Map following the on-screen instructions
  3. Copy the Embed Code
  4. Place it on an Embed Content block on your SquareSpace website
  5. 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 Placeholder
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.

Interactive Maps Generator Screen

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.