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

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

[شرح]
أدوات الموضوع

أدوات الموضوع

عرض نسخة صالحة للطباعة

أرسل هذا الموضوع إلى صديق

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

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

Admin

.:: فريق الإدارة ::.

تاريخ الإنضمام : 15-01-2020

رقم العضوية : 1

المشاركات : 2236

الدولة : فلسطين

الجنس :

تاريخ الميلاد : 11-9-1998

الدعوات : 18

قوة السمعة : 440

موقعي : زيارة موقعي

من مواضيع :Admin

	دور نص الرابط في تحسين تج ..
	إصلاح لوحة تحكم aaPanel
	لماذا يجب أن تنتقل من الا ..
	بادئة للمواضيع بالوان مخت ..
	جافا سكريبت اضافة ايقونة ..

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

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

من المهمات الشائعة في تطبيقات الويب هي استخدام الخرائط ، حيث نعرف أهمية خرائط جوجل واستخداماتها ، ولكن ماهي تلك الأنظمة التي تستخدم الخرائط في مواقع الويب؟ توجد العديد من التطبيقات والتي منها نظام التتبع والمراقبة عبر تقنية 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 : عرض التضاريس من جبال وانهار.

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

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);

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

وأتمنى انكم استفدتم من الموضوع ، دمتم في رعاية الله وحفظه!

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

والسلام ختام

: توقيع :Admin

: للتواصل مع الادارة بشأن اي موضوع : لمشاهدة الروابط يلزمك التسجيل

: اضافة رد جديد اضافة موضوع جديد

المواضيع المتشابهه
عنوان الموضوع	الكاتب	الردود	الزوار	آخر رد
أثر استخدام استراتيجيتي خرائط المفاهيم والشكل V	Basil Abdallah	0	283	Basil Abdallah

الكلمات الدلالية

« كيفية حذف الإمتداد php من الرابط بواسطة ملف htaccess | كيفية الاتصال بـ VPS »

الساعة الآن 07:30 PM