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

Forge Component
(17)
Published on 2 Oct (13 days ago) by Labs
17 votes
Published on 2 Oct (13 days ago) by Labs

Hi all,

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

https://developers.google.com/maps/documentation/javascript/drawinglayer

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.


Cheers,

Roeland

Solution

My solution for now.

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

(https://www.outsystems.com/forums/discussion/22609/idea-way-to-load-google-maps-libraries/)


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') {
    require.config({
        paths: {
            googlemaps: $parameters.GoogleMapsScriptURL ,
            async: $parameters.ASyncScriptURL
        },
        googlemaps: {
            params: {
                key: $parameters.ApiKey,
                libraries: 'drawing'
            }
        }
    });
    require(['googlemaps!'], apiInitializeFinish);
} else {
    $actions.InitMap();
}


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
            if(center){
                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
                }
            });
            drawingManager.setMap(map);

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


Result:

Solution

Is this solution also applicable for Maps Web?

Thank you

Technically I think it could also be applicable to the Maps Web component. As long as you can implement the above Javascript. But I must admit I haven't tried it, nor do I know the full capabilities of Outsystems 11 since we are not yet running this version.

But basically the javascript is based on the Maps API that apply to the forge components used in Outsystems

Cheers Roeland