كيفية استخدام خرائط جوجل في مواقع الويب

بواسطة Codex AIT
في
محتويات المقال:
كيفية استخدام خرائط جوجل في مواقع الويب
من المهمات الشائعة في تطبيقات الويب هي استخدام الخرائط ، حيث نعرف أهمية خرائط جوجل واستخداماتها ، ولكن ماهي تلك الأنظمة التي تستخدم الخرائط في مواقع الويب؟ توجد العديد من التطبيقات والتي منها نظام التتبع والمراقبة عبر تقنية GPS على الهاتف المحمول ، يسجل خطوط الطول ودوائر العرض و يرسلها مباشرة الى قاعدة البيانات ويتم استعراضها على موقع الويب ، ايضا كثير من المواقع تستخدم الخرائط مثل الفيسبوك وغيرها، ولكن كيف نستخدمها في مواقع الويب؟

من الرائع ان جوجل تسمح باستخدام خرائطها على أي موقع ، وأضافت مكتبة (API) خاصة بخرائط جوجل لتضمينها واستخدامها في موقعك ، وفي هذه المقالة سنتطرق لكيفية استخدام مكتبة خرائط جوجل في صفحات الويب ، وهذا الكود بالكامل يمكنك حفظه في صفحة HTML ، وتجربة ذلك عند الاتصال بالأنترنت، 
<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
       <title>
          كيفية استخدام خرائط جوجل في مواقع الويب
       </title>
    </head>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
  <script>
  function initialize() {
    var mapProp = {
      center:new google.maps.LatLng(12.81222,45.02917),
      zoom:6,
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("gMap"),mapProp);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  </script>

  <style type="text/css">
          body{
           background:#000;
           color: #bbb;
          }
          #gMap{
           width:700px;
           height:450px;
           background: #eef1f2;
           color:#000;
           margin-right: auto;
           margin-top: 30px;
           margin-left: auto; 
           border:1px solid #fff;
           outline: 1px solid #999;
          }
  </style>
<body>
  <div id="gMap"></div>
</body>
</html>



شرح كود استخدام خرائط جوجل في مواقع الويب :

1 – كود استدعاء مكتبة خرائط جوجل لموقك بهذا الكود : 
<script src="http://maps.googleapis.com/maps/api/js"></script>
حيث اذا كنت تريد استخدام خرائط جوجل بشكل رسمي على موقعك مجانا ، يجب ان تذهب الى الرابط console.developers.google.com واستخراج رمز KEY للاستخدام المجاني ، ويتم اضافته للرابط بهذه الطريقة : 
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>


2 – كود خصائص الخريطة ، يتم تمريرها عبر كائن من نوع JSON كالتالي : 
var mapProp = {
      center:new google.maps.LatLng(12.81222 , 45.02917),
      zoom:6,
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };


شرح الخصائص المطلوبة للتحكم بإعدادات الخريطة :
center : تحديد الموقع بخطوط الطول ودوائر العرض.
zoom : تحديد نسبة التكبير الافتراضية ، حيث بإمكانك تكبير وتصغير الخريطة من الواجهة لاحقا.
mapTypeId : تحديد نوع الخريطة التي تريد ظهورها ، وتوجد أربعة أنواع وهي :
ROADMAP : القيمة الإفتراضية ، وهي عرض خريطة عادية مع أسماء المناطق.
SATELLITE : عرض صوري ، من الأقمار الصناعية.
HYBRID : هجين من الطريقتين السابقتين.
TERRAIN : عرض التضاريس من جبال وانهار.


3 – انشاء الحاضن للخريطة: 
<div id="gMap"></div>
انشاء عنصر div لعرض الخريطة فيه ، مع إمكانية التحكم بتنسيقة بال CSS.

4 – انشاء كائن الخريطة : 
var map=new google.maps.Map(document.getElementById("gMap"),mapProp);
الكود السابق يستخدم لإنشاء خريطة جديدة داخل العنصر div .

5 – كود استدعاء الدالة initialize عند تحميل الصفحة : 
google.maps.event.addDomListener(window, 'load', initialize);


كانت هذه طريقة تضمين خرائط جوجل في مواقع الويب ، حيث يمكنك التوسع اكثر في ذلك اذا كان لديك مشروع يعتمد على خرائط جوجل بشكل كامل ، وأتمنى انكم استفدتم من الموضوع ، دمتم في رعاية الله وحفظه!
الكلمات المفتاحية:

مواضيع ذات صلة