@arin-pang-agm/drawing
Version:
Angular Google Maps (AGM) extension for google maps drawing library
53 lines (42 loc) • 1.2 kB
Markdown
# Map Drawing for AGM
-----
this package adds drawing support to [AGM][agm].
## Installation
```sh
npm install @arin-pang-agm/drawing
# or
yarn add @arin-pang-agm/drawing
```
## Usage
1. Import the module
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component
// add these imports
import { AgmCoreModule } from '@arin-pang-agm/core';
import { AgmDrawingModule } from '@arin-pang-agm/drawing
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AgmCoreModule.forRoot({
apiKey: ['YOUR_API_KEY_HERE']
}),
AgmDrawingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
2. use it in your template
```html
<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982" [agmDrawingManager]="drawing">
</agm-map>
<agm-drawing-manager #drawing="agmDrawingManager" [drawingMode]="'circle'" [circleOptions]="{fillColor:'red', radius: 150}"></agm-drawing-manager>
```
[drawing-manager]: https://developers.google.com/maps/documentation/javascript/reference/#drawing
[agm]: https://angular-maps.com/