
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.
If you’re comfortable with JavaScript, though, there’s a great alternative solution: using the MapBox GL JS API to dynamically feed geolocation data—like the kind you can attach to your SquareSpace blog posts—to your map.
(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:
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<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>
Step #4: Add your JavaScript
In that same code block, add the following JavaScript below your new map container div:
<script type="text/javascript">
YUI({
gallery: 'unique-gallery-name' // REPLACE THIS WITH A UNIQUE NAME
}).use('io', 'json-parse', function (Y) {
// This function loops through each page of blog posts and
// adds each post on that page to the map
function loadJsonData(callback, url) {
Y.io(url, { on: { success: function(x,o) {
var page = Y.JSON.parse( o.responseText );
callback( page );
if ( page.pagination && page.pagination.nextPage ) {
loadJsonData( callback, page.pagination.nextPageUrl + '&format=json' );
}
}
}
});
}
mapboxgl.accessToken = 'your-token-here'; // REPLACE WITH YOUR ACCESS TOKEN
var map = window.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [0,0],
zoom: 1
});
map.on('load', function () {
loadJsonData( function(data) {
var boundingBox = new mapboxgl.LngLatBounds();
for(var i=0, n=data.items.length; i<n; i++) {
var item = data.items[i];
if ( item.location != undefined ) {
var ll = new mapboxgl.LngLat(item.location.markerLng, item.location.markerLat);
if ( ll.lng == -74.00076130000002 && ll.lat == 40.7207559 ) {
// skip...
} else {
// Extend boundingBox with current placemark
boundingBox.extend(ll);
var popup = new mapboxgl.Popup()
.setHTML('<h2><a href="' + item.fullUrl + '">' + item.title + '</a></h2>' + item.excerpt );
var marker = new mapboxgl
.Marker()
.setLngLat(ll)
.setPopup(popup)
.addTo(map);
// set map to show all placemarks
map.fitBounds(boundingBox);
} } }
}, "/blog?format=json" );
});
});
</script>
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! 😉
Want to improve your web development process?


Hi, I’m trying to embed a map and I see the code; no map. Is there any specific directory information which needs to be added or do you know why I would see the code and not a map?
Hey Kathleen! I’m not sure what’s going on without taking a look. Do you have a URL I could use to take a quick peek at the page you’re embedding the map on in SS? I clicked the URL you provided in your comment originally, but the page/site is password protected. I also removed your MapBox link from the comment itself: it contains your API key, which you don’t want to be sharing with the world. 😉