Draw Polygon shapes in google maps

Hi everybody, Is anyone aware of a widget which we can use to DRAW polygons in googlemaps? I've found a very nice one to display it but the important step for us is to be able to draw them and create a association with the shape to an object of ours. The thing I'd like to do is do this: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools Or is there a simple way to include a piece of javascript as this? (Viewing blog) https://forum.mendix.com/link/questions/87886 Hope you can help! Would be great if it works! Kind regards Laurens    
4 answers

Hi Laurens,


Yes that is possible, I made that widget already (but it is not a generally published widget).


In your google api script you add drawing tools

script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.apiAccessKey + '&libraries=geometry,drawing'


add drawingmanager:

var drawingManager = new google.maps.drawing.DrawingManager(options)



further you have to add some events on Overlaycompleteevents (you can distinguish between Marker, Polygon complete)

google.maps.event.addListener(drawingManager, 'overlaycomplete', lang.hitch(this, function (OverlayCompleteEvent) { .. }


Then you have to add some properties to interact with Mendix (some kind of refresh flow)


When loading polygons you retrieve them from database and you plot them on map by adding new polygon, 

new google.maps.Polygon (options)


I added a customoverlay to be able to rightclick the drawn polygon and be able to delete it.


Good luck


Hi everybody,

short update. It works!! :-) In the end, as Friso mentioned, only a few lines of code did the job. I'll now try to make it a little bit more general and see if there is a possibility to submit it to the app store. 

Keep you posted!



Hi Laurens, all,

I finally found some time on an early sunday to add the edit + draw capabilities to my AppStore widget:


Not sure if it entirely meets your requirements, but now you will be able to create new polygons / polylines when you are in a dataview of the respective Polygon / Polyline Mendix objects.

How it works

  • There is an extra setting in the widget 'Interaction' > 'Enable Draw' which enables drawing when the dataview is a new Mendix object. When the full overlay is completed, the coordinates of the Polygon will be stored in the Coordinates attribute of your Mendix Polygon object.
  • Editing can directly be done on a drawn polygon, but also can be done when opening the same Polygon page again after having saved it.




Hope it helps!


I'll try to use the HTML Javascript widget and see if I can include the library as stated above. Will keep you posted,