如何将字体真棒图标类添加到谷歌地图标签

Question

I have spent hours looking for a way to add font awesome icon class to google maps label class but i cant find the solution. I have tried gmaps and markerwithlabes plugin but still i can't get it to work. I tried overlays too but they get duplicated while zooming.. Here is a piece of my javascript code

 var marker = new google.maps.Marker({ 'position': latLng, 'icon': markerImage , 'label': {'text': '<i></i>', 'color': "black"}, 'optimized': false });

I need help with this.

Answer 1

I doubt you could actually insert html into the label. However, it is possible to use iconic fonts like FontAwesome.

When you use an element and style it as a FA icon:

<i class="fa-camera-retro"></i>

FontAwesome inserts an unicode character to the :before pseudoselector of the i element:

.fa-camera-retro:before {
    content: "\f083";
}

So, to achieve the same effect in a marker label, you could declare that same unicode character as the text for the marker label:

label:{
   text: String.fromCharCode("0xf083"),
   fontFamily: 'FontAwesome'
}

Of course this isn't as intuitive as using FA classnames, but then, again, nobody said it would be straightforward.

I left you a snippet for you to try:

 var centerMap={lat:0,lng:-77 }, zoom=7; function initMap(){ var map = new google.maps.Map(document.getElementById('map'), { center: centerMap, scrollwheel: false, zoom: zoom }); var marker=new google.maps.Marker({ position:map.getCenter(), map:map, label:{ text: String.fromCharCode("0xf083"), fontFamily: 'FontAwesome' } }); } document.addEventListener("DOMContentLoaded", function() { initMap(); });

 #map { width:100%; height:90vh; }

 <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <i class="fa fa-camera-retro"></i> fa-camera-retro <div id="map"></div>