0

I have this google map marker below and I'm using a font awesome marker icon as the label/icon. But using the label property I'm not sure how I can a.) color the marker b.) put a number inside the marker.

I'm following this SO link

Here is my code

var marker = new google.maps.Marker({
  position: {
    lat: eventArray[0].Latitude,
    lng: eventArray[0].Longitude
  },
  map: scope.map,
  label: {
    fontFamily: 'Fontawesome',
    text: '\uf041',
    color: '#008489' // this colors the text inside the label, not the marker color
  },
});
chuckd
  • 13,460
  • 29
  • 152
  • 331

2 Answers2

2

Assuming what do you want to achieve is the awesomefont marker with a number in it, you can just copy the SVG path of the awesomefont marker (click download and copy the SVG path, see license) and use it as icon. Then you can change it's color to anything you want. As `label only input the text/color you want.

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<script>
  function init() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(51.509865, -0.118092)
    });
    var icon = {
        path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z", //SVG path of awesomefont marker
        fillColor: '#008489', //color of the marker
        fillOpacity: 1,
        strokeWeight: 0,
        scale: 0.09, //size of the marker, careful! this scale also affects anchor and labelOrigin
        anchor: new google.maps.Point(200,510), //position of the icon, careful! this is affected by scale
        labelOrigin: new google.maps.Point(205,190) //position of the label, careful! this is affected by scale
    }

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: icon,
      label: {
        text: '3', //text inside marker
        color: '#FFFFFF', //color of the text inside marker
      },
    });
  }
  google.maps.event.addDomListener(window, 'load', init);
</script>
Matej P.
  • 5,303
  • 1
  • 28
  • 44
0

Try this :

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <i class="fas fa-map-marker-alt" style="font-size:60px;position:relative;color:red;"><p style="font-size:16px;position:absolute;margin:0px;paddind:0px;top:13px;left:19px;">3</p></i>

https://codepen.io/kalpeshshende/pen/BqZeVL

Kalpesh Shende
  • 122
  • 7