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

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

Admin

12-07-2021 08:11 مساءً

بسم الله الرحمن الرحيم

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

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

CODE

<!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 – كود استدعاء مكتبة خرائط جوجل لموقك بهذا الكود :

CODE

<script src="http://maps.googleapis.com/maps/api/js"></script>

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

CODE

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>

2 – كود خصائص الخريطة ، يتم تمريرها عبر كائن من نوع JSON كالتالي :

CODE

var mapProp = {<br />
&nbsp; &nbsp; &nbsp; center:new google.maps.LatLng(12.81222 , 45.02917),<br />
&nbsp; &nbsp; &nbsp; zoom:6,<br />
&nbsp; &nbsp; &nbsp; mapTypeId:google.maps.MapTypeId.ROADMAP<br />
&nbsp; &nbsp; };<br />

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

3 – انشاء الحاضن للخريطة:

CODE

<div id="gMap"></div>

انشاء عنصر div لعرض الخريطة فيه ، مع إمكانية التحكم بتنسيقة بال CSS.

4 – انشاء كائن الخريطة :

CODE

var map=new google.maps.Map(document.getElementById("gMap"),mapProp);

الكود السابق يستخدم لإنشاء خريطة جديدة داخل العنصر div .

5 – كود استدعاء الدالة initialize عند تحميل الصفحة :

CODE

google.maps.event.addDomListener(window, 'load', initialize);

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

بالتوفيق للجميع
والسلام ختام

أرشيف انكور