[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
(5)
Published on 21 Jul (4 weeks ago) by OutSystems Labs
5 votes
Published on 21 Jul (4 weeks ago) by OutSystems 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