Google Map Drawing plugins

Google Map script with drawing library and basic following functions:

- Custom UI and css
- No jQuery
- Support drawing shapes and exporting coordinates

Some sample pictures:




Requirements

- Google Map API Javascript: include drawing library.
- Font Awesome > 4 for icons

Definitions

- Options: Gmap drawer options on html head with object variable gmapDrawerOptions includes following options.
- visible: visible map at beginning.
- type: boolean, default: true
- enableSelection: enable selection when clicking on elements.
- type: boolean, default value: true
- drawingButtons: configure control buttons and visible drawing modes.
- type: object array, default config
- drawingToolOptions: override drawing tool options.

- Events
- feature_selected
- shape_selected
- polygon_selected
- marker_selected
- polygon_completed
- arrow_completed
- marker_completed
- draw_items_change
- on_delete_item
- on_save_selection

- Methods
- addControls(controls-element): add map controls from DOM element
- attachEvent(name, callback): listen events
- listenEvent(name, callback): listen events
- clearMap(): clear selection, controls, geo layers and reset default configuration
- clearSelection(): clear selections both google elements and geo layers
- deleteSelectedShape(): clear selected shape/geo layer
- rotateSelectedMarker(degree): rotate marker/point (geo layer)
- loadGeoJson(geo-json-format, autoDraw): load geo layers
- initialize(): creating drawer tool
- setMap(google-map-instance): set map instance
- setEditMode(boolean): set edit mode flag state
- setOption(string, boolean): set tool's single option (check option description above)
- visible key: set visible flag value for logics and show/hide tool and elements
- enableSelection key: set selection flag for logics (prevent selection) and clear selection if false value
- setGeoOption(string, boolean): set geo layer option
- visibleArrows key: set visible value (boolean) to show/hide point arrows

Browser guide

Include this to link stylesheet and script

``html


`

`html



`

Change logs

- 2023-03-25 1.0.6
- Add options drawingButtonsSize may be sm, md
- Updated buttons title from options
- Fixed event for creating button elements from template case.
- 2023-03-11 1.0.5
- Updated visible and optional additions options for GEO features
- Update styles: added .gmap-hidden class for hiding another elements on edit mode (.editMode class), addition .gmap-controls class for bootstrap button styles
- Added setGeoOption function for updating feature styles
- Updated google marker functions: resetArrowIconMarker`
- 2022-10-10 1.0.4
- Fix bugs and styles.
- Add arrow color picker
- Integrate create and remove events: arrow, polygon.
- Handle map element's data.
- Relocate structure, prototypes

- 2022-10-05 1.0.3
- Handling options, drawing options, modes, open methods
- Arrow marker & data layer feature: highlight arrow marker, draggable, rotation
- Add bootstrap icons library: css, buttons, fontawesome
- Update selection, controls element, confirmation to delete item
- Relocate structure, prototypes

- 2022-09-12 1.0.2
- Open/Close principle.
- Describe functions.

- 2022-09-11 1.0.1
- Create specific private events
- Update button control styles

- 2022-09-10 1.0.0
- Initialize package