جلب اسم موقع معين من خرائط قوقل Google Maps Platform

Programmer Programmers · 10 فبراير

ما هي الخاصية التي تجلب اسم الموقع عند النقر على موقع في الخريطة وتخزينة في location Element

<div class=" mb-3 col-md-6 ">
    <label class="form-label" for="location">العنوان</label>
    <input wire:model="location" type="text" id="location" required=""
        value="{{ old('location') }}" name="location" class="form-control"
        placeholder="الرجاء إدخال العنوان">
    @error('location')
        <div class="text-danger px-2 showValidationError ">
            {{ $message }}
        </div>
    @enderror
</div>
<div class=" mb-3 col-md-12 ">
    <label class="form-label">الموقع </label>
    <div id="map" style="height: 300px;"></div>
</div>
<div class=" mb-3 col-md-6 d-none">
    <input wire:model="latitude" type="text" id="latitude" required=""
        value="{{ old('latitude') }}" name="latitude" class="form-control"
        placeholder="الرجاء إدخال خط الطول">
    <div class="fv-plugins-message-container invalid-feedback ">
        الرجاء إدخال خط الطول
    </div>
    @error('latitude')
        <div class="text-danger px-2 showValidationError ">
            {{ $message }}
        </div>
    @enderror
</div>
<div class=" mb-3 col-md-6 d-none">
    <input wire:model="longitude" type="text" id="longitude" required=""
        value="{{ old('longitude') }}" name="longitude" class="form-control"
        placeholder="الرجاء إدخال خط العرض">
    <div class="fv-plugins-message-container invalid-feedback ">
        الرجاء إدخال خط العرض
    </div>
    @error('longitude')
        <div class="text-danger px-2 showValidationError ">
            {{ $message }}
        </div>
    @enderror
</div>

الكود الحالي يجلب خطوط الطول والعرض فقط

let map;
function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        scrollwheel: true,
    });
    const uluru = { lat: -34.397, lng: 150.644 };
    let marker = new google.maps.Marker({
        position: uluru,
        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'))
        })
    google.maps.event.addListener(map,'click',
    function (event){
        pos = event.latLng
        marker.setPosition(pos)
    })
}

ياسر مسكين · 10 فبراير

المشكلة في هذا الكود حسب تصفحي إياه هو أنه لا يقوم بجلب اسم الموقع المحدد على الخريطة وبدلا من ذلك يقوم فقط بجلب خطوط الطول والعرض أي الإحداثيات فقط.

لهذا يجب استخدام خدمات 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 وعرضه في حقل الإدخال المخصص للعنوان.

جلب اسم موقع معين من خرائط قوقل Google Maps Platform

السؤال

Programmer Programmers

1 جواب على هذا السؤال

Recommended Posts

ياسر مسكين

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية