[Google Maps] Adding markers to a route map

[Google Maps] Adding markers to a route map

  
Forge Component
(19)
Published on 2017-04-24 by OutSystems Labs
19 votes
Published on 2017-04-24 by OutSystems Labs

Hi there,

I am trying to add a marker to a route map by clicking on the map, I am able to do this with the normal "Mainflow\Map" widget, but I need to be able to integrate with a route map (thanks to Harlin Setiadarma)

Please, proceed accordingly

You can accomplish the same routing feature using regular Map widget.

In the map widget there is a route property that accept a list variable.

I'm not on laptop right now, so I cannot elaborate more...

Harlin Setiadarma wrote:

You can accomplish the same routing feature using regular Map widget.

In the map widget there is a route property that accept a list variable.

I'm not on laptop right now, so I cannot elaborate more...

Hi Harlin,

I can't seem to find the above mentioned property.  Does the list variable accept coordinates as well? I found that I lose accuracy when working with addresses.  I am basically opening my screen with no markers and want to add the first marker, be able to move it to where I want it, save the location/address, the marker is now not movable.  Creating a second marker will show the marker without the route, saving the marker's location will result in the route being created from point 1 to point 2.  The same would count for the 3rd marker, saving the location would create another part of the route.

Your help will GREATLY be appreciated


Sorry my mistake, it was there for Google Maps Mobile, not web...

It's called Directions, but I don't think it support more than 2 waypoints.


On Google Maps Web, there's also Directions action in Logic tab, but only support 2 waypoints (Origin to Destination)


Hi Harlin,


I managed to figure out how to do the route.  I looked at the Route Map Preparation and found my answer.

I found however that the address directions tend to lose accuracy, especially on roads with no street numbers.  The nature of the Application that I am working on depends on high accuracy to keep the marker on the clicked location.  I am currently struggling with this, any assistance would be appreciated.

Hi Tjaart,

If AddAddressDirectionsToMap worked in Route Map, maybe you should try AddCoordinateDirectionsToMap.



Hi Harlin,

The creation of the JSON list is the thing that I am struggling with

How would the string look?  I am trying the following;

SyntaxEditor Code Snippet

"{location: {
    lat : " + Utils_WrapJSString(WaypointList.Current.Latitude) + "
    lng : " + Utils_WrapJSString(WaypointList.Current.Longitude) + "
    },
, stopover:true}"

Tjaart Swanepoel wrote:

Hi Harlin,

The creation of the JSON list is the thing that I am struggling with

How would the string look?  I am trying the following;

SyntaxEditor Code Snippet

"{location: {
    lat : " + Utils_WrapJSString(WaypointList.Current.Latitude) + "
    lng : " + Utils_WrapJSString(WaypointList.Current.Longitude) + "
    },
, stopover:true}"

Hi Tjaart,

Where r u putting this json list. 


Regards,

Rajat Agrawal


Hi Rajat,


The json list goes into the "AddCoordinateDirectionsToMap" Directions Request Options option.

Solution

Hi Tjaart,

You should be able to add directions using coordinates by using the AddCoordinateDirectionsToMap action available in the GoogleMaps component.


In order to add waypoints to those directions using coordinates as well, you can use the DirectionsRequestOptions input of the AddCoordinateDirectionsToMap with the following JSON


Example:

"{waypoints:[{location: new google.maps.LatLng("+41.580057+", "+-83.680850+"), stopover:true },{location: new google.maps.LatLng("+41.082538+", "+-85.138943+"), stopover:true }]}"

You should be able to add more or fewer waypoints by adding or removing entries on the waypoints JSON array.


I've attached an example that should help you with this implementation.

Best Regards,

Solution

This worked as the box said, thanks João