كيفية تضمين خرائط Google على موقع الويب: 4 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:37

صوّت لي في تحدي الخرائط!

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

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

الآن يجب أن أقول ، يجب أن تعرف شيئًا أو شيئًا عن HTML و CSS لتضمين خرائط Google في موقع الويب الخاص بك. إذا كنت لا تعرف أي شيء عن HTML أو CSS ، فحاول الانتقال إلى

ملاحظة: أنا لست تابعًا لـ W3Schools بأي شكل أو شكل. إنه مجرد موقع ويب وجدته مفيدًا عند تعلم HTML و CSS.

اللوازم

• محرر النصوص (سيتم استخدامه لتخصيص موقع الويب الخاص بك وتوفير المحتوى على موقع الويب الخاص بك).
• خرائط جوجل (ما سيتم تضمينه في موقع الويب الخاص بك).
• الفهم الأساسي لـ HTML و CSS (هذه هي لغات البرمجة التالية التي سيتم استخدامها عند تخصيص موقع الويب الخاص بك وتوفير المحتوى على موقع الويب الخاص بك).

الخطوة 1: توفير المحتوى على موقع الويب الخاص بك

انتقل إلى برنامج محرر النصوص الخاص بك على جهاز الكمبيوتر الخاص بك. على سبيل المثال ، نظرًا لأن لديّ Windows ، يجب أن أذهب إلى Notepad. بعد أن تذهب إلى المفكرة ، اكتب ما يلي:

خرائط جوجل

خرائط جوجل

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

إليك الرابط لتنتقل إلى خرائط Google:

الخطوة 2: تضمين خرائط Google في موقع الويب الخاص بك

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

الخطوة 3: تخصيص موقع الويب الخاص بك

ارجع إلى برنامج محرر النصوص على جهاز الكمبيوتر الخاص بك واكتب ما يلي:

جسم خرائط Google {background-color: rgb (129، 207، 224، 1)؛}

خرائط جوجل

يتم استخدام علامة النمط لتخصيص موقع الويب الخاص بك. الآن ، سوف أنصحك بأن هذه الخطوة تستخدم CSS. يمكنك كتابة ما يلي حتى يبدو موقعك تمامًا مثل موقع الويب الخاص بي.

بمجرد الانتهاء ، احفظ الملف باسم "Google Maps.html". لا تنس جزء html لأنه إذا لم تقم بتضمين هذا الجزء ، فلن تتمكن من إنشاء موقع ويب.

الخطوة 4: انظر إلى منتجك النهائي

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

إذا كنت ترغب في عرض كود المصدر الخاص بي ، فيمكن العثور عليه في الجزء السفلي من هذه التعليمات. شكرًا لك على عرض Instructables الخاص بي والترميز السعيد!

للتذكير ، يرجى التصويت لي في تحدي الخرائط!