المشكلة في هذا الكود حسب تصفحي إياه هو أنه لا يقوم بجلب اسم الموقع المحدد على الخريطة وبدلا من ذلك يقوم فقط بجلب خطوط الطول والعرض أي الإحداثيات فقط.
لهذا يجب استخدام خدمات Google Places API بدلا من مكتبة Google Maps JavaScript API.
للقيام بذلك يمكنك أولا، استخدام Google Places API: من خلال تحميله والحصول على مفتاح API الخاص بك، ثم تحديد الموقع بواسطة الإحداثيات، فعند النقر على الخريطة، نقوم بتحديد الموقع باستخدام الإحداثيات واستخدامها لجلب معلومات الموقع.
ثم من خلال استخدام طلب تفاصيل المكان من خلال الإحداثيات المحددة، نرسل طلبا للحصول على تفاصيل المكان باستخدام خدمات Google Places API.
ولعرض اسم الموقع بمجرد الحصول على رد ناجح، نستخرج اسم الموقع من الرد ويتم عرضه في العنصر المناسب في واجهة المستخدم.
وهذا تحديث للكود الخاص بك من خلال توضيح كيفية تحقيق الهدف وجلب اسم الموقع المحدد على الخريطة:
let map;
let placesService;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
scrollwheel: true,
});
placesService = new google.maps.places.PlacesService(map);
const marker = new google.maps.Marker({
position: { lat: -34.397, lng: 150.644 },
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'position_changed', function () {
let lat = marker.position.lat();
let lng = marker.position.lng();
$('#latitude').val(lat);
$('#longitude').val(lng);
document.getElementById('latitude').dispatchEvent(new Event('input'));
document.getElementById('longitude').dispatchEvent(new Event('input'));
// Get place details and update location input
getPlaceName(marker.getPosition());
});
google.maps.event.addListener(map, 'click', function (event) {
marker.setPosition(event.latLng);
});
}
function getPlaceName(location) {
const request = {
location: location,
radius: '50', // Define the radius to search for places around the marker
};
placesService.nearbySearch(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK && results.length > 0) {
const placeName = results[0].name;
$('#location').val(placeName);
document.getElementById('location').dispatchEvent(new Event('input'));
}
});
}
فهذا الكود يقوم بتحديد الموقع على الخريطة وجلب اسم الموقع باستخدام Google Places API وعرضه في حقل الإدخال المخصص للعنوان.