I am trying to draw a route between two markers on primefaces gmap by adding a polyline. I make the polyline by creating an overlay then add a polyline on it this way in the managed bean :

       Polyline poly= new Polyline();
       LatLng coord = new LatLng(track.getLatitude(), track.getLongitude()); 
       coords.add(coord);   
       poly.setStrokeWeight(strokeWeight); 
       poly.setStrokeColor(strokeColor);
       poly.setStrokeOpacity(strokeOpacity); 
       myoverlay.addOverlay(poly);

at the JSF page i create the gmap this way

<p:gmap center="#{dashboardModel.midPoint.lat}, #{dashboardModel.midPoint.lng}" zoom="10" type="MAP"
                                style="width:auto;height:700px" model="#{dashboardModel.myoverlay}" >

How can i add arrows which shows the direction of the polyline?

I am trying to draw a route between two markers on primefaces gmap by adding a polyline. I make the polyline by creating an overlay then add a polyline on it this way in the managed bean :

       Polyline poly= new Polyline();
       LatLng coord = new LatLng(track.getLatitude(), track.getLongitude()); 
       coords.add(coord);   
       poly.setStrokeWeight(strokeWeight); 
       poly.setStrokeColor(strokeColor);
       poly.setStrokeOpacity(strokeOpacity); 
       myoverlay.addOverlay(poly);

at the JSF page i create the gmap this way

<p:gmap center="#{dashboardModel.midPoint.lat}, #{dashboardModel.midPoint.lng}" zoom="10" type="MAP"
                                style="width:auto;height:700px" model="#{dashboardModel.myoverlay}" >

How can i add arrows which shows the direction of the polyline?

• javascript
• java
• google-maps

Share Improve this question Follow edited Aug 30, 2015 at 17:10 Ihab Ramadan asked Aug 30, 2015 at 13:52 Ihab RamadanIhab Ramadan 1311 silver badge55 bronze badges 1

• 2 Post some code and a fiddle along with it. – EugenSunic Commented Aug 30, 2015 at 13:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Set a IconSequence via the polylineOptions of the DirectionsRenderer, e.g.:

  var directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions:{
      icons:[
              { icon: 
                {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                  scale:3,
                  fillOpacity:1
                },
                repeat:'50px'
              }
            ]
    }
  });

Demo:

function init() {
  var map               = new google.maps.Map(document.getElementById('map'), {
                            zoom: 7,
                            center: {lat: 0, lng: 0}
                          }),
      directionsService = new google.maps.DirectionsService,
      directionsDisplay = new google.maps.DirectionsRenderer({
                            map:map,
                            polylineOptions:{
                                icons:[
                                  { icon: 
                                    {
                                      path: google.maps.SymbolPath
                                              .FORWARD_CLOSED_ARROW,
                                      scale:  3,
                                      fillOpacity:  1
                                    },
                                    repeat:'50px'
                                  }
                                ]
                            }});
  

      directionsService.route({
        origin      : 'Berlin',
        destination : 'Paris',
        travelMode  : google.maps.TravelMode.DRIVING
        }, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            } 
            else {
              window.alert('Directions request failed due to ' + status);
            }
  });

}
google.maps.event.addDomListener(window,'load',init);

      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }

    <script src="https://maps.googleapis./maps/api/js?v=3"></script>
    <div id="map"></div>

documentation

example from the documentation

code snippet:

// This example adds a predefined symbol (an arrow) to a polyline.
// Setting offset to 100% places the arrow at the end of the line.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 20.291,
      lng: 153.027
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // [START region_polyline]
  // Define a symbol using a predefined path (an arrow)
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  };

  // Create the polyline and add the symbol via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{
      lat: 22.291,
      lng: 153.027
    }, {
      lat: 18.291,
      lng: 153.027
    }],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });
  // [END region_polyline]
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>