Google Maps Javascript Api V3 Example Drawing Tools Library
Recently, the Google Drawing API V3 has a new Drawing library. It provides a set of tools with which users can draw markers, draw lines, circles, rectangles, polygons on the map to highlight different places on the map.
These tools can be used to collect various information from users. The application can listen for events and respond accordingly, for example, to make a search query or save information in a database.
')
To work with the Drawing library, when connecting js Google Maps, you need to add the parameter = libraries :
< script type = "text/javascript" src = "http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing" > </ script > DrawingManager:
The DrawingManager class from this library provides a graphical user interface. It includes polygons, rectangles, broken lines, circles and markers on the map.
The DrawingManager object is created as follows:
var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map); Now there are custom drawing tools on the map.
Options:
We can configure exactly which tools we want to provide to the user, as well as their position on the map and the view:
drawingControl - defines the visibility of instruments on the map. It takes the boolean value true / false.
drawingControlOptions - determines the position of the tools on the map, as well as a list of the tools you want to include.
- position - the position of the drawing tools. Default is TOP_LEFT.
- drawingModes - tools for display and their order. A hand icon is always available and is not listed in this array. The default is [MARKER, POLYLINE, RECTANGLE, CIRCLE, POLYGON].
drawingMode - determines which tool will be selected by default.
circleOptions {}
markerOptions {}
polygonOptions {}
polylineOptions {}
rectangleOptions {}
For each tool, you can specify your own specific options. For example, marker icon, shape fill color, zindex, clickability, etc. Complete information on each option can be found in the API documentation.
You can also specify whether users will be able to edit the shape after creation. To do this, set the editable option to true.
For example, let's add the ability to put markers on the map, draw circles and polygons, set the toolbar at the top center and set an icon for the marker and some options for circles.
var drawingManager = new google.maps.drawing.DrawingManager({ drawingControl : true , drawingControlOptions : { position : google.maps.ControlPosition.TOP_CENTER, drawingModes : [google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON] }, drawingMode : google.maps.drawing.OverlayType.MARKER, markerOptions : { icon : new google.maps.MarkerImage( 'http://www.example.com/icon.png' ) }, circleOptions : { fillColor : '#ffffff' , fillOpacity : 1 , strokeWeight : 5 , clickable : false , zIndex : 1 , editable : true } }); Change options:
When the DrawingManager object is created, it can be updated using the setOptions () function.
For example, you can set a new position for the tools:
drawingManager.setOptions({ drawingControlOptions : { position : google.maps.ControlPosition.BOTTOM_LEFT } }); Or change the fill color of the circles:
drawingManager.setOptions({ circleOptions : { fillColor : '#000000' } }); Or, for example, by clicking on a button, hide or show the toolbar:
// To hide: drawingManager.setOptions({ drawingControl: false }); // To show: drawingManager.setOptions({ drawingControl: true }); After the toolbar appears, all the options you set for it are saved.
If you want to completely remove the toolbar, you need to call:
drawingManager.setMap( null ); Developments:
When the user draws on the map, sets a marker, two events are triggered:
1) {overlay} complete - where {overlay} is the type of object that the user has created, for example, circlecomplete, polygoncomplete, etc.). A reference to this object is passed as an argument.
2) overlaycomplete - the OverlayType and a link to the created object are passed as an argument.
For example, when installing a marker by the user, we can get the coordinates and display them or save them in the database.
google.maps.event.addListener(drawingManager, 'markercomplete' , function ( marker ) { console .log(marker.getPosition().toString()) }); google.maps.event.addListener(drawingManager, 'overlaycomplete' , function ( event ) { if (event.type == google.maps.drawing.OverlayType.MARKER) { console .log( ' ' ) } }); References:
Library example
Documentation
Google Maps Javascript Api V3 Example Drawing Tools Library
Source: https://weekly-geekly.imtqy.com/articles/133509/index.html