google-maps-api-3google-maps-markersfont-awesomeicon-fonts

Using Icon Fonts as Markers in Google Maps V3


I was wondering whether it is possible to use icon font icons (e.g. Font Awesome) as markers in Google Maps V3 to replace the default marker. To show/insert them in a HTML or PHP document the code for the marker would be:

<i class="icon-map-marker"></i>

Solution

  • Here's my attempt at the same thing (using "markerwithlabel" utility library) before I realised Nathan did the same more elegantly above: http://jsfiddle.net/f3xchecf/

    function initialize() {
    
        var myLatLng = new google.maps.LatLng( 50, 50 ),
            myOptions = {
                zoom: 4,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                },
    
            map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
    
         marker = new MarkerWithLabel({
           position: myLatLng,
           draggable: true,
           raiseOnDrag: true,
           icon: ' ',
           map: map,
             labelContent: '<i class="fa fa-send fa-3x" style="color:rgba(153,102,102,0.8);"></i>',
           labelAnchor: new google.maps.Point(22, 50)
         });
    
        marker.setMap( map );
    }
    
    initialize();