Showing Squarespace posts on a map

 Edit Post - Location Tab

Edit Post - Location Tab

The Squarespace blog provides a function to save a geo-location together with your post. The following article will show you two examples on how to use this data to display events and posts on a map (using Maxbox and Google Maps).

To load the data for the map, we used the JSON-data that Squarespace provides. Each collection gets the additional parameter "?format=json" (e. g. "/blog?format=json"). A YUI-component then parses the JSON-data for your map-API.

Example Mapbox

To use the Mapbox-API, insert the following code into the head-section of your page:

<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />

In the body of your page, where you want the map to be displayed, insert the following code block:

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

<script type="text/javascript">
  YUI({
    gallery: 'gallery-2012.09.05-20-01'
}).use('io', 'json-parse', 

function (Y) {
    function loadJsonData(callback) {
        // Insert your feed-url below
        var url = "/news?format=json";
        
        Y.io(url, { on: { success: function(x,o) {
            callback(Y.JSON.parse(o.responseText));
        } } });
    }

  // Insert your mapbox-id, mapbox-access-token and your-center-coordinates below
  var map = window.map = new L.mapbox.map('map', 'your-map-box-id',{accessToken: 'your-access-token',center:[your-center-coordinates], zoom:10});        // wärend die karte geladen wird, starten wir die anfrage  nach den Artikeln
    loadJsonData(function(data) {
        var boundingBox = new L.LatLngBounds();                 
        for(var i=0, n=data.items.length; i<n; i++) {
            var item = data.items[i],
            ll = new L.LatLng(item.location.mapLat, item.location.mapLng);
            // Extend boundingBox with current placemark
            boundingBox.extend(ll);
            var marker = new L.Marker(ll).bindPopup('<h2>'+item.title+'</h2>' 
                                + item.excerpt
                                + '<p><a href="'+item.fullUrl+'">» weitere Informationen</a></p>');
                  map.addLayer(marker);
        }   
        // set map to show all placemarks
        map.fitBounds(boundingBox);
    });
});
</script>

Please make sure to insert your correct feed-url and your mapbox-id.

Here is a map we made like this for one of our clients:
www.pure-guesthouse.com/aktivitaeten

 

Example Google Maps

You do not need any additional code in the header of your page if you are using Google Maps. Therefore you just insert the following code block right where you want your map to be:

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

<script>
  YUI({
    gallery: 'gallery-2012.09.05-20-01'
}).use('gallery-google-maps-loader', 'io', 'json-parse', 

function (Y) {
    function loadJsonData(callback) {
        // Insert your feed-url below
        var url = "/blog?format=json";
        
        Y.io(url, { on: { success: function(x,o) {
            callback(Y.JSON.parse(o.responseText));
        } } });
    }
   
    // google-maps API-laden...
    new Y.GoogleMapsLoader().load({
        language: 'de',
        sensor: false
    }).on('success', function () {
      
        // Insert your center latitude and longitude below
        var llCenter = new google.maps.LatLng(-33.9149861, 18.6560594),
            map;
        
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6, center: llCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        
        loadJsonData(function(data) {
            var boundingBox = new google.maps.LatLngBounds();

            boundingBox.extend(llCenter);
            for(var i=0, n=data.items.length; i<n; i++) {
                var item = data.items[i],
                    ll = new google.maps.LatLng(item.location.mapLat, item.location.mapLng);
                
                // Extend the boundingBox with all placemarks
                boundingBox.extend(ll);
                
                (function(item) {
                    // create marker
                    var marker = new google.maps.Marker({ 
                        map: map, position: ll, 
                        title: item.title
                    });

                    // set infowindow  on click                   
                    google.maps.event.addListener(marker, 'click', function() {
                        if(map.currentInfoWindow) {
                            map.currentInfoWindow.close(); 
                        }
                        
                        // create infowindow
                        var infoWindow = new google.maps.InfoWindow({
                            maxWidth: 400,
                            content: '<h2>'+item.title+'</h2>' 
                                + item.excerpt 
                                + '<p><a href="'+item.fullUrl+'">» weitere Informationen</a></p>'
                        });
                        
                        infoWindow.open(map,marker);
                        map.currentInfoWindow = infoWindow;
                    });
                } (item));
            }
            
            // set map to show all placemarks
            map.fitBounds(boundingBox);
        });
    });
});
</script>

Please make sure to insert your feed-url and your preferred center-position.

See the same example with Google Maps:
www.pure-guesthouse.com/google-maps-aktivitaeten

 

Helpful links:

Mapbox Homepage

Mapbox Javascript API

Google Maps API