Hi Ozkan,
Here goes a solution to do what you want without changing the Google Maps Mobile Component.
Short answer:
- Don’t specify any directions in the map parameters. This will be added later;
- Add the markers for the origin and destination in the map parameters. Thus the markers can be set with your customized icons;
- Create action to handle the event that is thrown after the map is initialized;
- 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é