Circles

Creating circles

Circles are pretty much markers with a radius. Use the Circle component to create one.

<GMap @lat={{51.5074}} @lng={{-0.1278}} @zoom={{12}}>
  <Circle
    @lat={{51.507568}}
    @lng={{-0.127762}}
    @radius={{500}}
    @fillColor="#00F900"
    @fillOpacity={{0.3}}
    @strokeColor="darkgreen"
    @strokeOpacity={{0.5}}
    @strokeWeight={{1}}
  />
</GMap>

Example

Modify the radius and fill color below and watch the circle update live.

TIP

The run() calls below are only there because this live example runs in a sandbox with no Ember event dispatcher, so a plain on "input" handler doesn't get wrapped in a runloop for free. In a real Ember app you'd just write this.radius = value in the handler — no run() needed.