تضمين خرائط Google إلى موقعك بإستخدام HTML
في بعض الأحيان ترغب بإضافة ” تضمين ” خرائط في موقعك, في هذا الدرس سوف نشرح عن كيفية إضافة الخريطة لموقعك بأسهل طريقة من خلال 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 حجم ثابت, نستطيع تحويلها للنسبة المئوية.
لمشاهدة الدرس كاملاً على يوتيوب.
