Hello Meta Box Support Team,
I’m working with Meta Box to integrate an OpenStreetMap field (property_development_open_street_map) along with a separate address field. Here’s the functionality I’m trying to achieve:
Field Setup:
Address Field: Users can enter a full address in this field.
OpenStreetMap Field: This should display a marker that automatically points to the address entered in the address field.
Latitude and Longitude Fields: Separate fields (lat for latitude and lng for longitude) that should automatically populate with coordinates based on the OpenStreetMap marker location.
Desired Process:
When a user enters an address in the address field, the OpenStreetMap marker should automatically update to the location of the entered address.
After the marker updates, the latitude and longitude fields should also auto-populate with the correct coordinates based on the marker’s new location.
Current Approach:
I’ve attempted to use JavaScript to listen for changes to the marker’s position on the map and update the latitude and longitude fields accordingly, but this hasn’t produced the expected results.
Here’s the JavaScript code I’m currently using, which listens for the marker’s dragend event but does not achieve the address-to-marker functionality and automatic field updates as desired:
jQuery(document).ready(function($) {
const mapField = $('#property_development_open_street_map');
if (mapField.length) {
const mapInstance = mapField.data('map');
const marker = mapInstance && mapInstance.getMarker ? mapInstance.getMarker() : null;
if (mapInstance && marker) {
marker.on('dragend', function(event) {
const position = marker.getLatLng();
const latitude = position.lat;
const longitude = position.lng;
$('#lat').val(latitude).trigger('change');
$('#lng').val(longitude).trigger('change');
});
} else {
console.log("Map instance or marker not found. Please check Meta Box settings.");
}
} else {
console.log("Map field with ID 'property_development_open_street_map' not found.");
}
});
Would you be able to guide me on how to implement this address-based marker update, along with automatic population of the latitude and longitude fields?
Thank you very much for your assistance!