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
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:
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