Mapbox не загружается на всех страницах?

Question

Mapbox используется на сайте, но не загружается на двух конкретных страницах?

На этой странице 1004 * есть три карты, которые хорошо отображаются. И здесь - это рабочий пример страницы, которую я хочу скопировать в другом месте, только с другой картой. Однако на этой странице карта не загружается?

Это javascript, который я использую, каждая карта имеет различные var, stroud, gloucester и brimscombe.

mapboxgl.accessToken = 'validtokenhere';

// STROUD
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "message": "Visit our Stroud clinic",
                "iconSize": [30, 40]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.248550,
                    51.741290
                ]
            }
        },
    ]
};

var stroud = new mapboxgl.Map({
    container: 'stroud',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-2.248550,51.741290],
    zoom: 13
});

// disable map zoom when using scroll
stroud.scrollZoom.disable();

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(/assets/img/marker.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(stroud);
});

// GLOUCESTER
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "message": "Visit our Gloucester clinic",
                "iconSize": [30, 40]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.248140,
                    51.870560
                ]
            }
        },
    ]
};

var gloucester = new mapboxgl.Map({
    container: 'gloucester',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-2.248140,51.870560],
    zoom: 13
});

// disable map zoom when using scroll
gloucester.scrollZoom.disable();

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(/assets/img/marker.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(gloucester);
});

// BRIMSCOMBE
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "message": "Visit our Brimscombe clinic",
                "iconSize": [30, 40]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.063020,
                    51.892550
                ]
            }
        },
    ]
};

var brimscombe = new mapboxgl.Map({
    container: 'brimscombe',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-2.063020,51.892550],
    zoom: 13
});

// disable map zoom when using scroll
brimscombe.scrollZoom.disable();

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(/assets/img/marker.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(brimscombe);
});

, а затем каждый контейнер

<section class="location-map-image">
  <div id="stroud" class="map" style="width: 100%; height: 263px;"></div>
</section>

очевидно, что идентификатор div изменяется в соответствии с местоположением, которое я хочу отобразить.

Я ожидаю увидеть Глостер и Бримскомб, как Страуд?

Журнал консоли показывает

Error: Container 'stroud' not found. map.js:337:22
    r map.js:337
    <anonymous> app-min.js:12508

Похоже, что скрипт застревает, когда не может найти идентификатор div stroud. Что мне делать, когда я хочу показать только gloucester или brimscombe?

Answer 1

TL: DR;Нет элемента HTML для отображения карты в

Ошибка, которую вы видите, состоит в том, что на этой странице нет div тега с идентификатором stroud или brimscombe, поэтому Mapbox не знает, где визуализировать карту.

Если перейти на страницу клиники stroud вы заметите, что вы получаете ошибки для briscombe и gloucester, поскольку ни один из этих div не существует.

РЕДАКТИРОВАТЬ:

Если вы не хотите видеть ошибки, есть несколько разных способов вы можете сделать это, но я бы сделал это примерно так:

// Checking if the element stroud exists
if (!!document.getElementById('stroud')) {
  // If it does, run the stroud code
} 

Вы можете повторить этот шаблон и для двух других.Не нужно указывать else, если вы не хотите.