Google Maps: place number in marker

by biog

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

CSS

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

JavaScript

var initMap = function() {
  var latLng = new google.maps.LatLng(-34.397, 150.644);
  var gmap = new google.maps.Map(document.getElementById('map'), {
    center: latLng,
    zoom: 8
  });
 
  var mIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    fillColor: '#fff',
    strokeOpacity: 1,
    strokeWeight: 1,
    strokeColor: '#333',
    scale: 12
  };

  var gMarker = new google.maps.Marker({
    map: gmap,
    position: latLng,
    title: 'Number 123',
    icon: mIcon,
    label: {color: '#000', fontSize: '12px', fontWeight: '600',
      text: '123'}
  });
}

initMap();