Using Icon Fonts as Markers in Google Maps V3

Font awesome in the MarkerLabel object adjusting the marker icon's image https://stackoverflow.com/questions/16375077/using-icon-fonts-as-markers-in-google-maps-v3

by Ismail Ibraheem Shurrab

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="map"></div>

CSS

html,
body {
  height: 100%;
}

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

JavaScript

var icon

function initMap() {
  var myOptions = {
      zoom: 4,
    },
    map = new google.maps.Map(document.getElementById('map'), myOptions);

  icon = {
    fillColor: '#E32831',
    fillOpacity: 1,
    strokeWeight: 0,
    scale: 0.65
  };
  marker = new google.maps.Marker({
    map: map,
    label: {
      fontFamily: 'Fontawesome',
      fontSize: '20px',
      text: '\uf1B9',
      color: 'blue',
    },
    animation: google.maps.Animation.DROP,
    draggable: true,
    shape: 'circle',
  });

  map.setCenter(new google.maps.LatLng(-33.8688, 151.2093));
  marker.setPosition(map.getCenter());

  var image = {
    url: '',
    size: new google.maps.Size(30, 30),
    //origin: new google.maps.Point(10, 10),
    anchor: new google.maps.Point(15, 15),
    labelOrigin: new google.maps.Point(15, 15),
  };

  var shape = {
    coords: [15, 30, 50, 50],
    type: 'circle'
  };
  map.addListener('click', function(e) {
    marker = new google.maps.Marker({
      map: map,
      label: {
        fontFamily: 'Fontawesome',
        fontSize: '30px',
        text: '\uf072',
        color: 'blue',
      },
      //icon:' ',
      icon: image,
      shape: shape,
      // but the label isn't animated
      animation: google.maps.Animation.DROP,
      draggable: true,
      crossOnDrag: false,
      opacity: .6,
    });

    marker.setPosition(e.latLng);
  });
}
google.maps.event.addDomListener(window, 'load', initMap);