[Google Maps Mobile] Change route color and marker on google map direction

[Google Maps Mobile] Change route color and marker on google map direction

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

Hi,

How can I change route color and marker on direction.




Hi Ozkan,

One thing you can do (don't know if it's the best option) is to alter the GoogleMaps Mobile component.

In that case, you open the GoogleMaps Mobile module, go to script SOGoogleMap (in Interface>Scripts) and alter line 409 to have this:

newRenderer = new googleMaps.DirectionsRenderer({
              polylineOptions: {
                strokeColor: "red"
              }, suppressMarkers: true
            });

This will change the color of the line to red and will suppress the markers of origin and destination.

Then you will have to add the markers for origin and destination in a list that you will pass as argument to the map (in the Markers input parameter). In those markers you can specify the icon that you want.

One thing you should keep in mind, is that if the component GoogleMaps Mobile is updated, you will have to do the changes again.

Cheers,

José

Hi.

I would say that changing the component is not the best approach (actually it's never a good approach to change a component).

You should create instead a javascript function to implement the logic that José mentioned because that's exactly the property that you need to define to that.

Take a look at this example, that will help you for sure.

Gonçalo,

You're right of course.

Cheers,

José

Gonçalo,

I agree with you. Can you give an example to use this code as function.

Thank you.

polylineOptions: {
                strokeColor: "red"
              }, suppressMarkers: true



Solution

Hi Ozkan,

Here goes a solution to do what you want without changing the Google Maps Mobile Component.

Short answer:

  1. Don’t specify any directions in the map parameters. This will be added later;
  2. Add the markers for the origin and destination in the map parameters. Thus the markers can be set with your customized icons;
  3. Create action to handle the event that is thrown after the map is initialized;
  4. In the action handler execute javascript that will add the directions for the map. This javascript will add the directions and you can specify the color of the route and that you do not want any markers (and thus you can later on add them with a custom image).

Long answer:

I think that steps 1 and 2 don’t need more detail. The rest, do as follows.

Create action to handle the MapInitialized event:

This action will receive as parameter the MapId, thus allowing us later to get the map object in javascript:

Add a Javascript statement to the MapMapInitialized action:

Open the Javascript statement and add the following parameters to the MapMapInitialized action. With this parameters you can set the Origin, Destination, Color and if you want or not the Markers for Origin and Destination:

In the javascript code, paste the following code. This will create a route in the map with the color that you specify and allowing for the markers to be suppressed:

var map = osGoogleMap.getMap($parameters.MapId).gMap;
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
    // see more options here: https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions
    map: map,
    polylineOptions: {
        strokeColor: $parameters.Color
    },
    // if you want your own markers (with different image) this should be true
    suppressMarkers: $parameters.SuppressMarkers
});

// get route
directionsService.route({
    origin: $parameters.Origin,
    destination: $parameters.Destination,
    travelMode: google.maps.TravelMode.DRIVING
    // see more attributes at https://developers.google.com/maps/documentation/javascript/directions
    
}, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    } else {
        //window.alert('Directions request failed due to ' + status);
    }
});

Test the javascript with this parameters:

See if that works for you.

Cheers,

José


Solution