Add lines connecting Markers in a Google Map

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to draw a line connecting multiple Markers on a Google Map.

Solution: Add custom JavaScript to Layouts CSS & JS, or to a View's Search and Pagination JS panel:

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();
} );  
} );

Relevant Documentation:
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic is split from https://toolset.com/forums/topic/the-installation-is-stopped-to-configuring-the-site/

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Framework Installer plugin, Toolset Maps, Views plugin

This topic contains 6 replies, has 3 voices.

Last updated by Gavin 6 years, 5 months ago.

Assisted by: Christian Cox.

Author

Posts

June 20, 2018 at 7:10 pm #916020

Leonardo

Hello,
how are you? do you have news about my issue?
how can I mark out on google map an itinerary of my Travel Destinations?
For example for Travel destination A I have 4 address to visit , I understood how I can add 4 marker but I don't know how I can mark out the line between them
Regards
Leonardo

June 20, 2018 at 8:00 pm #916035

Christian Cox

Hello, the Views and Maps integration does not currently offer a way to draw lines connecting each Marker. You can use custom JavaScript to do this.

- Edit - updated code to add the correct event listeners -

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();
} );
  
} );

Change map-2 to match your map ID, and change the tripPath attributes to style the line.
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

June 22, 2018 at 7:37 am #916494

Leonardo

Hi Christian,
where Can I add your JavaScript?
regards
leonardo

June 22, 2018 at 6:09 pm #916771

Leonardo

Do I have to copy it in :
CSS di Layouts ed editor JS ?

June 22, 2018 at 8:25 pm #916814

Leonardo

It doesn't work inCSS di Layouts ed editor JS
I changed the id map, but It doesn't work
regards

June 24, 2018 at 1:04 pm #917079

Christian Cox

Okay try this version in Layouts CSS & JS:

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();
} );
 
} );

If this does not work I'll need to take a closer look. I will activate private reply fields here so you can supply login credentials.

August 7, 2019 at 10:20 am #1311153

Gavin

Hi Christian

Please would it be possible to adapt this javascript to create a polygon based on a repeating field group of lat/long stored with the custom post type?

For example, I have the need to add post-types to a map, some of which are single point markers, and some of which are areas (shaded polygons). I have the lats and longs of the shaded areas.

Many Thanks

Gavin