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.

 

 

Posted by Carlos Moreira

Web developer based in Porto, Portugal, working mostly with WordPress. Disclosure: Some of the links in this blog are 'affiliate links.' This means if you click on a link to a commercial product and purchase the item, I will receive an affiliate commission.

6 Replies to “Interactive US Map on your Squarespace website”

  1. Is there a way to just show Orange County, California and not the entire state?

    Reply

    1. It’s only possible to show the entire state, sorry.

      Reply

  2. 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?

    Reply

    1. 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.

      Reply

  3. Hello I embedded the code into squarespace and it is saying the Script is Disabled

    Reply

    1. Hi! It should work once you publish or preview the page.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.