Create a custom MapBox map with your SquareSpace blog’s geolocation data

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

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

1. 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.
2. Add the following code to the code block:
   

   <div id="map" style="width:100%; height:600px;"></div>

   This gives the map somewhere to load. You can adjust the width/height as desired.

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! 😉

Learn more >>