draw-on-google-maps

draw-on-google-maps is a JavaScript library that enable you to draw on google maps. You can draw (Polygons, Markers and free hand style)

Demo http://drawonmap.mohamed-nsr.com

Install

For npm

$ npm install --save draw-on-google-maps

For browser

You can download a minified version of the library from 'dist/draw-on-google-map.js' on github project:

https://github.com/mhmdnsr/draw-on-google-map

How to use?

Pre-requests

Google Maps API Key
Drawing Library

-Initialize Google Map

Import It

After installing the library you can start use it like:

var MapDraw = require('draw-on-google-maps');

import MapDraw from 'draw-on-google-maps'

<script src="path/to/library/draw-on-google-map.js"></script>

Initialize MapDraw

To start using the library you have to initialize it first.

var draw = new MapDraw(map);

map: Google Maps instance

API

Hold Map To Start Draw:
```
draw.holdMap();
```
Release Map After Finishing Draw:
```
draw.releaseMap();
```
Clear All Drawn Art:
```
draw.clearAllArt();
```
Change Stroke Color:
```
draw.changeColor(color);
```
color (string)
Change Stroke Weight:
```
draw.changeStrokeWeight(weight);
```
weight (number)
Get Selected Tool:
```
draw.getSelectedTool()
```
returns STRING (BRUSH / POLYGON / MARKER)
Get Selected Color:
```
draw.getSelectedColor()
```
returns STRING color

Brush Draw

draw.brush

Start Brush Draw:
```
draw.brush.startDraw();
```
Stop Brush Draw:
```
draw.brush.stopDraw();
```
Clear Brush Drawn Art:
```
draw.brush.clearArt();
```

Polygon Draw
```
draw.polygon
```
- Start Polygon Draw:
```
draw.polygon.startDraw();
```
- Stop Polygon Draw:
```
draw.polygon.stopDraw();
```
- Clear Polygon Draw Art:
```
draw.polygon.clearArt();
```
- Change Polygon Fill Color:
```
draw.polygon.changeFillColor(color);
```
  color (string)
- Change Polygon Fill Color Opacity:
```
draw.polygon.changeOpacity(opacity);
```
  opacity (number)
  
  From 0 to 1. 0 is transparent and 1 is fully visible

Marker Draw
```
draw.marker
```
- Start Marker Draw:
```
draw.marker.startDraw();
```
- Stop Marker Draw:
```
draw.marker.stopDraw();
```
- Clear Marker Draw Art:
```
draw.marker.clearArt();
```
- Change Marker Icon:
```
draw.marker.changeIcon(icon);
```
  icon (string)
  - default : Add Google Map default marker.
  - colorful : Custom marker with selected color.
  - Any Icon link