
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! 😉
Get Technically Speaking with Megan

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. 😉
Hey Megan! This is such a lifesaver tutorial – just what I was trying to do to better visualize my posts. HOWEVER … my implementation is either not working or I’m not adding location data correctly to posts. Am I supposed to add location to post using the built in Squarespace location tab or another way? http://songsinplace.com/map – For instance, I have a blog post that is set in Alabama using the Squarespace tool but does not show on map. Any ideas?
Hey Steven, it seems like you’re either using the wrong URL for your blog index or the blog index is restricted/hidden from public view right now. When I try to go to https://songsinplace.com/blog, I’m getting a 404 error.
Hi Megan! So, also stuck. But super super super thankful for this post. I have a js error that states that YUI is not defined. Also, important to note, squarespace only allows js script injection (and iframes) on the commerce and business plans. My test page is https://goodtrips.squarespace.com/maps – I put in the same tile set name on the YUI gallery parameter and used my own style link. Not sure if this makes sense. Do you have any advice? Best, Juan
YUI is a javascript framework from Yahoo that SquareSpace used to include with their templates, but some of the newer ones don’t have it anymore. You can insert a copy of YUI in your page before the scripts from this blog post and it should take care of that error. Get YUI here: https://clarle.github.io/yui3/
Megan, you are an Angel! Thank you!!!
Update, having issues with http, vs https mixed content. the YUI lib. has quite a few references to http. Cant seem to render, will look for an altenative method.
Hi Megan! Thank you so much for this post! I am trying to add a map on my website using Mapbox, so I followed the instructions you outlined above. However, when I go to my page all I can see is the code that I put in. Any advice would help. Thank you! Here’s my test site, https://dinosaur-butterfly-hbbh.squarespace.com/
Hey Eric! I’m not seeing the code on any of your pages. Do you have a test page set up somewhere? The first thing you should check is your account type. SquareSpace made a change since this post was written; only certain plans are allowed to use JavaScript in code blocks now. If you’re on one of the allowed plans, check your console (via Inspector) to see if there are any script errors.
Thanks for the tip, I had to modify it a little to work, including putting the code into the header since squarespace was adding tags to the code and making it break. The end result can be seen here, thanks again! https://www.ultrarunningdestinations.com/ultrarunning-destinations-map
Glad it worked for you, Luke!