احصل على مفتاح API لخرائط Google لموقعك
أفضل طريقة لإضافة خريطة Google إلى موقعك على الويب هي استخدام API لخرائط Google. وتوصي Google بالحصول على مفتاح واجهة برمجة التطبيقات لاستخدام الخرائط.
لا يُطلب منك الحصول على مفتاح واجهة برمجة التطبيقات لاستخدام واجهة برمجة التطبيقات لخرائط Google الإصدار 3 ، ولكنه مفيد جدًا لأنه يتيح لك مراقبة استخدامك والدفع مقابل الوصول الإضافي. تحتوي واجهة برمجة تطبيقات خرائط Google الإصدار 3 على حصة واحدة لكل ثانية لكل مستخدم بحد أقصى 25000 طلب في اليوم. إذا تجاوزت صفحاتك هذه الحدود ، فستحتاج إلى تمكين الفوترة للحصول على المزيد.
كيفية الحصول على مفتاح API لخرائط Google
- تسجيل الدخول إلى Google باستخدام حساب Google الخاص بك.
- انتقل إلى Developers Console
- مرر عبر القائمة وابحث عن الإصدار 3 من Google Maps API ، ثم انقر على الزر "إيقاف" لتشغيله.
- قراءة البنود والموافقة عليها.
- انتقل إلى وحدة تحكم واجهات برمجة التطبيقات وحدد "واجهة برمجة التطبيقات API" من القائمة اليمنى
- في قسم "Simple API Access" ، انقر فوق الزر "إنشاء مفتاح خادم جديد …".
- أدخل عنوان IP لخادم الويب الخاص بك. هذا هو عنوان IP الذي ستصدر منه طلبات الخرائط الخاصة بك. إذا كنت لا تعرف عنوان IP الخاص بك ، يمكنك البحث عنه.
- قم بنسخ النص الموجود على سطر "API::" (وليس بما في ذلك العنوان). هذا هو مفتاح واجهة برمجة التطبيقات لخرائطك.
تحويل عنوانك إلى الإحداثيات
لاستخدام خرائط Google على صفحات الويب الخاصة بك ، يجب أن يكون لديك خط العرض وخط الطول للموقع. يمكنك الحصول على هذه من GPS أو يمكنك استخدام أداة عبر الإنترنت مثل Geocoder.us لإخبارك.
- انتقل إلى Geocoder.us واكتب عنوانك في مربع البحث.
- قم بنسخ الرقم الأول لخط العرض (بدون حرف في المقدمة) وقم بلصقه في ملف نصي. لست بحاجة إلى مؤشر درجة (º).
- انسخ الرقم الأول لخط الطول (مرة أخرى بدون حرف في المقدمة) وقم بلصقه في ملفك النصي.
سيبدو خط العرض وخط الطول شيئًا كالتالي:
40.756076-73.990838
لا يعمل Geocoder.us إلا لعناوين الولايات المتحدة ، إذا كنت بحاجة إلى الحصول على الإحداثيات في بلد آخر ، فعليك البحث عن أداة مشابهة في منطقتك.
03 من 05إضافة الخريطة إلى صفحة الويب الخاصة بك
أولاً ، أضف Script Map إلى
من المستند الخاص بك
افتح صفحة الويب الخاصة بك وقم بإضافة ما يلي إلى رئيس من المستند الخاص بك.
قم بتغيير الجزء المظلل إلى أرقام خطوط الطول والعرض التي كتبتها في الخطوة الثانية.
ثانيًا ، أضف عنصر الخريطة إلى صفحتك
بمجرد إضافة جميع عناصر البرنامج النصي إلى رئيس من المستند الخاص بك ، تحتاج إلى وضع الخريطة الخاصة بك على الصفحة. يمكنك القيام بذلك عن طريق إضافة DIV عنصر مع معرف = "خارطة-قماش" صفة، عزا. أوصيك أيضًا بتمييز هذا div مع العرض والارتفاع الملائمين لصفحتك:
وأخيرا ، تحميل واختبار
آخر شيء فعله هو تحميل صفحتك واختبارها التي تعرضها خريطتك. في ما يلي مثال لخريطة Google على الصفحة. لاحظ ، نظرًا للطريقة التي يعمل بها About.com CMS ، سيكون عليك النقر فوق ارتباط للحصول على الخريطة لتظهر. لن يكون هذا هو الحال في صفحتك.
إذا لم تظهر الخريطة الخاصة بك ، فحاول تهيئتها باستخدام الجسم صفة، عزا:
ONLOAD = "تهيئة ()" >
تتضمن الأشياء الأخرى للتحقق من عدم تحميل خريطتك ما يلي:
- ابحث عن الأخطاء المطبعية في جافا سكريبت ، بما في ذلك الحالة. جافا سكريبت حساس لحالة الأحرف.
- تأكد من أن لديك
تكبيرومركزمجموعة الخيارات. - تأكد من أن الخاص بك
DIVالعنصر موجود على الصفحة ذات المعرف الصحيح. - تأكد من أن الخاص بك
DIVعنصر له ارتفاع.
أضف علامة إلى خريطتك
ولكن ما هو جيد خريطة لموقعك إذا لم يكن هناك علامة يخبر الناس أين يجب أن تذهب؟
لإضافة علامة حمراء خرائط جوجل القياسية أضف ما يلي إلى البرنامج النصي الخاص بك أدناه var map = … خط:
var myLatlng = new google.maps.LatLng ( خطوط العرض والطول );var marker = new google.maps.Marker ({موقف: myLatlng ،الخريطة: الخريطة ،عنوان:" مقر About.com السابق '});
غيّر النص المميز إلى خط العرض وخط الطول والعنوان الذي ترغب في ظهوره عندما يمرر الأشخاص مؤشر الماوس فوق العلامة.
يمكنك إضافة العديد من العلامات إلى الصفحة كما تشاء ، فما عليك سوى إضافة متغيرات جديدة بإحداثيات وعناوين جديدة ، ولكن إذا كانت الخريطة صغيرة جدًا بحيث لا يمكن عرض جميع العلامات ، فلن يتم عرضها إلا إذا تم تصغير القارئ.
فار latlng 2 = new google.maps.LatLng ( 37.3316591,-122.0301778 );فار myMarker 2 = new google.maps.Marker ({موقف: latlng 2 ,الخريطة: الخريطة ،عنوان:" كومبيوتر ابل '});
في ما يلي مثال لخريطة Google مع علامة. لاحظ أنه نظرًا للطريقة التي يعمل بها About.com CMS ، يجب النقر فوق ارتباط للحصول على الخريطة لتظهر. لن يكون هذا هو الحال في صفحتك.
05 من 05أضف خريطة ثانية (أو أكثر) لصفحتك
إذا نظرت إلى مثال خريطتي صفحة خرائط Google فسوف تلاحظ أن لدي أكثر من خريطة معروضة على الصفحة. هذا من السهل جدا القيام به. إليك الطريقة.
- احصل على خطوط الطول والعرض لجميع الخرائط التي تريد عرضها كما تعلمنا في الخطوة 2 من هذا البرنامج التعليمي.
- أدخل الخريطة الأولى كما تعلمنا في الخطوة 3 من هذا البرنامج التعليمي. إذا كنت تريد أن تحتوي الخريطة على علامة ، فأضف العلامة كما في الخطوة 4.
- بالنسبة إلى الخريطة الثانية ، ستحتاج إلى إضافة 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)؛ - إذا كنت تريد علامة على الخريطة الجديدة أيضًا ، فأضف علامة ثانية تشير إلى الإحداثيات الثانية والخريطة الثانية:
var myMarker2 = new google.maps.Marker ({position: latlng2 ، خريطة: MAP2 ، عنوان:" عنوان العلامة الخاصة بك ' }); - ثم أضف المكان الثاني الذي تريد فيه الخريطة الثانية. وتأكد من اعطائها
معرف = "map_canvas_2"هوية شخصية. - عندما يتم تحميل صفحتك ، سيتم عرض خريطتين
إليك شفرة الصفحة مع خريطتين جوجل عليها:
