event : CIRCLE_CLICK

April 20, 2018 ยท View on GitHub

The CIRCLE_CLICK event is fired when you click on the circle.

circle.on(GoogleMapsEvent.CIRCLE_CLICK).subscribe((params: any[]) => {

})

Parameters

nametypedescription
params[0]LatLngclicked position
params[1]Circlecircle instance itself

Demo code

<div id="map_canvas"></div>
map: GoogleMap;

loadMap() {
  let GOOGLE: ILatLng = {"lat" : 37.422858, "lng" : -122.085065};
  this.map = GoogleMaps.create('map_canvas', {
    camera: {
      target: GOOGLE
    },
    gestures: {
      'scroll': false,
      'tilt': false,
      'rotate': false,
      'zoom': false
    }
  });

  // Add a circle
  let circle: Circle = this.map.addCircleSync({
    'center': GOOGLE,
    'radius': 300,
    'strokeColor' : '#AA00FF',
    'strokeWidth': 5,
    'fillColor' : '#880000',
    'clickable' : true   // default = false
  });

  this.map.moveCamera({
    target: circle.getBounds()
  });

  // Listen the CIRCLE_CLICK event
  circle.on(GoogleMapsEvent.CIRCLE_CLICK).subscribe(this.onCircleClick.bind(this));
}

onCircleClick((params: any[]) => {
  let latLng: LatLng = params[0];
  let circle: Circle = params[1];

  // You can change the style for instance.
  circle.setFillColor("blue");
  circle.setStrokeColor("green");
  circle.setStrokeWidth(10);

  let marker: Marker = this.map.addMarkerSync({
    position: latLng,
    title: "You clicked here on the circle!",
    snippet: latLng.toUrlValue()
  });
  marker.showInfoWindow();

});