[Resolved] Markers as waypoints showing path of a trip

[Author]

Posts

[tomasP]

Hello,
doing a web for a travel agency, they organize road trip vacations.
With Toolset Maps I am easily able to list all the waypoints in a map, but is it possible to show road connections between these markes? (as shown in the picture attached - blue line between markers).
Thanks in advance,
Tom

[Minesh]

Hello. Thank you for contacting the Toolset support.

To draw the path to map, you should try to add the following code to your view's JS box:

<jQuery(document).ready(function($){
function initMap() {
  var mapid = 'map-2';
  var map = WPViews.view_addon_maps.get_map(mapid);
  var markers = WPViews.view_addon_maps.markers[mapid];
  if(markers.length == 0)
    return;
  var tripCoordinates = [];
  var latLng;
  // loop over all the markers and create an array of lat lng objects
  for(var marker in markers){
    latLng = {
      'lat':markers[marker].position.lat(),
      'lng':markers[marker].position.lng()
    };
    tripCoordinates.push(latLng);
  }
  // create a new polyline using the coordinates array, and add it to the map
  var tripPath = new google.maps.Polyline({
    path: tripCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  tripPath.setMap(map);
} 
$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
initMap();
} );
   
} );

Where:
- Change "map-2" with your original map ID, and change the trippath attributes to style the line.
=> hidden link

[tomasP]

Cooooool! Thanks very much!

[Kristian Adolfsson]

Worked like a charm!!
BUT, how do I decide the order they are drawn in?