Complex Marker Icons

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {
var mapCenter = new google.maps.LatLng(-33.9, 151.2);
var radius = 10000;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: mapCenter
  });


var beaches = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
  ['Cronulla Beach', -34.028249, 151.157507],
  ['Manly Beach', -33.80010128657071, 151.28747820854187],
  ['Maroubra Beach', -33.950198, 151.259302]
];

  var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: mapCenter,
            radius: radius
          });
  
  
  


  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var markerPosition = new google.maps.LatLng(beach[1],beach[2]);
    
    //Get distance between the center of the circle and the coordinates
    var dist  = google.maps.geometry.spherical.computeDistanceBetween(mapCenter,markerPosition)    
    
    //If distance is less than the radius, plot the markers in the map
    if (dist <= radius){
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      title: beach[0]
    });
  }
    }
    
  
}