Unable to use OpenLayer

I'm very new with web language and I have to integrate a map in a page. I'm using cshtml with Visual Studio 2015

To do this I have take a code using ol.js. The map have to be displayed, and for each value in my table I localize the city/country from IP and I display for each countries, the number of item.

There is my Index.cshtml

<script type="text/javascript">

    var map;
    var countriesLayer;
    var citiesLayer;

    function newCountriesLayer(start, end, item, result) {
        return new ol.layer.Vector({
            minResolution: 2500,
            source: new ol.source.GeoJSON({
                projection: 'EPSG:3857',
                url: '@Url.Action("GetCountries")'
                    + '?StartDate=' + start
                    + '&EndDate=' + end
                    + '&Item=' + item
                    + '&Result=' + result
            }),
            style: function (f, r) {
                return [
                    new ol.style.Style({
                        text: new ol.style.Text({ text: f.get("title"), fill: new ol.style.Fill({ color: '#673B8F' }), scale: 1.2 }),
                        image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({ color: 'white' }) }),
                    })
                ];
            }
        });
    }

    function newCitiesLayer(start, end, item, result) {
        return new ol.layer.Vector({
            maxResolution: 2500,
            source: new ol.source.GeoJSON({
                projection: 'EPSG:3857',
                url: '@Url.Action("GetCities")'
                    + '?StartDate=' + start
                    + '&EndDate=' + end
                    + '&Item=' + item
                    + '&Result=' + result
            }),
            style: function (f, r) {
                return [
                    new ol.style.Style({
                        text: new ol.style.Text({ text: f.get("title"), fill: new ol.style.Fill({ color: '#673B8F' }), scale: 1.2 }),
                        image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({ color: 'white' }) }),
                    })
                ];
            }
        });
    }

    $(document).ready(function () {
        var start = $('#startDate').val();
        var end = $('#endDate').val();
        var item = $('#item').val();
        var result = $('#resultat').val();

        countriesLayer = newCountriesLayer(start, end, item, result);
        citiesLayer = newCitiesLayer(start, end, item, result);

        map = new ol.Map({
            target: 'map',
            renderer: 'canvas',
            layers:
            [
                new ol.layer.Tile({
                    //source: new ol.source.TileWMS({
                    //    url: 'http://ift.tt/1a1O7w2',
                    //    params: { LAYERS: 'openstreetmap', VERSION: '1.1.1' }
                    //})
                    source: new ol.source.OSM(),
                }),
                countriesLayer, citiesLayer
            ],
            view: new ol.View2D({
                center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
                zoom: 1,
            })
        });
    });
</script>

In my Controller.cs I have 2 functions:

public ContentResult GetCities(string StartDate, string EndDate, string Item, string Result){...}

public ContentResult GetCountries(string StartDate, string EndDate, string Item, string Result){...}

both return :

return new ContentResult()
{
    Content = geoJson.ToString(),
    ContentEncoding = System.Text.Encoding.ASCII,
    ContentType = "text/json"
};

Value for geoJson is :

{
    "type": "FeatureCollection",
    "crs": { 
        "type": "name",
        "properties": { 
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84" 
        } 
    },
    "features": [
    { 
        "type": "Feature",
        "properties": {
            "id":"CN-30-Guangzhou",
            "title":"2",
        }, 
        "geometry": { 
            "type": "Point",
            "coordinates": [113.25,23.1167]
        }
    },
    {
        "type": "Feature",
        "properties": { 
            "id":"CN-23-Shanghai", 
            "title":"1",
        },
        "geometry": { 
            "type": "Point",
            "coordinates": [121.3997,31.0456] 
        }
    },
]}

In the project that I took this code, it works. The map contain 2 points in china : a "1" is displayed in Shanghai and a "2" in Guangzhou.

In my project I have an error :

Uncaught TypeError: Cannot read property 'a' of null

at xl (ol.js:266)
at wl (ol.js:265)
at Bl (ol.js:268)
at Al (ol.js:269)
at nr (ol.js:471)
at pr.mr.f (ol.js:470)
at td (ol.js:38)
at N (ol.js:37)
at Xq.q (ol.js:467)

As I said, I'm very new to web and I lost with that error. If try to check ol.js but it is unreadable. Maybe I'm missing a library or a package but I don't know how to know.