Google map Marker customization by google.maps.SymbolPath.CIRCLE

I am using google maps for my map and showcasing the markers in the maps, As I was using the mapBOX earlier the mapmarkers we are showcased as follows are displayed in map.

But by using google maps for markers I am using google.maps.SymbolPath.CIRCLE for rounded markers.

But my case few times i want to make use of SQUARED MARKERS with some text inside marker.

How can i achieve this, Is there any special library i have to use for this case.

Please refer this screenshot, and guide on this.

Answer

You can define custom paths for google.maps.Symbols. Below is an example based off the example in the documentation. You can add a single character “label” to the marker.

var square = {
    path: 'M -2,-2 2,-2 2,2 -2,2 z', // 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1,
    scale: 5
  };
  var marker = new google.maps.Marker({
    position: {lat: 21.5, lng: 153.027},
    map: map,
    icon: square,
      label: {
      text:"X",
      fontWeight: "bold"
    }
  });

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 21.5,
      lng: 153.027
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the custom symbols. All symbols are defined via SVG path notation.
  var square = {
    path: 'M -2,-2 2,-2 2,2 -2,2 z', // 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1,
    scale: 5
  };
  var marker = new google.maps.Marker({
    position: {
      lat: 21.5,
      lng: 153.027
    },
    map: map,
    icon: square,
    label: {
      text: "X",
      fontWeight: "bold"
    }

  });
  var toggle = false;
  google.maps.event.addListener(marker, 'click', function(evt) {
    if (!toggle) {
      this.setLabel({
        text: "X",
        color: "white",
        fontWeight: "bold"
      });
    } else {
      this.setLabel({
        text: "X",
        color: "black",
        fontWeight: "bold"
      });
    }
    toggle = !toggle;
  });

}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

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