Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @agm/drawing with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. require("@agm/core/package.json"); // @agm/core is a peer dependency. var drawing = require("@agm/drawing")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@agm/drawing v1.1.0

Angular Google Maps (AGM) extension for google maps drawing library

Map Drawing for AGM


this package adds drawing support to AGM.

Installation

npm install @agm/drawing
# or
yarn add @agm/drawing

Usage

  1. Import the module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component
// add these imports
import { AgmCoreModule } from '@agm/core';
import { AgmDrawingModule } from '@agm/drawing
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: ['YOUR_API_KEY_HERE']
    }),
    AgmDrawingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. use it in your template
<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>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free