Hi, I’m having some issues with Toolset Maps (using OpenStreetMap).
1 – Focus on user position
I’m using the maps-focus-map button to show the user’s current position. Unfortunately, it doesn’t work correctly: the marker is placed in the middle of nowhere (see shot1.jpg).
On the same page, I also have a View that loads a list of markers on the same map.
You can see the issue on this page:
lien caché lien caché
2 – Address field zoom
On this page I also have a form where the user can save either their current location or any other address in an Address field on the map. This part works, but when a position is selected, the map doesn’t zoom in to that location (see form1.jpg).
On mobile especially, this is not very user-friendly, since the user has to manually zoom in to check and refine their selection.
Is there a way to make the map automatically zoom to the selected position when it reloads?
Hello. Thank you for contacting the Toolset support.
Can you please check now:
- lien caché
I've added the code snippet namely "get-current-user-location" to "Custom Code" section offered by Toolset and added the following code to it.
=> lien caché
function get_user_location_by_ip() {
// Get user IP address
$ip = $_SERVER['REMOTE_ADDR'];
// Optional: handle proxies/load balancers
if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
$ip = $_SERVER['HTTP_CLIENT_IP'];
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ipList = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
$ip = trim($ipList[0]);
}
// API endpoint (no key needed)
$url = "<em><u>lien caché</u></em>{$ip}?fields=status,message,country,regionName,city,lat,lon,query";
// Initialize cURL
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
// Execute and decode response
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpCode !== 200 || !$response) {
return null;
}
$data = json_decode($response, true);
if (isset($data['status']) && $data['status'] === 'success') {
return array(
'ip' => $data['query'],
'country' => $data['country'],
'region' => $data['regionName'],
'city' => $data['city'],
'latitude' => $data['lat'],
'longitude' => $data['lon'],
);
}
return null;
}
function func_get_location_by_ip_shortcode($atts) {
// Default attribute
$atts = shortcode_atts(array(
'attribute' => ''
), $atts, 'get-location');
$location = get_user_location_by_ip();
if (empty($location)) return '';
$attribute = strtolower($atts['attribute']);
switch ($attribute) {
case 'lat':
return esc_html($location['latitude']);
case 'lon':
return esc_html($location['longitude']);
case 'city':
return esc_html($location['city']);
case 'region':
return esc_html($location['region']);
case 'country':
return esc_html($location['country']);
case 'ip':
return esc_html($ip);
default:
return ''; // Unknown attribute
}
}
add_shortcode('get-location', 'func_get_location_by_ip_shortcode');
We are using function get_user_location_by_ip() to get the current user location based on the current user IP and use the custom shortcode [get-location] to get the lat and lon associagted to current user location address.
On your page - I've modified the marker code as given under:
I tested on my laptop, and the marker is placed about 600 km away from my actual location. This might be related to my current IP.
I also tested on my mobile phone with GPS and location permissions enabled in Chrome, and the marker is still placed in the same incorrect location.
Additionally, I reset the location permission in Chrome (as a test), but now the website no longer prompts me to grant permission to use the GPS location.
I've adjusted the code added to the page as given under:
=>lien caché
[wpv-geolocation message_when_missing="We need your location to show this content"]
[wpv-map-render map_id="map-20" map_height="300px" single_zoom="16" map_type="satellite" map_type_control="off" street_view_control="off"][/wpv-map-render]
[wpv-map-marker map_id='map-20' marker_id='marker-user-focus' marker_title='Tu posición'
lat="[get-location attribute='lat']" lon="[get-location attribute='lon']" marker_icon='//stopvertidosilegales.org/wp-content/uploads/user-position.png' ]Tu posición[/wpv-map-marker]
[/wpv-geolocation]
I've also adjsuted the code snippet namely "get-current-user-location" that is added to "Custom Code" section offered by Toolset as given under.
=> lien caché
function func_get_location_by_ip_shortcode($atts) {
// Default attribute
$atts = shortcode_atts(array(
'attribute' => ''
), $atts, 'get-location');
if(isset($_COOKIE['toolset_maps_location']) and $_COOKIE['toolset_maps_location']!=''){
$location = explode(",",$_COOKIE['toolset_maps_location']);
}
if (empty($location)) return '';
$attribute = strtolower($atts['attribute']);
switch ($attribute) {
case 'lat':
return esc_html($location[0]);
case 'lon':
return esc_html($location[1]);
default:
return ''; // Unknown attribute
}
}
add_shortcode('get-location', 'func_get_location_by_ip_shortcode');
Hi Minesh, It works fine on my laptop, but not on my mobile. Instead of the map, it shows the message “We need your location to show this content” (see screenshot screen0).
Also, it doesn’t automatically prompt for location permissions. The permission request only appears when I click “Use my location” in the form map.
In addition, I sometimes run into issues with the CSS not loading properly (see screenshots screen1 and screen2).
