如何在Squarespace页面上显示多个MapBox地图？

Question

我想在同一页面上左右显示2个Mapbox地图。 SF地图的工作方式与广告一样（悬停时弹出窗口），但NY地图不显示其标记。我究竟做错了什么？ 非常感谢！

以下是包含NY和SF地图的页面：link。 在那个页面标题我注入了：

<script src='https://api.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' />

纽约地图代码块：

<style>
    .mapboxgl-popup {
        max-width: 400px;
        letter-spacing: 1px;
        font: 16px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }

    .marker-title {
        font-weight: 300;
    }
</style>
<div id='mapny' style='width: 100%; height: 400px;'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94Y29vcmRpbmF0ZXMiLCJhIjoiY2lwOGhicDN3MDE5dXQ2bHk5Mmw0MGQ3YiJ9.ilUY49cMzmQGR6VKfz95CA';
var markers = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "description": "<div class=\"marker-title\">Skylight at Moynihan Station</div>",
            "marker-symbol": "marker"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-73.99557 , 40.75176]
        }
    }, {
        "type": "Feature",
        "properties": {
            "description": "<div class=\"marker-title\">Skylight One Hanson</div>",
            "marker-symbol": "marker"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-73.97791 , 40.68511]
        }
    }, {
        "type": "Feature",
        "properties": {
            "description": "<div class=\"marker-title\">Skylight Clarkson SQ</div>",
            "marker-symbol": "marker"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-74.00956, 40.72825]
        }
    }, {
        "type": "Feature",
        "properties": {
            "description": "<div class=\"marker-title\">Skylight Modern</div>",
            "marker-symbol": "marker"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-74.00401 , 40.7511 ]
        }
    }]
};

var map = new mapboxgl.Map({
    container: 'mapny',
    style: 'mapbox://styles/mapboxcoordinates/cipfsc92i000bbkmbypwkvi1c',
    center: [-73.993235, 40.712980],
    pitch: 60,
    zoom: 11.5
});

map.on('load', function () {
    // Add marker data as a new GeoJSON source.
    map.addSource("markers", {
        "type": "geojson",
        "data": markers
    });

    // Add a layer showing the markers.
    map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15",
            "icon-allow-overlap": true
        }
    });
});


// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
});

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
        popup.remove();
        return;
    }

    var feature = features[0];

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.description)
        .addTo(map);
});
</script>

SF地图代码块：

<style>
    .mapboxgl-popup {
        max-width: 400px;
       letter-spacing: 1px;
        font: 16px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }

    .marker-title {
        font-weight: 300;
    }
</style>
<div id='mapsf' style='width: 100%; height: 400px;'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94Y29vcmRpbmF0ZXMiLCJhIjoiY2lwOGhicDN3MDE5dXQ2bHk5Mmw0MGQ3YiJ9.ilUY49cMzmQGR6VKfz95CA';
var markers = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "description": "<div class=\"marker-title\">Skylight at Pier 38</div>",
            "marker-symbol": "marker"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [ -122.38769, 37.78257]
        }
    }, {
        "type": "Feature",
        "properties": {
            "description": "<div class=\"marker-title\">Skylight at the Mint</div>",
            "marker-symbol": "marker"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [ -122.40725, 37.78272]
        }
    }]
};

var map = new mapboxgl.Map({
    container: 'mapsf',
    style: 'mapbox://styles/mapboxcoordinates/cipfsc92i000bbkmbypwkvi1c',
    center: [-122.409898, 37.775668],
    pitch: 60, 
    zoom: 12
});

map.on('load', function () {
    // Add marker data as a new GeoJSON source.
    map.addSource("markers", {
        "type": "geojson",
        "data": markers
    });

    // Add a layer showing the markers.
    map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15",
            "icon-allow-overlap": true
        }
    });
});


// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
});

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
        popup.remove();
        return;
    }

    var feature = features[0];

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.description)
        .addTo(map);
});

</script>