[Google Maps Mobile] Does the google maps mobile plugin support Google Drawing Layer Library?

[Google Maps Mobile] Does the google maps mobile plugin support Google Drawing Layer Library?

Forge Component
Published on 2017-07-21 by OutSystems Labs
8 votes
Published on 2017-07-21 by OutSystems Labs

Hi all,

Not conclusive enough while searching the internet but does the plugin support the Drawing Layer library or not?


I would like to be able to draw a circle to identify a radius around a center point on the map and the library seems to do the trick.




My solution for now.

Though the better option would be to include the library config in the plugin.


eSpace: GoogleMapsMobile


Action: GoogleMaps/Map/API_LoadGoogleAPI

Description: Activated the drawing library in the config in order to be able to use it.

// Ensure Libraries are loaded (but only once)
if(typeof google === 'undefined') {
        paths: {
            googlemaps: $parameters.GoogleMapsScriptURL ,
            async: $parameters.ASyncScriptURL
        googlemaps: {
            params: {
                key: $parameters.ApiKey,
                libraries: 'drawing'
    require(['googlemaps!'], apiInitializeFinish);
} else {

Script: OsGoogleMap.js

Function: Create

Description: Added the part in red which probably could also be added after the map has been created outside the plugin.

// Function that creates the maps
    this.create = function(mapId, containerId, zoom, center, mapOptions, callback) {
        var containerEl = document.getElementById(containerId);
        var mapOptionsRequired = {};
        if(typeof containerEl !== 'undefined'|| containerEl !== null){
            mapOptionsRequired = {};
            mapOptionsRequired = {zoom: parseInt(zoom) || 8};
            //If center exists add it to the map options
                mapOptionsRequired = {zoom: parseInt(zoom) || 8, center: center};
            var opts = gmapExtend({}, mapOptionsRequired, mapOptions);
            var map = new googleMaps.Map(containerEl, opts);
            var drawingManager = new googleMaps.drawing.DrawingManager({
                drawingMode: googleMaps.drawing.OverlayType.MARKER,
                drawingControl: true,
                drawingControlOptions: {
                  position: googleMaps.ControlPosition.TOP_CENTER,
                  drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
                markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
                circleOptions: {
                  fillColor: '#ffff00',
                  fillOpacity: 1,
                  strokeWeight: 5,
                  clickable: false,
                  editable: true,
                  zIndex: 1

            google.maps.event.addListenerOnce(map, 'idle', function(){
                if(typeof callback === 'function'){
            google.maps.event.addListener(map, 'bounds_changed', function() {
                google.maps.event.trigger(map, 'resize');
            return newMap(mapId, containerId, map);