Select Page

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 $14 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

Interactive Maps Generator Screen

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 Placeholder
US Map

World Map

All Countries Placeholder
All Countries

World Map with Markers

Map Markers Placeholder
Map Markers

 

Carlos Moreira is a web developer based in Porto, Portugal, working mostly with WordPress.