[Google Maps Mobile] Outsystems Mobile Google Maps capabilities

[Google Maps Mobile] Outsystems Mobile Google Maps capabilities

  
Forge Component
(5)
Published on 21 Jul by OutSystems Labs
5 votes
Published on 21 Jul by OutSystems Labs

Hello,


Is it possible to add map markers by pressing the map? I can't seem to find the addMarker function like with the web version of Google Maps? Also, are there any tutorials for implementing the mobile version of Google Maps in Outsystems yet? Thanks for your help.

Hi Amos,

Currently we don't support map events to be used "out of the box", however you can still use them, let me show you how in the following example.

Example Widget Tree

Marker - record of type MapMarker

MarkerList - list of MapMarker

AddMarkerByMapClick - handler for Map clicks

MapInitialized - handler for MapInitialized event.


Let's start by adding mapinitialized event

On the Google Map block add the handler for "MapInitialized" event as shown in this image.

This action will have the following logic

Add a JS node with the mapid as an input parameter and add the following code:

var map = osGoogleMap.OSMaps[ $parameters.mapId ].gMap; //Get Map Instance
map.addListener('click',function(e) {$actions.AddMarkerByMapClick(e);}); //Add event and Handler to Map

This will ensure that when the map is initialized and everything is loaded correctly the click listener is added.


Now lets focus on the click handler and adding new markers:

 - The AddMarkerByMapClick handler action will have the following look


 This action will have a input parameter called "Event" of type object that will have the javascript event object.

Start by adding a JS node again with one input parameter of type object and two outputs of type decimal.

Inside the JS node add the following code:

var ev = $parameters.Event; //Get javascript event object
$parameters.Lat = ev.latLng.lat(); //Get latitude from object
$parameters.Lng =  ev.latLng.lng(); //Get longitude from object


This snippet of code will give you the coordinates of the event target on which you want to add a marker.


Finally it's just a matter of creating a new marker record and appending it to the marker list. 


Don't forget to pass the marker list to the map object using the "Markers" input parameter.

And that is it!


Thanks,

Hugo Pires