Code Add Circle on Marker Click in Google Maps

In this example you will learn how to add circle on marker click in google map.

Here you can view the output of the example and you can also “try it yourself” by clicking on “Live Demo” button given at the bottom.

Examples

var marker = new google.maps.Marker({    
    position: lat_lng,    
    map: map    
  });  

  // This event listener will call addMarker() when the map is clicked.    
  marker.addListener('click', function(event) {    
    addCircle(event.latLng);    
  });
  
function addCircle(location) {    
  // Add the circle for this city to the map.    
    var cityCircle = new google.maps.Circle({    
      strokeColor: '#FF0000',    
      strokeOpacity: 0.8,    
      strokeWeight: 2,    
      fillColor: '#FF0000',    
      fillOpacity: 0.35,    
      map: map,    
      center: location,    
      radius: 199999.45454,  
      draggable:false  
    });  
}

Add Circle on Marker Click in Google Maps Example

Above example will produce following output