Openlayers 3 - can't implement my marker but fill does work

Question

I'm trying to add a marker to my map and it's not working out too well for me. The map and coordinates do work. I added a dot to the location with setFillStrokeStyle which also works, so I assume I'm pretty close to the solution.

<script type="text/javascript">
    var zoomIn = @Model.zoom;

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.MapQuest({ layer: 'osm' })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([@Model.lng, @Model.lat]),
            zoom: zoomIn
        })
    });

    @*---This part is bugging, can't seem to implement this:--- *@

    map.addOverlay(new ol.Overlay({
        position: ol.proj.fromLonLat([@Model.lng, @Model.lat]),
        element: $('<img src= "/OpenLayers-2.10/img/marker.png">')
            .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
            .tooltip({title: @Model.Location, trigger: 'click'})
    }));

    @* ---This works if I uncomment this---

    map.on('postcompose', function (evt) {
        evt.vectorContext.setFillStrokeStyle(
            new ol.style.Fill({ color: 'rgba(0, 0, 255, .5)' }),
            new ol.style.Stroke({ color: 'rgba(0, 0, 255, .8)', width: 3 }));
        evt.vectorContext.drawCircleGeometry(
            new ol.geom.Circle(ol.proj.fromLonLat([@Model.lng, @Model.lat]), 40));
    });*@

</script>

I based my code on this post: how to add markers with OpenLayers 3

My microsoft edge is giving error message: SCRIPT16386: No such interface supported, ol.js (422,95)

Firefox is giving me: Empty string passed to getElementById(). jquery.unobtrusive-ajax.js:31:20 TypeError: Argument 1 of Node.appendChild does not implement interface Node.

At the loading of the page i upload the ol.js script:

<script src="~/Scripts/ol.js"></script>
<link href="~/OpenLayers-2.10/theme/default/style.css" rel="stylesheet" />
<style>
    .map {
        height: 400px;
        width: 100%;
    }
</style>

Any advice where I'm doing things wrong? Thanks in advance!

Answer 1

As of 3.12.0 release of ol (change #4485 https://github.com/openlayers/ol3/pull/4485/files ), the element passed to ol.Overlay must be an HTML element, not a jQuery element, so you would need to do something like this to adjust your code for this change:

 var myElement = $('<img src= "/OpenLayers-2.10/img/marker.png">')
            .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
            .tooltip({title: @Model.Location, trigger: 'click'});

 map.addOverlay(new ol.Overlay({
        position: ol.proj.fromLonLat([@Model.lng, @Model.lat]),
        element: myElement[0]
    }));