كيفية إضافة خريطة جوجل إلى صفحة الويب الخاصة بك

01 من 05

احصل على مفتاح API لخرائط Google لموقعك

أفضل طريقة لإضافة خريطة Google إلى موقعك على الويب هي استخدام API لخرائط Google. وتوصي Google بالحصول على مفتاح واجهة برمجة التطبيقات لاستخدام الخرائط.

لا يُطلب منك الحصول على مفتاح واجهة برمجة التطبيقات لاستخدام واجهة برمجة التطبيقات لخرائط Google الإصدار 3 ، ولكنه مفيد جدًا لأنه يتيح لك مراقبة استخدامك والدفع مقابل الوصول الإضافي. تحتوي واجهة برمجة تطبيقات خرائط Google الإصدار 3 على حصة واحدة لكل ثانية لكل مستخدم بحد أقصى 25000 طلب في اليوم. إذا تجاوزت صفحاتك هذه الحدود ، فستحتاج إلى تمكين الفوترة للحصول على المزيد.

كيفية الحصول على مفتاح API لخرائط Google

1. تسجيل الدخول إلى Google باستخدام حساب Google الخاص بك.
2. انتقل إلى Developers Console
3. مرر عبر القائمة وابحث عن الإصدار 3 من Google Maps API ، ثم انقر على الزر "إيقاف" لتشغيله.
4. قراءة البنود والموافقة عليها.
5. انتقل إلى وحدة تحكم واجهات برمجة التطبيقات وحدد "واجهة برمجة التطبيقات API" من القائمة اليمنى
6. في قسم "Simple API Access" ، انقر فوق الزر "إنشاء مفتاح خادم جديد ...".
7. أدخل عنوان IP لخادم الويب الخاص بك. هذا هو عنوان IP الذي ستصدر منه طلبات الخرائط الخاصة بك. إذا كنت لا تعرف عنوان IP الخاص بك ، يمكنك البحث عنه.
8. قم بنسخ النص الموجود على سطر "API::" (وليس بما في ذلك العنوان). هذا هو مفتاح واجهة برمجة التطبيقات لخرائطك.

02 من 05

تحويل عنوانك إلى الإحداثيات

لاستخدام خرائط Google على صفحات الويب الخاصة بك ، يجب أن يكون لديك خط العرض وخط الطول للموقع. يمكنك الحصول على هذه من GPS أو يمكنك استخدام أداة عبر الإنترنت مثل Geocoder.us لإخبارك.

1. انتقل إلى Geocoder.us واكتب عنوانك في مربع البحث.
2. قم بنسخ الرقم الأول لخط العرض (بدون حرف في المقدمة) وقم بلصقه في ملف نصي. لست بحاجة إلى مؤشر درجة (º).
3. انسخ الرقم الأول لخط الطول (مرة أخرى بدون حرف في المقدمة) وقم بلصقه في ملفك النصي.

سيبدو خط العرض وخط الطول شيئًا كالتالي:

40.756076
-73،990838

يعمل Geocoder.us فقط لعناوين الولايات المتحدة ، إذا كنت بحاجة إلى الحصول على الإحداثيات في بلد آخر ، يجب عليك البحث عن أداة مشابهة في منطقتك.

03 من 05

إضافة الخريطة إلى صفحة الويب الخاصة بك

أولاً ، أضف Script Map إلى

من المستند الخاص بك

افتح صفحة الويب الخاصة بك وقم بإضافة ما يلي إلى HEAD من المستند.

قم بتغيير الجزء المظلل إلى أرقام خطوط الطول والعرض التي كتبتها في الخطوة الثانية.

ثانيًا ، أضف عنصر الخريطة إلى صفحتك

بعد إضافة جميع عناصر النص البرمجي إلى HEAD في المستند ، يلزمك وضع خريطتك على الصفحة. يمكنك القيام بذلك عن طريق إضافة عنصر DIV بسمة id = "map-canvas". أوصيك أيضًا بتمييز هذا div مع العرض والارتفاع الملائمين لصفحتك:

وأخيرا ، تحميل واختبار

آخر شيء فعله هو تحميل صفحتك واختبارها التي تعرضها خريطتك. في ما يلي مثال لخريطة Google على الصفحة. لاحظ ، نظرًا للطريقة التي يعمل بها About.com CMS ، سيكون عليك النقر فوق ارتباط للحصول على الخريطة لتظهر. لن يكون هذا هو الحال في صفحتك.

إذا لم تظهر الخريطة ، فجرِّب تهيئتها باستخدام سمة BODY:

onload = "initialize ()" >

تتضمن الأشياء الأخرى للتحقق من عدم تحميل خريطتك ما يلي:

• ابحث عن الأخطاء المطبعية في جافا سكريبت ، بما في ذلك الحالة. جافا سكريبت حساس لحالة الأحرف.
• تأكد من أن لديك مجموعة خيارات التكبير والتصغير.
• تأكد من أن عنصر DIV موجود على الصفحة ذات المعرف الصحيح.
• تأكد من أن عنصر DIV لديه ارتفاع.

04 من 05

أضف علامة إلى خريطتك

ولكن ما هو جيد خريطة لموقعك إذا لم يكن هناك علامة يخبر الناس أين يجب أن تذهب؟

لإضافة علامة حمراء قياسية لخرائط Google ، أضف ما يلي إلى النص البرمجي أسفل خريطة var = ... line:

var myLatlng = new google.maps.LatLng ( خط العرض وخط الطول ) ؛
var marker = new google.maps.Marker ({
موقف: myLatlng ،
الخريطة: الخريطة ،
title: " Former About.com Headquarters "
})؛

غيّر النص المميز إلى خط العرض وخط الطول والعنوان الذي ترغب في ظهوره عندما يمرر الأشخاص مؤشر الماوس فوق العلامة.

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

var latlng 2 = new google.maps.LatLng ( 37.3316591، -122.0301778 )؛
var myMarker 2 = new google.maps.Marker ({
position: latlng 2 ،
الخريطة: الخريطة ،
العنوان: " أبل كمبيوتر "
})؛

في ما يلي مثال لخريطة Google مع علامة. لاحظ أنه نظرًا للطريقة التي يعمل بها About.com CMS ، يجب النقر فوق ارتباط للحصول على الخريطة لتظهر. لن يكون هذا هو الحال في صفحتك.

05 من 05

أضف خريطة ثانية (أو أكثر) لصفحتك

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

1. احصل على خطوط الطول والعرض لجميع الخرائط التي تريد عرضها كما تعلمنا في الخطوة 2 من هذا البرنامج التعليمي.
2. أدخل الخريطة الأولى كما تعلمنا في الخطوة 3 من هذا البرنامج التعليمي. إذا كنت تريد أن تحتوي الخريطة على علامة ، فأضف العلامة كما في الخطوة 4.
3. بالنسبة إلى الخريطة الثانية ، ستحتاج إلى إضافة 3 أسطر جديدة إلى نص برمجي () النصي:
   var latlng2 = new google.maps.LatLng ( الإحداثيات الثانية ) ؛
   var myOptions2 = {zoom: 18، center: latlng2، mapTypeId: google.maps.MapTypeId.ROADMAP}؛
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2")، myOptions2)؛
4. إذا كنت تريد علامة على الخريطة الجديدة أيضًا ، فأضف علامة ثانية تشير إلى الإحداثيات الثانية والخريطة الثانية:
   var myMarker2 = new google.maps.Marker ({position: latlng2 ، map: map2 ، title: " Your Marker Title "})؛
5. ثم يضاف الثاني

   حيث تريد الخريطة الثانية. وتأكد من إعطائه معرف = "map_canvas_2" ID.

6. عندما يتم تحميل صفحتك ، سيتم عرض خريطتين

إليك شفرة الصفحة مع خريطتين جوجل عليها: