[Resolved] How to use [toolset-maps-distance-value] shortcode

[Author]

Posts

[ericE-4]

My post has 2 map address fields. I'd like to plot both locations on a map and display the distance between the two locations. I am able to place the 2 map markers on the map, but the [toolset-maps-distance-value] doesn't seem to work.

The slugs of the 2 address fields are: wpcf-map-coordinates and wpcf-travel-destination-coordinates

The code I'm using is:

[wpv-map-render map_id="travel-map" map_height="400" general_zoom="9" scrollwheel="off" map_type="terrain" street_view_control="off"]Loading map...[/wpv-map-render]
[wpv-map-marker map_id="travel-map" marker_id="lodge-marker" marker_field="wpcf-map-coordinates" marker_icon="/wp-content/uploads/map-marker.svg"]<b>Lodge location</b>[/wpv-map-marker]
[wpv-map-marker map_id='travel-map' marker_id='destination-marker' marker_field='wpcf-travel-destination-coordinates' marker_icon="/wp-content/uploads/mkr_green.png"]<b>Your travel destination</b><br>You arrange travel to here, the lodge will arrange all further travel from here.[/wpv-map-marker]
[toolset-maps-distance-value location='wpcf-travel-destination-coordinates' postmeta='wpcf-map-coordinates']

Am I using the shortcode properly? If so, where should the distance value be ddisplayed?

[ericE-4]

One more thing to mention...for one of the map address fields (wpcf-map-coordinates) I'm actually using lat/long and not an address. So this will solve the issue about setting default zoom level.

[ericE-4]

...except that I need to be able to extract the lat and long separately to use the general_center_lat and general_center_long parameters. Can this be done?

[Waqar]

Hi Eric,

Thank you for waiting.

As discusses earlier, the "toolset-maps-distance-value" shortcode ( ref: https://toolset.com/documentation/user-guides/maps-shortcodes/#toolset-maps-distance-value ), expects the "location" attribute value to be either an address or latitude/longitude pair.

This means that passing on a location field's slug won't work, but we can use that field's value in the shortcode, indirectly, through Toolset Types Fields API:
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/#address )

<code

[toolset-maps-distance-value location='[types field="travel-destination-coordinates"][/types]' postmeta='wpcf-map-coordinates']

[/php]

If you're already using the latitude and longitude values in the "wpcf-map-coordinates" field, they must be stored separated by a comma.

You can extract the latitude and longitude separately using a custom shortcode like this:

add_shortcode( 'get_lat_lon_value', 'get_lat_lon_value_func');
function get_lat_lon_value_func( $atts ) {
	$atts = shortcode_atts( array(
		'value' => '', 
	), $atts );

	$field_value = types_render_field("map-coordinates", array());

	if(!empty($field_value)) {
		$field_value_arr = explode(",", $field_value);

		if ($atts['value'] == 'lat') {
			return trim($field_value_arr[0]);
		}
		elseif ($atts['value'] == 'lon') {
			return trim($field_value_arr[1]);
		}
	}	
}

You can add this in your active theme's "functions.php" file and then add "get_lat_lon_value" in the "Third-party shortcode arguments" section, at WP Admin -> Toolset -> Settings -> Front-end Content.

To get the latitude and longitude values, you can use the shortcode as:

latitude:
[get_lat_lon_value value="lat"]

longitude:
[get_lat_lon_value value="lon"]

This way you can use these values in your map's shortcode "wpv-map-render".
( ref: https://toolset.com/documentation/user-guides/maps-shortcodes/#wpv-map-render )

Example:

[wpv-map-render map_id="map-ID" fitbounds="off" general_center_lat="[get_lat_lon_value value='lat']" general_center_lon="[get_lat_lon_value value='lon']" general_zoom="5"][/wpv-map-render]

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[ericE-4]

Hi Waqar,

The code you provided did not work, as it returned values that included the curly brackets. I managed to revise the code to trim the brackets and return only lat/long numbers:

add_shortcode( 'get_lat_lon_value', 'get_lat_lon_value_func');
function get_lat_lon_value_func( $atts ) {
    $atts = shortcode_atts( array(
        'value' => '', 
    ), $atts );
 
    $field_value = types_render_field("travel-destination-coordinates", array());
 
    if(!empty($field_value)) {
        $field_value_arr = explode(",", $field_value);
 
        if ($atts['value'] == 'lat') {
            return substr(trim($field_value_arr[0]),1);
        }
        elseif ($atts['value'] == 'lon') {
            return substr(trim($field_value_arr[1]),0,strlen(trim($field_value_arr[1]))-1);
        }
    }   
}

However, it still does not work. The map in blank, and the console shows an error "InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number" even though if I inspect the code that is rendered, the lat/long values appear to be intact. See attached image. This is the URL where the screen capture was taken: hidden link

[Waqar]

Hi Eric,

Thank you for sharing the update and glad that you were able to adjust the custom shortcode, as per the saved data's format.

I noticed the issue with the map on the post "Alaska Trophy Adventures Lodge" ( hidden link ), but it is working as expected on the other post "Aylmer Lake Lodge" ( hidden link ).

This confirms that the custom shortcode that you're using is doing its job. During my initial investigation, I couldn't find any difference between these two posts, that could lead to this issue. For deeper troubleshooting, I'll need a clone/snapshot of your website, so that I can troubleshoot this on my own server, without affecting your live website.
( ref: https://toolset.com/faq/provide-supporters-copy-site/ )

I've set your next reply as private.

regards,
Waqar

[Waqar]

Hi Eric,

Thank you for sharing the duplicator package.

I was able to successfully deploy it on my server and now investigating the map's issue.

Will share my findings, as soon as this troubleshooting completes.

Thank you for your patience.

regards,
Waqar

[Waqar]

Hi Eric,

Thank you for waiting and I apologize for the delay.

During troubleshooting, I discovered that the Google Map expects the Lat and Lon as a "float" values, and there should be any trailing "0".

The post "Alaska Trophy Adventures Lodge" is not showing the map, because, in the "travel-destination-coordinates" field, latitude value includes a trailing "0" ( 58.676930 ).

To avoid this you can update your custom shortcode "get_lat_lon_value" to always return float values, by including "(float)" before them:

return (float)substr(trim($field_value_arr[0]),1);
......

return (float)substr(trim($field_value_arr[1]),0,strlen(trim($field_value_arr[1]))-1);

I hope this helps and please let me know how it goes.

regards,
Waqar

[ericE-4]

Hi Waqar...that fixed it.

My issue is resolved now. Thank you!