title: Using a css font-awesome marker in google maps
body: <p>I want to create a maker for google maps which uses symbols from font-awesome. I would like that it looks somehow like this:</p>
  
  <p><a href="https://i.stack.imgur.com/nMClH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nMClH.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>I found at <a href="https://stackoverflow.com/questions/16375077/using-icon-fonts-as-markers-in-google-maps-v3">Using Icon Fonts as Markers in Google Maps V3</a> 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.</p>
  
  <p>I also found this solution: <a href="https://github.com/lvoogdt/Leaflet.awesome-markers" rel="nofollow noreferrer">https://github.com/lvoogdt/Leaflet.awesome-markers</a> but I did not like the style of the markers.</p>
  
  <p>I managed to create with css the following picture</p>
  
  <p><a href="https://i.stack.imgur.com/pIPnA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pIPnA.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div style='display:inline-block;background-color:#08c;padding:10px;border-radius:20px;border:2px solid #FFF;color:#FFF;'&gt;
      &lt;i class="fa fa-university" aria-hidden="true"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I don't know how to:</p>
  
  <ol>
  <li><p>Get a nice white pointer at the bottom with CSS (as in the purple icon)</p></li>
  <li><p>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? </p></li>
  </ol>
  
  <hr>
  
  <p><strong>EDIT:</strong> I found in the comments from  <a href="https://stackoverflow.com/questions/16375077/using-icon-fonts-as-markers-in-google-maps-v3">Using Icon Fonts as Markers in Google Maps V3</a> </p>
  
  <blockquote>
    <p>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</p>
  </blockquote>
  
  <p>I tried that and it failed. I am using the <a href="http://fontawesome.io/icon/university/" rel="nofollow noreferrer">bank</a> icon with unicode: f19c. So I opend fontawesome-webfont.svg and found an entry </p>
  
  <pre><code>    &lt;glyph unicode="&amp;#xf19c;" 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" /&gt;
  </code></pre>
  
  <p>Following the instructions to create <a href="https://developers.google.com/maps/documentation/javascript/symbols?" rel="nofollow noreferrer">marker symbols</a> I tried</p>
  
  <pre><code>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'
                   }
               });
  </code></pre>
  
  <p>But I do not get a bank icon, only some strange lines:
  <a href="https://i.stack.imgur.com/eGemY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eGemY.png" alt="enter image description here"></a></p>
  
  <p>Does anyone know why I don't get an icon here? And does this maybe lead to create a icon as wished above?</p>