Using a css font-awesome marker in google maps - html

Question

I want to create a maker for google maps which uses symbols from font-awesome. I would like that it looks somehow like this:
I found at Using Icon Fonts as Markers in Google Maps V3 a solution for this problem, however this requires to include a .js file which is ~0.5 MB large and thus not usable for me.
I also found this solution: https://github.com/lvoogdt/Leaflet.awesome-markers but I did not like the style of the markers.
I managed to create with css the following picture
<div style='display:inline-block;background-color:#08c;padding:10px;border-radius:20px;border:2px solid #FFF;color:#FFF;'>
<i class="fa fa-university" aria-hidden="true"></i>
</div>
But I don't know how to:
Get a nice white pointer at the bottom with CSS (as in the purple icon)
How to use this css marker in google maps. The best I can think of is to make a screenshot, make the black background transparent and save it as a png. But I guess there must be a more proper way to do it?
EDIT: I found in the comments from Using Icon Fonts as Markers in Google Maps V3
I don't think it's possible, one way of doing it would be to extract
the SVG properties from Font Awesome icons, and then define
google.maps.Symbol using SVG notation. Then you'd be able to use them
as symbols
I tried that and it failed. I am using the bank icon with unicode: f19c. So I opend fontawesome-webfont.svg and found an entry
<glyph unicode="" horiz-adv-x="2048" d="M960 1536l960 -384v-
128h-128q0 -26 -20.5 -45t-48.5 -19h-1526q-28 0 -48.5 19t-20.5
45h-128v128zM256 896h256v-768h128v768h256v-768h128v768h256v-768h128v768h256v-
768h59q28 0 48.5 -19t20.5 -45v-64h-1664v64q0 26 20.5 45t48.5 19h59v768zM1851
-64 q28 0 48.5 -19t20.5 -45v-128h-1920v128q0 26 20.5 45t48.5 19h1782z" />
Following the instructions to create marker symbols I tried
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: {
path: 'M960 1536l960 -384v-128h-128q0 -26 -20.5 -45t-48.5
-19h-1526q-28 0 -48.5 19t-20.5 45h-128v128zM256 896h256v-768h128v768h256v-
768h128v768h256v-768h128v768h256v-768h59q28 0 48.5 -19t20.5 -45v-64h-
1664v64q0 26 20.5 45t48.5 19h59v768zM1851 -64 q28 0 48.5 -19t20.5 -45v-128h-
1920v128q0 26 20.5 45t48.5 19h1782z'
}
});
But I do not get a bank icon, only some strange lines:
Does anyone know why I don't get an icon here? And does this maybe lead to create a icon as wished above?

Answer 1

The path seems to be flipped vertically (you'll also need to scale it, the lines you see are just a part of a real large icon)
Fixed path:
M 0.19113133,-15.44788 16.905415,-8.7761997 v 2.223893 h -2.228571 q 0,0.4517349 -0.356919,0.7818476 -0.356919,0.3301132 -0.844418,0.3301132 h -26.568748 q -0.4875,0 -0.844421,-0.3301132 -0.35692,-0.3301127 -0.35692,-0.7818476 h -2.22857 v -2.223893 z M -12.066008,-4.3284126 h 4.4571411 V 9.0149371 h 2.228571 V -4.3284126 h 4.45714333 V 9.0149371 H 1.3054178 V -4.3284126 H 5.7625592 V 9.0149371 h 2.228573 V -4.3284126 H 12.448274 V 9.0149371 h 1.027233 q 0.487499,0 0.844418,0.3301126 0.356919,0.3301126 0.356919,0.7818463 v 1.111933 h -28.971426 v -1.111933 q 0,-0.4517337 0.35692,-0.7818463 0.356921,-0.3301126 0.844421,-0.3301126 h 1.027233 V -4.3284126 z M 15.704077,12.350789 q 0.4875,0 0.844418,0.330113 0.35692,0.330113 0.35692,0.781821 v 2.22392 h -33.428567 v -2.22392 q 0,-0.451708 0.356919,-0.781821 0.356919,-0.330113 0.844421,-0.330113 h 31.025889 z
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
marker = new google.maps.Marker({
position: mapOptions.center,
map: map,
icon: {
xscale:.2,
fillColor:'#000000',
fillOpacity:.5,
path: 'M 0.19113133,-15.44788 16.905415,-8.7761997 v 2.223893 h -2.228571 q 0,0.4517349 -0.356919,0.7818476 -0.356919,0.3301132 -0.844418,0.3301132 h -26.568748 q -0.4875,0 -0.844421,-0.3301132 -0.35692,-0.3301127 -0.35692,-0.7818476 h -2.22857 v -2.223893 z M -12.066008,-4.3284126 h 4.4571411 V 9.0149371 h 2.228571 V -4.3284126 h 4.45714333 V 9.0149371 H 1.3054178 V -4.3284126 H 5.7625592 V 9.0149371 h 2.228573 V -4.3284126 H 12.448274 V 9.0149371 h 1.027233 q 0.487499,0 0.844418,0.3301126 0.356919,0.3301126 0.356919,0.7818463 v 1.111933 h -28.971426 v -1.111933 q 0,-0.4517337 0.35692,-0.7818463 0.356921,-0.3301126 0.844421,-0.3301126 h 1.027233 V -4.3284126 z M 15.704077,12.350789 q 0.4875,0 0.844418,0.330113 0.35692,0.330113 0.35692,0.781821 v 2.22392 h -33.428567 v -2.22392 q 0,-0.451708 0.356919,-0.781821 0.356919,-0.330113 0.844421,-0.330113 h 31.025889 z'
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#map_canvas{height:100%;margin:0;padding:0}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
However, it will not be possible to achieve the desired result, because you would need multiple pathes(but only a single path is possible). You will need a custom overlay(e.g. https://github.com/googlemaps/js-rich-marker) to use fontawesome(the css-approach will not work with native markers, because they are based on either a complex <canvas/> or <img/>...where ::before/::after are not applicable)

Answer 2

You can use the :before and :after selector to implement that. Check below answer.
body {
background-color: grey;
}
.marker {
position: relative;
display: inline-block;
background-color: #08c;
padding: 10px;
border-radius: 50%;
border: 5px solid #FFF;
color: #FFF;
}
.marker:before {
content: "";
position: absolute;
bottom: -14.5px;
left: calc(50% - 16px);
border-style: solid;
border-width: 16px 16px 0;
border-color: #fff transparent;
display: block;
width: 0;
z-index: -1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<div class="marker">
<i class="fa fa-university" aria-hidden="true"></i>
</div>