Leaftlet.JS/CartoDB.JS API Map not working on IE or Firefox

Question

I have a map that was built using Leaflet.JS and CartoDB.JS API. The map works beautifully on Google Chrome and Safari, but the pins do not show up on IE, and on FireFox, the pins show up but you can't click them.

Here is the URL: http://booktravelbound.net/experienceamerica/

I am not an expert developer and I had this job done by a contractor. Would someone be able to help? First time on Stack Overflow, so please forgive me!

Here is the javascript code:

var InteractiveMap = L.Class.extend({

options: {
    'redIcon' : L.icon({
        iconUrl: 'img/leaflet-color-markers/marker-icon-red.png',
        iconRetinaUrl: 'img/leaflet-color-markers/marker-2x-red.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
        //shadowUrl: 'my-icon-shadow.png',
       //shadowRetinaUrl: '[email protected]',           
        //shadowAnchor: [22, 94]
    }),
    'greyIcon' : L.icon({
        iconUrl: 'img/leaflet-color-markers/marker-icon-grey.png',
        iconRetinaUrl: 'img/leaflet-color-markers/marker-icon-2x-grey.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
        //shadowUrl: 'my-icon-shadow.png',
        //shadowRetinaUrl: '[email protected]',           
        //shadowAnchor: [22, 94]
    })
},

initialize: function(options) {       
    L.setOptions(this, options);
    if (null != this.options.cartoDbOptions) {
        this.initMapAsCartoDbViz();
    } else {
        this.initMapInUsualWay();
    }
},

initMapInUsualWay: function() {
    this._map = L.map(this.options.mapDivId, this.options.mapOptions);

    this.initBaseMapLayers();

    L.control.scale( { position : 'bottomright' } ).addTo(this._map);
    this.completeInit();
},

initMapAsCartoDbViz: function() {
    var _interactiveMap = this;
    cartodb.createVis(this.options.mapDivId, this.options.cartoDbOptions.vizURL,
        L.extend({
            center_lat: this.options.mapOptions.center.lat,
            center_lon: this.options.mapOptions.center.lng,
            zoom: this.options.mapOptions.zoom
        }, this.options.cartoDbOptions.vizOptions)
    )
    .done(function (vis, layers) {
        // layer 0 is the base layer, layer 1 is cartodb layer
        // setInteraction is disabled by default
        _interactiveMap._map = vis.getNativeMap();
        _interactiveMap.completeInit();
    })
    .error(function (err) {
        console.log(err);
        _interactiveMap.initMapInUsualWay();
    });
},

initBaseMapLayers: function() {
    var baseMapLayerDescription = [
        { 'id' :"Carto", 'name' : 'Carto', 'default' : 'true',
                init : function() {
                    var layer = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
                        maxZoom: 18, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;<a href="https://carto.com/attribution">CARTO</a>'
                    });
                    return layer;
                }
        }
    ];
    this._baseMaps = {};       
    for (i=0, arrLen = baseMapLayerDescription.length; i < arrLen; i++) {    
        var tileLayer = baseMapLayerDescription[i].init();           
        this._baseMaps[baseMapLayerDescription[i].name] = tileLayer;
        if (baseMapLayerDescription[i].default) {
            tileLayer.addTo(this._map);
        }
    }
},

completeInit: function() {
    this.initCustomControlsOnMap();
    this._getJSON(this.options.dataUrl, this.addJsonToMap, this);
    this.initSideBar();
},

initCustomControlsOnMap: function() {
    //controlLayers = L.control.layers(this._baseMaps, this._overlayLayers);
    //controlLayers.addTo(this._map);
},

initSideBar: function() {
    this._sideMenuTemplate = document.getElementById('sideMenuTemplate').innerText;
    Mustache.parse(this._sideMenuTemplate);

    this._sidebar = L.control.sidebar('sidebar', {
        closeButton: true,
        position: 'right'
    });
    this._map.addControl(this._sidebar);
},

addJsonToMap: function(data) {
    var lineLatLngs = [];
    for (var i = 0, arrLenght = data.length; i < arrLenght; i++) {
        var city = data[i],
            location = city.location.split(','),
            marker;
        if (city.active) {
            marker = L.marker(location, { icon : this.options.redIcon });
            lineLatLngs.push(marker.getLatLng());
            marker.cityDetails = city;
            marker.cityDetails.showHotels = !(null == city.hotels);
            marker.cityDetails.showTours = !(null == city.tours);
            marker.on('click', function () {
                //interactiveMap._sidebar.setContent('');
                interactiveMap._sidebar.getContainer().scrollTop = 0;
                var sideMenuContext = Mustache.render(interactiveMap._sideMenuTemplate, this.cityDetails);
                interactiveMap._sidebar.setContent(sideMenuContext);
                interactiveMap._sidebar.show();
            });
        } else {
            if ('0' === L.version.substr(0, 1)) { // v.0.7.x doesn't implemented marker.bindTooltip
                marker = L.marker(location, {
                    icon : this.options.greyIcon,
                    title : 'We haven\'t visited this city yet! Check back next week for new cities.'
                });
            } else {
                marker = L.marker(location, { icon : this.options.greyIcon });
                marker.bindTooltip('We haven\'t visited this city yet!<br/>Check back next week for new cities.');
            }
            marker.on('click', function () {
                interactiveMap._sidebar.hide();
            });
        }
        marker.addTo(this._map);
    }
    L.polyline(lineLatLngs, {dashArray: "5, 5"}).addTo(this._map);
},

_getJSON: function(url, callback, callbackContext) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    //xhr.responseType = 'json';
    //xhr.setRequestHeader('Accept', 'application/json');
    xhr.onload = function () {
        if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 304 && xhr.response) {
            //callback.call(callbackContext, xhr.response);
            callback.call(callbackContext, JSON.parse(xhr.response));
        } else {
            console.log('getJSON error', xhr);
        }
    };
    xhr.send();
}
});


var interactiveMap = new InteractiveMap( {
    mapDivId : 'map',
    mapOptions : {
        center: L.latLng(37.19533058280065, -98.87695312500001),
        zoom: 4,
        zoomControl : false,
        dragging : false,
        doubleClickZoom : false,
        scrollWheelZoom : false
    },

    cartoDbOptions : {
        vizURL : 'http://telegul.carto.com/api/v2/viz/b167e126-38e5-11e7-ba84-0e3ebc282e83/viz.json', // <-- INSERT {YOUR vizjson_url}
        vizOptions : {
            shareable: false,
            title: false,
            description: false,
            search: false,
            zoomControl: false,
            cartodb_logo : false,
            tiles_loader: true,
            infowindow: false,
            layer_selector: false,           
            scrollwheel: false,
            layer_selector: false,
            legends: false
        }
    },
    dataUrl : 'data/ExperienceDomesticMap.json'
} );

Thank you!

Answer 1

Added a metatag to make the sidebar viewable on IE

<meta http-equiv="X-UA-Compatible" content="IE=edge">