Search code examples
google-maps-api-3font-awesomejsfiddle

Font awesome marker not appearing on fiddle maps


I'm a newbie with jsfiddle and can't seem to get my font awesome marker onto this fiddle. Can someone tell me what the problem is please?

<div id="googleMap" style="width:500px;height:380px;"></div>

var myCenter = new google.maps.LatLng(51.508742, -0.120850);

function initialize() {
    var mapProp = {
        center: myCenter,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({
       position: myCenter,
       map: map,
       icon: {
        path: fontawesome.markers.MAP_MARKER,
        scale: 0.5,
        strokeWeight: 0.2,
        strokeColor: '#9300D6', 
        strokeOpacity: 1,
        fillColor: '#D69112',
        fillOpacity: 1
        }
    });

    /*var marker = new google.maps.Marker({
        position: myCenter,
    });*/

    marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

https://jsfiddle.net/rv2eyexs/1/


Solution

  • Updated JSFiddle

    I think you forgot add the fontawesome-marker package to your fiddle source. I updated the JSFiddle and works fine.

    https://rawgit.com/nathan-muir/fontawesome-markers/master/fontawesome-markers.min.js