Let’s face it: SquareSpace’s built-in map block is a little lacking.
It’s greatest flaw? It only allows ONE location pin per map, which is a huge bummer if you’re running a travel or location-related website on this popular platform.
While you can certainly use something embeddable like a MapBox or Google Maps map—both of which have many more features than the default SquareSpace version—if you need to maintain a list of a bunch of different locations, managing it can get really tedious in a hurry.
(To be fair, I wasn’t the first person to come up with this idea: Gunman and Shoe first wrote a blog post about this back in 2014, but their solution doesn’t work out-of-the-box anymore.)
Here’s an example for you:
To see it live, visit the Destinations page on The Redhead Story’s blog. Scroll until you see the loading spinner, then wait for the map to populate and appear.
Want to get a super-cool map like that one on your own site?
Adding a dynamic map to your SquareSpace website with MapBox
Step #1: Get an access token
First things first: you’ll need to sign up for MapBox to get an access token. Once you have an account, follow the guidance in this MapBox doc to retrieve your access token: https://docs.mapbox.com/accounts/overview/tokens/#creating-and-managing-access-tokens
MapBox allows you 50,000 map loads per month before you have to pay anything, so the average website owner won’t have to worry about their pricing.
Now that you have your access token, you’re ready to dig in to some code!
Step #2: Add MapBox scripts and styles to your site
- In Settings > Advanced > Code Injection, place the following code in the “Header” area:
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
Step #3: Add a container for your map
- Open up the page to which you’d like to add your map and add a new code block where you’d like the map to display.
- Add the following code to the code block:
This gives the map somewhere to load. You can adjust the width/height as desired.
<div id="map" style="width:100%; height:600px;"></div>
If you want to customize your map a little more, be sure to check out the MapBox docs to learn about all map functions and customizations.
And…you should now have a working map! Be sure you save the page and check out the actual site in your browser instead of just looking at it in the SquareSpace editor; custom scripts aren’t allowed to run in the editor.
How are you using your custom map? I’d love to hear more about it in the comments below!
Need some help getting your dynamic map to work?
Just want me to take over all this techy nonsense? You’re in luck: I can! 😉