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

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

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

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

من الرائع ان جوجل تسمح باستخدام خرائطها على أي موقع ، وأضافت مكتبة (API) خاصة بخرائط جوجل لتضمينها واستخدامها في موقعك ، وفي هذه المقالة سنتطرق لكيفية استخدام مكتبة خرائط جوجل في صفحات الويب ، وهذا الكود بالكامل يمكنك حفظه في صفحة HTML ، وتجربة ذلك عند الاتصال بالأنترنت،

<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
       <title>
          كيفية استخدام خرائط جوجل في مواقع الويب
       </title>
    </head>
    <script src="https://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="https://maps.googleapis.com/maps/api/js"></script>

حيث اذا كنت تريد استخدام خرائط جوجل بشكل رسمي على موقعك مجانا ، يجب ان تذهب الى الرابط console.developers.google.com واستخراج رمز KEY للاستخدام المجاني ، ويتم اضافته للرابط بهذه الطريقة :

<script src="https://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);

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

Motasem Hanani
WRITTEN BY

Motasem Hanani

مطور مواقع، مصمم، ممنتج وكاتب محتوى. اسعى الى تغذية المحتوى العربي التطويري والثقافي في كل ما هو حصري ومفيد بعيداً عن النقل العشوائي والبرامج القديمه التالفة.