Multiple locations on the map in a listing

I create my own JS function called “calcRouteWithWaypoints” that can be added to map.js. It is basically the same as the calcRoute function except that I added the waypts variable which is then included in the request variable. In the “gdMyGeoGetDirections” function in map.js, I call calcRouteWithWaypoints instead of calcRoute. I see that there is a “_fromAddress” ID. How or where do I create a “_waypoints” ID? If I can do that, I will use code snippet to assign new custom field variables (that a user can input) to the waypoints ID. ******************************************************************************************************
function calcRouteWithWaypoints(map_canvas) {
initMap(map_canvas);
var optionsname = map_canvas;
var map_options = eval(optionsname);

if (window.gdMaps == ‘google’) {
// Direction map
directionsDisplay.setMap(jQuery.goMap.map);
directionsDisplay.setPanel(document.getElementById(map_canvas + “_directionsPanel”));
google.maps.event.addListener(directionsDisplay, ‘directions_changed’, function() {
computeTotalDistance(directionsDisplay.directions, map_canvas);
});
jQuery(‘#directions-options’).show();
var waypts = [];
var checkboxArray = document.getElementById(map_canvas + ‘_waypoints’);
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected) {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
}

var from_address = document.getElementById(map_canvas + ‘_fromAddress’).value;
var request = {
origin: from_address,
destination: gd_single_marker_lat + ‘,’ + gd_single_marker_lon,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: gdGetTravelMode(),
unitSystem: gdGetTravelUnits()
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
//map = new google.maps.Map(document.getElementById(map_canvas), map_options);
//directionsDisplay.setMap(map);
} else {
alert(geodir_all_js_msg.address_not_found_on_map_msg + from_address);
}
});
}
}
****************************************************************************************************

Thank you for your help.

I am not sure if I understand correctly but here is what I did.
I added a code snippet to add the JS function.

function add_js_functions(){
?>
<script>
function calcRouteWithWaypoints(map_canvas){
    initMap(map_canvas);
    var optionsname = map_canvas;
    var map_options = eval(optionsname);

if (window.gdMaps == 'google'){
        // Direction map
        directionsDisplay.setMap(jQuery.goMap.map);
        directionsDisplay.setPanel(document.getElementById(map_canvas + "_directionsPanel"));
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
            computeTotalDistance(directionsDisplay.directions, map_canvas);
        });
        jQuery('#directions-options').show();
        var waypts = [];
        var checkboxArray = document.getElementById(map_canvas+'_waypoints');
        for (var i = 0; i < checkboxArray.length; i++) {
          if (checkboxArray.options[i].selected) {
            waypts.push({
              location: checkboxArray[i].value,
              stopover: true
            });
          }
        }

		var from_address = document.getElementById(map_canvas + '_fromAddress').value;
        var request = {
            origin: from_address,
            destination: gd_single_marker_lat + ',' + gd_single_marker_lon,
            waypoints: waypts,
	     	optimizeWaypoints: true,
	     	travelMode: gdGetTravelMode(),
            unitSystem: gdGetTravelUnits()
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                //map = new google.maps.Map(document.getElementById(map_canvas), map_options);
                //directionsDisplay.setMap(map);
            } else {
                alert(geodir_all_js_msg.address_not_found_on_map_msg + from_address);
            }
        });
    }
}
</script>
<?php
}
add_action('wp_footer','add_js_functions');
'

and then I added another code snippet to assign waypoint1 (the html variable of a field I created for user to enter their first stopover) to the Jquery variable #detail_page_map_canvas_waypoints by PHP.

add_action(‘wp_footer’,’_my_map_route2′);
function _my_map_route2(){
if(geodir_is_page(‘detail’) || geodir_is_page(‘preview’)){
global $post;
if(isset($post->geodir_waypoint1) && $post->geodir_waypoint1 && $post->post_type==’gd_place’){
?>
<script>
jQuery(function() {

if(jQuery(‘#detail_page_map_canvas_waypoints’).length){
jQuery(‘#detail_page_map_canvas_waypoints’).val(‘<?php echo esc_html($post->geodir_waypoint1);?>’);
jQuery(‘#directions’).trigger(‘click’);
}

jQuery(‘.geodir-tab-head a[data-tab=”#post_map”]’).click(function(){
jQuery(‘#directions’).trigger(‘click’);
});

});
</script>
<?php
}
}
}’

Hope you can point out my mistakes.

ok thank you. I will try it. Another question is I don’t see where I am calling my JS function calcRouteWithWaypoints. How do I call that function?

Hi Stiofan, sorry I don’t really understand. Can you give a bit more detail about that? With more details or clearer explanation, I can google and try to implement the code.

Also, was it correct that I used one code snippet to add the JS function that calculates and displays the route and then used another code snippet to assign my html variable of the custom field to the variable called detail_page_map_canvas_waypoints?

Thanks for your patience.

I just got some progress.
Below you will find my complete code snippet that I added through the plugin code snippets. Using this code, I can get the desired route (origin-1 waypoint-destination) displayed SOMETIMES. It does not always work but if you refresh the page a few times, you will see the desired route sometimes. For instance, if you refresh the page 10 times, you see the desired route (origin-1 waypoint-destination) maybe 3 times. In the other 7 times, you only see the direct route between the origin and the destination. I think the code is not stable. Also, in the code, you see I declare a variable with ID=’detail_page_map_canvas_waypoints’. Without this declaration, the code will not work at all, as in no route is shown. Also, in the code, you find me adding a line that says

			  jQuery( '#directions' ).click(function(){ 
				calcRouteWithWaypoints('detail_page_map_canvas');
			  });

Without this line, only the route between the origin and the destination is displayed, regardless of how many times I refresh the page.
Hope you can help. I think I am getting close.

function add_js_functions(){

  if(geodir_is_page('detail') || geodir_is_page('preview')){
 global $post;
		if(isset($post->geodir_waypoint1) && $post->geodir_waypoint1 && $post->post_type=='gd_place'){
			?>

			  <p id="detail_page_map_canvas_waypoints"></p>
			  <script>
			  
			  function calcRouteWithWaypoints(map_canvas){
			  initMap(map_canvas);
			  var optionsname = map_canvas;
			  var map_options = eval(optionsname);

			  if (window.gdMaps == 'google'){
				// Direction map
				directionsDisplay.setMap(jQuery.goMap.map);
				directionsDisplay.setPanel(document.getElementById(map_canvas + "_directionsPanel"));
				google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
				  computeTotalDistance(directionsDisplay.directions, map_canvas);
				});
				jQuery('#directions-options').show();
				//	  var waypts = [];
				//	  var checkboxArray = document.getElementById(map_canvas+'_waypoints');
				//	  for (var i = 0; i < checkboxArray.length; i++) {
				//		if (checkboxArray.options[i].selected) {
				//		  waypts.push({
				//location: google.maps.DirectionsWaypoint[checkboxArray[i].value],
				//			location: checkboxArray[i].value,
				//			stopover: true
				//		  });
				//		}
				//	  }
				var waypts = [{location: document.getElementById(map_canvas+'_waypoints').value}];
				var from_address = document.getElementById(map_canvas + '_fromAddress').value;
				var request = {
				  origin: from_address,
				  destination: gd_single_marker_lat + ',' + gd_single_marker_lon,
				  waypoints: waypts,
				  optimizeWaypoints: true,
				  travelMode: gdGetTravelMode(),
				  unitSystem: gdGetTravelUnits()
				};
				directionsService.route(request, function(response, status) {
				  if (status == google.maps.DirectionsStatus.OK)
				  {
					directionsDisplay.setDirections(response);
					//map = new google.maps.Map(document.getElementById(map_canvas), map_options);
					//directionsDisplay.setMap(map);
				  } else {
					alert(geodir_all_js_msg.address_not_found_on_map_msg + from_address);
				  }
				});
			  }
			}
  
   
		  jQuery(function() {

			if(jQuery('#detail_page_map_canvas_fromAddress').length){
			  jQuery('#detail_page_map_canvas_fromAddress').val('<?php echo esc_html($post->geodir_startpoint);?>');
			  if(jQuery('#detail_page_map_canvas_waypoints').length){
				jQuery('#detail_page_map_canvas_waypoints').val('<?php echo esc_html($post->geodir_waypoint1);?>');}

			  jQuery( '#directions' ).click(function(){ 
				calcRouteWithWaypoints('detail_page_map_canvas');
			  });
			  jQuery('#directions').trigger('click');
			}

			jQuery('.geodir-tab-head a[data-tab="#post_map"]').click(function(){
			  calcRouteWithWaypoints('detail_page_map_canvas');
			});
			jQuery('.geodir-tab-head a[data-tab="#post_map"]').click(function(){
			  jQuery('#directions').trigger('click');
			});

		  });
		  
	</script>
<?php	  
  
  
  		}
  	}
  }
add_action('wp_footer','add_js_functions');