[Google Maps Mobile] Outsystems Mobile Google Maps capabilities

[Google Maps Mobile] Outsystems Mobile Google Maps capabilities

  
Forge Component
(6)
Published on 21 Jul by OutSystems Labs
6 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 


Hugo wrote:

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 


Where do I select the event as input parameter?


Hi,

Can you be a little bit more specific? 

You need to use the 'Event' object parameter inside the 'AddMarkerByMapClick' -> 'GetEventCoordinates' JS Node.


Thanks,

Hugo

Hi Amos,

Just to say that you have an alternative, like uber does, you always have the pin and you just drag the map around it. If it works for you, give a look on this component.

Hope it helps.

Cheers,

Henrique

I've just followed this process and would like to thank Hugo for the excellent walk-through.

There is one additional item I'd like to mention.

In the AddMarkerByMapClick Action, in the JS Widget named GetEventCoordinates, there is an Input Parameter named Event.  I needed to set this to Event.


And I'd like to make one point of clarification for new OS developers and new developers in general.  Stuart asked the question... "Where do I select the event as input parameter?"  I'm not sure which Event Input Parameter he meant, because Event is set up as an Input parameter in 2 places.  One in the GetEventCoordinates JS Widget, and another in the AddMarkerByMapClick Action.  They are the same parameter because the Javascript Object flows from one to the other.  

The AddMarkerByMapClick Action gets it's Event parameter from the AddMapClick JS Widget in the MapInitialized Action... from this like of code... 

map.addListener('click',function(e) {$actions.AddMarkerByMapClick(e);});

e is the Javascript Object... the Event... passed into the AddMarkerByMapClick Action.

Then, in turn, this same Event is passed into the GetEventCoordinates JS Widget.

Thanks again,

David