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

---