[Resolved] Drawing flight path on maps

[Author]

Posts

[lesT]

You have previously provided PHP code snippet to draw a line between markers, which I found works very well

I have attempted to modify it with a couple of statements, the purpose being to only connect the first marker found to the last marker found. I'd really appreciate it if you could take a quick look and see what I'm doing wrong in the code
===========
jQuery(document).ready(function($){
function initMap() {
var mapid ='map-8';
var map = WPViews.view_addon_maps.get_map(mapid);
var markers = WPViews.view_addon_maps.markers[mapid];
if(markers.length == 0)
return;
var $i = 0; //added 2 lines
var $x = markers.length;
var tripCoordinates = [];
var latLng;
// loop over all the markers and create an array of lat lng objects
for(var marker in markers){
// added test
if ($i == 0 || $i == x ) {latLng = {
'lat':markers[marker].position.lat(),
'lng':markers[marker].position.lng()
};
$i=$i +1}; //added
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();
} );
} );
//added 4 lines only

[Nigel]

Do you have a link to where you were initially provided this code?

It would help to see the original code, and I may assign this to the same supporter.

Providing such custom code is outside the normal scope of support.

[lesT]

Hi Nigel,
Thanks for the reply
I understand this is normally outside the scope of support, however, I'm just starting out with toolset and this will help me get familiar with the capabilities
The original article is #916035, by Christian Cox
Hopefully this is the link you need: https://toolset.com/forums/topic/add-lines-connecting-markers-in-a-google-map/#post-916035
I would really appreciate anything you can do to help
=====
I added two statements near the top:
var $i = 0;
var $x = markers.length;

// and I added a test to limit output of lat/lon to one line (between the first and last marker)
if ($i == 0 || $i == x ) {latLng = { <<<---- added test
'lat':markers[marker].position.lat(),
'lng':markers[marker].position.lng()
};
$i=$i +1}; <<<--- added

[Minesh]

I can see that you are using the wrong code. As this is a Javascript code, you should define the variables i and x without $ sign.

Can you please try to use the following code and I hope that will help you to resolve your issue.

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;

var i = 0;
var x = markers.length;

  // loop over all the markers and create an array of lat lng objects
  for(var marker in markers){
if (i == 0 || i == x ) {
    latLng = {
      'lat':markers[marker].position.lat(),
      'lng':markers[marker].position.lng()
    };
   tripCoordinates.push(latLng);
}
 i= i +1;
  }
  // 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();
} );

} );

[lesT]

#1541551
Thank you, I believe it works after your changes
However I have to manually enter a hard value for markers.length because markers.length returns "undefined"
Is that possible?
Also thanks for your help, sorry I took so long to get back to you

[Minesh]

However I have to manually enter a hard value for markers.length because markers.length returns "undefined"
==>
As this is a custom code and I do not know yet how you added the view or plot the markers on the map, if it shows "undefined" once I check the things on your install I can guide you in the right direction or you can for now if its easy for you, you can change it manually.

otherwise,
send me a problem URL where you added the map as well as access details.