I want to use a font awesome icon as Google Maps marker. Here is my code:
function addMarker(marker) {
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(obj.geo_lat,obj.geo_lng),
category: obj.status,
map: map,
icon: // Font Awesome icon here
});
I've looked at this question, but unfortunately this is not working properly for me. I was wondering if there's another way to do this.
Yes, there is. You can use RichMarker
Example:
function addMarker(marker) {
marker1 = new RichMarker({
position: new google.maps.LatLng(obj.geo_lat,obj.geo_lng),
category: obj.status,
map: map,
draggable: false,
flat:true,
anchor: RichMarkerPosition.MIDDLE,
content: '<i class="fa fa-map-marker fa-2x"></i>'
});
}
Another possible solution is this (without use of other external libraries):
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(obj.geo_lat,obj.geo_lng),
map: map,
label: {
fontFamily: 'Fontawesome',
text: '\uf192', //code for font-awesome icon
fontSize: '15px',
color: 'red'
},
icon: {
path: google.maps.SymbolPath.CIRCLE, //or any others
scale: 0
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With