اضافة خرائط Google إلى موقعنا الألكتروني بسهولة في لغة HTML الدرس |20| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الثلاثاء، 22 سبتمبر 2020

اضافة خرائط Google إلى موقعنا الألكتروني بسهولة في لغة HTML الدرس |20|


إضافة خرائط جوجل لموقع الكتروني

في بعض الأحيان ترغب بإضافة خرائط في موقعك, في هذا الدرس سوف نشرح عن كيفية إضافة الخريطة لموقعك بأسهل طريقة من خلال html فقط.


خطوات إضافة الخريطة

نقوم بالبحث عن موقع google maps في المتصفح, بعد دخولنا للموقع نقوم بالبحث عن المكان الذي نريد إضافته للموقع.



مثال

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

بعد البحث عن المكان المطلوب و إيجاده كما يلي


سوف أقوم بإضافة إحداثيات جامع الفتح لموقعي الإلكتروني, بعدما حددنا الموقع المطلوب نقوم بالضغط على خيار مشاركة 


ثم نقوم بإختيار تضمين الخريطة


نقوم بعد ذلك بنسخ الكود الظاهر في هذه الصورة و لصقه بالمكان المطلوب بموقعك ضمن الوسم body كما يلي.

<body>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3036.9944987161966!2d37.93923543228271!3d36.52399179385449!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1531ab290e1560a1%3A0x4647e0eb69d7b164!2z2KzYp9mF2Lkg2KfZhNmB2KrYrQ!5e1!3m2!1sar!2str!4v1600812886021!5m2!1sar!2str" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>


صورة للكود من المحرر

 أي بإختصار الأمر 

<iframe src=" نضع رابط يلي نحصله من google map " style="خصائص العرض والطول "></iframe>

 

نقوم بفتحه في المتصفح


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

لمشاهدة الدرس كاملاً على يوتيوب اضغط على ايقونة يوتيوب الآتية ليتم توجيهك للدرس

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام