التعامل مع خرائط قوقل Google Maps Platform

 هل قمت بتفعيل Geocoding API فى console cloud الخاص بجوجل ؟ 

بتاريخ 6 دقائق مضت قال محمد عاطف11:

 هل قمت بتفعيل Geocoding API فى console cloud الخاص بجوجل ؟ 

الأن عملت له enable

للحصول على اسم الموقع على شكل نص، يجب القيام بعمليّة تدعى  reverse geocoding، وهو ميزة منفصلة متوفّرة في Google Maps API. هذه العملية تأخذ خط الطول ودائرة العرض كمعاملات وتعيد النتيجة كعنوان. يمكنك قراءة المزيد عن هذه المزيد لتعلم كيف تعمل وتقوم بتفعيلها قبل الاستمرار:

https://developers.google.com/maps/documentation/javascript/geocoding

بعد ذلك، يمكنك تغيير كود JavaScript  للقيام بهذه العملية. يمكن أن يكون الكود شبيها بالتالي:

let map;
let geocoder; // Declare a geocoder variable
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
    });

    geocoder = new google.maps.Geocoder(); // Initialize the geocoder

    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'))
            geocodeLatLng(lat, lng); // Call the geocodeLatLng function
        })
    google.maps.event.addListener(map,'click',
    function (event){
        pos = event.latLng
        marker.setPosition(pos)
    })
}

// Define the geocodeLatLng function
function geocodeLatLng(lat, lng) {
  var latlng = {lat: lat, lng: lng};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        // Set the location input value to the formatted address
        $('#location').val(results[0].formatted_address);
        document.getElementById('location').dispatchEvent(new Event('input'));
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

بتاريخ 13 دقائق مضت قال Programmer Programmers:

الأن عملت له enable

بعد تفعيل Geocoding API يمكنك استخدام هذه الدالة للحصول على اسم العنوان 

 function geocodeLatLng(lat, lng) {

        var latlngObj = {
            lat: lat,
            lng: lng
        };

        geocoder.geocode({
            'location': latlngObj
        }, function (results, status) {
            if (status === 'OK') {
                if (results[0]) {
                  return results[0].formatted_address;

                } else {
                    console.log('No results found');
                }
            } else {
                console.log('Geocoder failed due to: ' + status);
            }
        });

    }

ليصبح ملف الجافا سكريبت كالكود هذا

let map;
function initMap() {
    function geocodeLatLng(lat, lng) {

        var latlngObj = {
            lat: lat,
            lng: lng
        };

        geocoder.geocode({
            'location': latlngObj
        }, function (results, status) {
            if (status === 'OK') {
                if (results[0]) {
                    return results[0].formatted_address;

                } else {
                    console.log('No results found');
                }
            } else {
                console.log('Geocoder failed due to: ' + status);
            }
        });

    }
    map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        scrollwheel: true,
    });

    let geocoder = new google.maps.Geocoder();

    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 (e) {

            let lat = marker.position.lat()
            let lng = marker.position.lng()
            let locationName = geocodeLatLng(lat, 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)
        })
}

بتاريخ 16 دقائق مضت قال Programmer Programmers:

الأن عملت له enable

هل قمت بتفعيل ال Billing فى المشروع الخاص بك فى جوجل ؟ 

حيث لن يعمل دون تفعيل ال billing account 

مرحبا
اولا لابد من استخدام ال key
 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

استبدل YOUR_API_KEY بال key الخاص بك في google cloud بعد اضافة طريقة الدفع
وقم بتفعيل Maps JavaScript API 

بعد التمكين، انتقل إلى "Credentials" من القائمة الجانبية.

اختر "Create Credentials" واختر "API key"
ومن ثم اعد تشغيل البرنامج