حابب استخدم فى الموقع بتاعى جوجل مابس ي جماعه

طريقة اضافة خرائط جوجل امر سهل للغاية الطريقة

كالتالي

اولا يجب عليك اضافة وسم div يحتوي على معرف id بإسم map بالمكان الذي تريد ان تظهر الخريطة فيه

<div id="map"></div>

ثم تقوم بإضافة وسم script يحتوي دالة initMap مع تعديل قيمة lat (Latitude) و lng (Longitude) الى عنوان المؤشر الذي تريد التحديد عليه في الخريطة

<script>
// Initialize and add the map
function initMap() {
  var location = {lat: 24.69, lng: 46.72};

  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  var marker = new google.maps.Marker({position: location, map: map});
}
</script>

بإمكانك الحصول على الموقع عن طريق الخدمة التاليه 

 او عن طريق جلبه من رابط خرائط لجوجل

في الاخير تقوم بإضافة وسم script مع تغيير YOUR_API_KEY بمفتاحك

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

للحوصل على  المفتاح بإمكانك ذلك عن طريق الرابط التالي

الشرح منقول على عجلة من