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>