1219
Views
13
Comments
Solved
[Google Maps Web] Adding markers to a route map
Question
google-maps-web
Web icon
Forge asset by 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)

2020-10-08 19-51-35
João Barata
Staff
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,

Directions.oml
UserImage.jpg
Fidelis Omegbu

Please, proceed accordingly

2024-03-25 06-19-08
Harlin Setiadarma

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

2017-12-01 10-04-32
Tjaart Swanepoel

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


2024-03-25 06-19-08
Harlin Setiadarma

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)


2017-12-01 10-04-32
Tjaart Swanepoel

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.

2024-03-25 06-19-08
Harlin Setiadarma

Hi Tjaart,

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



2017-12-01 10-04-32
Tjaart Swanepoel

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}"
2020-07-21 19-28-50
Rajat Agrawal
Champion

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


2017-12-01 10-04-32
Tjaart Swanepoel

Hi Rajat,


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

2020-10-08 19-51-35
João Barata
Staff
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,

Directions.oml
2017-12-01 10-04-32
Tjaart Swanepoel

This worked as the box said, thanks João

UserImage.jpg
Kelvin Seow


Hi, 

I have origin address, destination address which i can set. In between got 3 more markers, i tried using waypoint which i input my ownself. Is there a way to retrieve the waypoint address from the database itself?

Screenshot location 1 is hardcoded..I wante to be able to get it from the DB itself. Its for mobile anyway thank you.


2021-09-17 19-04-45
Nikita Satpute

Hi I am new to using maps I want to achieve a simple functionality in which the user will type the adress and the same I want to show on map. how can I achieve this ? 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.