عالم البرمجة عالم البرمجة

كيف اضافة الخريطة التفاعلية الى موقعي باي لغة برمجه

Fisal005 • منذ 6 سنوات

كيف اضافة الخريطة التفاعلية على موقعي باي لغة برمجه

كلمات دليلية:
أعجبني السؤال تابع السؤال شارك السؤال

ساعد بالإجابة

"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."

الإجابات (1)

Ali Majrashi • منذ 6 سنوات

السلام عليكم ورحمة الله وبركاته 

لاضافة خرائط للموقع تقدر تستخدم JavaScript و Google Maps 

الموجود طريقتين لتنفيذهم:

  1. باستخدام مكتبة Google Maps مباشره
  2. باستخدام مكتبات خارجية مساعدة مع Google Maps 

في كل الحالتين انت تحتاج API Key للتعامل مع خرائط Google وتقدر بكل سهوله تنشئ مفتاحك الخاص من هذا الرابط

اضغط هنا

* الطريقة الأولى

لتنفيذ الخريطه فقط باستخدام Google Javascript Api قم بعمل ملف html وداخله هذا الكود  


<!DOCTYPE html>
<html>
  <head>
     <title>عالم البرمجة</title>
     <style>
      /* مطلوب تحديد عرض وطول الخريطه لتعمل */
      #map {
        width: 800px;
        height: 800px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY-HERE=initMap"
    async defer></script>
  </body>
</html>

اهم شي بالكود هذا استبدل كلمة YOUR-API-KEY-HERE بمفتاحك الخاص من موقع خرائط Google ليعمل 

لاحظ في الكود هذا كل الي علمناه هو ملف html عادي يحتوي على css داخل head لتحديد عرض وطول الخريطه للعنصر map

داخل body قمنا بعمل div واعطيناه id=map ليسهل تحديده من قبل كود جافاسكربت 

وداخل script هنا ننفذ امر انشاء الخريطه نحدد العنصر الي نرغب في انشاء الخريطه مكانه وهنا اخترنا العنصر map ونفذنا امر انشاء الخريطه بالمعطيات المدخله

وداخل script الثاني قمنا بتضمين ملف Google Map Api ليسهل لنا تنفيذ امر انشاء الخريطه كما فعلنا داخل عنصر script الاول 

يوجد بموقع Google Maps العديد من الشروح لتنفيذ جميع الخطوات والحصول على نفس النتيجه هنا شرح مفصل للطريقة اضغط هنا

وكما توفر المكتبة العديد من الخيارات الممكن استخدامها لانشاء مايناسبك من الخرائط 

* الطريقة الثانيه

باستخدام مكتبات مساعدة واشهرهم مكتبة gmaps.js 

نفس الطريقة الأولى نقوم بانشاء ملف html عادي يحتوي علي هذا الكود  


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>عالم البرمجة</title>
   </head>
   <style type="text/css">
    #map {
      width: 400px;
      height: 400px;
    }
   </style>
   <body>

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

      <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY-HERE"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.min.js"></script>
      <script>
       var map = new GMaps({
         el: '#map',
         lat: -12.043333,
         lng: -77.028333
       });
     </script>
   </body>
</html>

لاحظ هنا انا قمنا بتضمين ملف Google Map Api وايضا ملف مكتبة gmaps.js انا استخدمت هنا خدمة cdn من موقع cloudflare توفر روابط للمكتبة تقدر تسبدلها برابط فعلي على موقعك اذا حبيت او استخدم الحاليه 

بعدها قمنا بانشاء الخريطة باستخدام امر مكتبة gmaps على عكس الطريقة الأولى 

تستطيع عرض الكثير من الامثله المعموله بواسطة هذه المكتبة بالضغط هنا لكل مثال يوجد الكود وشرح له استفد منها لتنفيذ ماترغب فيه

 

جميع الطريقتين تعمل بدون مشاكل يبقى لديك التفضيل والاختيار الانسب لك وكلهم يوفرون كميه هائله من التغييرات والاعدادات التي تستطيع الاستفادة منها 

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !

اشترك الآن