[Resolved] [wpv-control-distance] move to location

[Author]

Posts

[pierre-yvesC]

Hi,

With a distance search on a map, when a user enters a location (so the user doesn't use it's own location):

Is there a way the map moves to the location?

Actually, if the map is centered somewhere, the user don't see the search result if the location is too far from the center.

Thx for your help.

Regards,

[Minesh]

Hello. Thank you for contacting the Toolset support.

I would like to know do you mean that - if user has searched for some location lets say for instance "London, Uk", then you want to set the map center as "London, UK" on the displayed map, having said that the map center should be the searched location address?

In addition to that - Could you please send me debug information that will help us to investigate your issue.
=> https://toolset.com/faq/provide-debug-information-faster-support/

[pierre-yvesC]

Hi Minesh,

Th for your reply.

”if user has searched for some location lets say for instance "London, Uk", then you want to set the map center as "London, UK" on the displayed map, having said that the map center should be the searched location address?”

You're absolutely right, that's what I'm trying to achieve.

My problem is if somebody, located in Canada, search for locations around London UK, he won't see the result except if he moves the map to UK.

Regards,

[Minesh]

You can add the following code to your view's custom JS box:

jQuery(document).ready(function($){
   
jQuery( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
 var mapid = 'map-2';
  var map = WPViews.view_addon_maps.get_map(mapid);
  var markers = WPViews.view_addon_maps.markers[mapid];
   
lat_long = jQuery("#map_center_cords").val().split(",");
   
   
  mylat = lat_long[0];
  mylong =lat_long[1];
 
  map.setZoom(7);
  map.setCenter(new google.maps.LatLng(mylat,mylong));
  
   
});
   
});

Where:
- Replace the "map-2" with your original map ID

Add the following shortcode to "Custom Code" section offered by Toolset:
=> https://toolset.com/documentation/programmer-reference/adding-custom-code/using-toolset-to-add-custom-code/#adding-custom-php-code-using-toolset

add_shortcode('get_lat_long','get_lat_long_based_on_address');
function get_lat_long_based_on_address($street_address='') {
        $street_address = $_GET['toolset_maps_distance_center'];
        $street_address = str_replace(" ", "+", $street_address); //google doesn't like spaces in urls, but who does?
       
       $api_key="your-map-api-key";
        $url = "<em><u>hidden link</u></em>"; 
        $google_api_response = wp_remote_get( $url );    
    
        $results = json_decode( $google_api_response['body'] ); //grab our results from Google
        $results = (array) $results; //cast them to an array
        $status = $results["status"]; //easily use our status
        $location_all_fields = (array) $results["results"][0];
        $location_geometry = (array) $location_all_fields["geometry"];
        $location_lat_long = (array) $location_geometry["location"];

     
        if( $status == 'OK'){
            $latitude = $location_lat_long["lat"];
            $longitude = $location_lat_long["lng"];
        }else{
            $latitude = '';
            $longitude = '';
        }
  
  		$return = "$latitude,$longitude";

           return $return;
    }

Where:
- Add your original google map API key with $api_key
- Register the shortcode "get_lat_long" (without quotes) at Toolset->Settings and click on the Front-end Content tab. Look for the section called Third-party shortcode arguments and register there.
=> https://toolset.com/documentation/legacy-features/views-plugin/shortcodes-within-shortcodes/

Then, outside your view's loop output add the following hidden field that will hold the shortcode value:

<input id="map_center_cords" value="[get_lat_long]" type="hidden" />

[pierre-yvesC]

Hi Minesh,

Many thx for this amazing solution! Guess yiu worked hard!

Unfortunately, it doesn't work with my theme and it forces the zoom to 7 to allow the user to see it.

I just thought about a simplier solution: center the map on the user location.

I'm just unable to find the shortcode to achieve this.

Thx again

[Minesh]

Can you please share problem URL where I can see the address search and admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

It seems you forget to share the problem URL where I can see the view on frontend.

Can you please share the problem URL.

[pierre-yvesC]

Hi, this is there: hidden link

[Minesh]

Can you please check now.

As shared with my previous reply, I've added the following code to "Custom Code" section:
=> hidden link

add_shortcode('get_lat_long','get_lat_long_based_on_address');
function get_lat_long_based_on_address($street_address='') {
        $street_address = $_GET['toolset_maps_distance_center'];
        $street_address = str_replace(" ", "+", $street_address); //google doesn't like spaces in urls, but who does?
        
       $api_key="your-google-map-api-key";
        $url = "<em><u>hidden link</u></em>"; 
        $google_api_response = wp_remote_get( $url );    
     
        $results = json_decode( $google_api_response['body'] ); //grab our results from Google
        $results = (array) $results; //cast them to an array
        $status = $results["status"]; //easily use our status
        $location_all_fields = (array) $results["results"][0];
        $location_geometry = (array) $location_all_fields["geometry"];
        $location_lat_long = (array) $location_geometry["location"];
 
      
        if( $status == 'OK'){
            $latitude = $location_lat_long["lat"];
            $longitude = $location_lat_long["lng"];
        }else{
            $latitude = '';
            $longitude = '';
        }
   
        $return = "$latitude,$longitude";
 
           return $return;
    }

Then, added the following code to your view's Loop section's JS editor:

jQuery(document).ready(function($){
    
jQuery( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
 var mapid = 'map-1';
  var map = WPViews.view_addon_maps.get_map(mapid);
  var markers = WPViews.view_addon_maps.markers[mapid];
    
lat_long = jQuery("#map_center_cords").val().split(",");
    
    
  mylat = lat_long[0];
  mylong =lat_long[1];
  
  map.setZoom(7);
  map.setCenter(new google.maps.LatLng(mylat,mylong));
   
    
});
    
});

I've also added the following line of code outside your view's loop area:

<input id="map_center_cords" value="[get_lat_long]" type="hidden" />

I've also corrected the map marker shortcode and adjusted the attribute marker_id as: marker_id='marker-[wpv-post-id]'

Can you please confirm it works as expected now.

[pierre-yvesC]

Hi Minesh,

Maybe I did something wrong, now the map centers at Lat 0; Long 0, the default map center.

I used your workaround https://toolset.com/forums/topic/wpv-control-distance-move-to-location/#post-2624793 and it does almost what is expected, except instead of moving the map, it zooms at 7 so the user can see the results far from the original map center. What I want to achieve is to centers the map to the search location (ex: London UK) OR center the map to the user location.

If it's not possible, just let me know.

Thx again for all!

[Minesh]

Do you mean when page is loaded you want to center the map to "London, UK", if yes:

I've adjusted the code added to "Custom Code" section as given under:

add_shortcode('get_lat_long','get_lat_long_based_on_address');
function get_lat_long_based_on_address($street_address='') {
  
  if(isset($_GET['toolset_maps_distance_center']) and $_GET['toolset_maps_distance_center']!='') {
    	$street_address = $_GET['toolset_maps_distance_center'];
  }else{
    $street_address = 'London, UK';
  }
        $street_address = str_replace(" ", "+", $street_address); //google doesn't like spaces in urls, but who does?
        
       $api_key="your-gmap-api-key";
        $url = "<em><u>hidden link</u></em>"; 
        $google_api_response = wp_remote_get( $url );    
     
        $results = json_decode( $google_api_response['body'] ); //grab our results from Google
        $results = (array) $results; //cast them to an array
        $status = $results["status"]; //easily use our status
        $location_all_fields = (array) $results["results"][0];
        $location_geometry = (array) $location_all_fields["geometry"];
        $location_lat_long = (array) $location_geometry["location"];
 
      
        if( $status == 'OK'){
            $latitude = $location_lat_long["lat"];
            $longitude = $location_lat_long["lng"];
          	$return = "$latitude,$longitude";
        }else{
            $latitude = '';
            $longitude = '';
          	$return = 0;
        }


 
           return $return;
    }

Now, when page loaded first time it displays the map center as "London, UK":
=> hidden link

[pierre-yvesC]

Hi Minesh,

London UK was just an example, I don't need customization to center the map to a specific location, this is already possible with the shortcode.

I would like to center the map on the user location by default.

Thx for your effort :o)

[Minesh]

I've adjusted the JS code added to your view's JS section as given under:
=> hidden link

function initGeolocation() {
        if( navigator.geolocation ) {
           // Call getCurrentPosition with success and failure callbacks
           navigator.geolocation.getCurrentPosition( success );
        } else {
           alert("Sorry, your browser does not support geolocation services.");
        }
}

function success(position) {
	document.getElementById('map_center_cords').value = position.coords.latitude+","+position.coords.longitude;
}


jQuery(document).ready(function($){
initGeolocation();
  
jQuery( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
 var mapid = 'map-1';
  var map = WPViews.view_addon_maps.get_map(mapid);
  var markers = WPViews.view_addon_maps.markers[mapid];
  
 

    
lat_long = jQuery("#map_center_cords").val().split(",");
  console.log(lat_long);
  
  
    
    
  mylat = lat_long[0];
  mylong =lat_long[1];
  
  map.setZoom(7);
  map.setCenter(new google.maps.LatLng(mylat,mylong));
   
    
});
    
});

Can you please confirm it's working as expected now.

[pierre-yvesC]

Gret solution, many thx!!!