تضمين خرائط Google إلى موقعك بإستخدام HTML 19 - Programmer Tech
html

تضمين خرائط Google إلى موقعك بإستخدام HTML 19

تضمين خرائط Google إلى موقعك

تضمين خرائط Google إلى موقعك بإستخدام HTML

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

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

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

تضمين خرائط Google إلى موقعك بإستخدام HTML 19

مثال

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

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

تضمين خرائط Google إلى موقعك بإستخدام HTML 19

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

تضمين خرائط Google إلى موقعك بإستخدام HTML 19

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

تضمين خرائط Google إلى موقعك بإستخدام HTML 19

نقوم بعد ذلك بنسخ الكود الظاهر في هذه الصورة و لصقه بالمكان المطلوب بموقعك ضمن الوسم 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>
.

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

تضمين خرائط Google إلى موقعك بإستخدام HTML 19

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

لمشاهدة الدرس كاملاً على يوتيوب.

محمد تركي العلوش

من سورية بالتحديد من مدينة "منبج" ، ‏مبرمج ويب، محب للتقنية | ‎#أمن_المعلومات | ‎#الأمن_السيبراني | ‎#الشبكات | ‎#توعية_أمنية ، آمل أن أُقدم كل ما هو مفيد للجميع.
شاهد أيضاً
إغلاق
زر الذهاب إلى الأعلى