draw-on-google-maps v1.0.2

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');

or

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

or

<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