I have a map using gmaps.js, I want to add a controller to the map that allows the users to draw shapes.
I understand this can be done using google maps api as follows:
var mapOptions = {
center: new google.maps.LatLng(pos.location[0], pos.location[1]),
zoom: 3,
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
}});
drawingManager.setMap(map);
but I'm looking for an alternative with gmaps.js.
gmaps.js doesn't have a method for drawing. But you can create your map with gmaps.js and add drawing manager to it with normal api.
var map = new GMaps({
div: '#map_canvas',
lat: -12.043333,
lng: -77.028333
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
}});
drawingManager.setMap(map.map); // map.map is the reference to original map object
Working example here