วิธีฝัง Google Maps บนเว็บไซต์: 4 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:03

โหวตให้ฉันใน Maps Challenge!

เมื่อเร็ว ๆ นี้ ฉันได้สร้างเว็บไซต์ที่ใช้ Google Maps การฝัง Google Maps ลงบนเว็บไซต์ของฉันนั้นค่อนข้างง่ายและทำได้ไม่ยาก ในคำแนะนำนี้ ฉันจะแสดงให้คุณเห็นว่าการฝัง Google Maps ลงในเว็บไซต์ของคุณทำได้ง่ายเพียงใด

ด้วยความสัตย์จริง ฉันเพิ่งฝัง Google Maps บนเว็บไซต์ของฉันเพื่อความสนุกสนาน ระหว่างกักกันไม่มีอะไรให้ทำมากนัก ทำไมไม่สร้างเว็บไซต์ที่ใช้ Google Maps แล้วแสดงขั้นตอนต่างๆ ที่ฉันทำในขณะที่สร้างเว็บไซต์นี้ให้คนอื่นดู

ตอนนี้ฉันต้องบอกว่า คุณต้องรู้สักสองสามอย่างเกี่ยวกับ HTML และ CSS เพื่อฝัง Google Maps ลงในเว็บไซต์ของคุณ หากคุณไม่รู้อะไรเกี่ยวกับ HTML หรือ CSS ลองไปที่

หมายเหตุ: ฉันไม่มีส่วนเกี่ยวข้องกับ W3Schools ในรูปแบบหรือรูปแบบใด ๆ เป็นเพียงเว็บไซต์ที่ฉันพบว่ามีประโยชน์เมื่อเรียนรู้ HTML และ CSS

เสบียง

• โปรแกรมแก้ไขข้อความ (จะใช้ในการปรับแต่งเว็บไซต์ของคุณและจัดเตรียมเนื้อหาบนเว็บไซต์ของคุณ)
• Google Maps (สิ่งที่จะฝังลงในเว็บไซต์ของคุณ)
• ความเข้าใจพื้นฐานของ HTML และ CSS (นี่คือภาษาโปรแกรมต่อไปนี้ที่จะใช้ในการปรับแต่งเว็บไซต์ของคุณและจัดหาเนื้อหาบนเว็บไซต์ของคุณ)

ขั้นตอนที่ 1: ระบุเนื้อหาบนเว็บไซต์ของคุณ

ไปที่ซอฟต์แวร์แก้ไขข้อความบนคอมพิวเตอร์ของคุณ ตัวอย่างเช่น เนื่องจากฉันมี Windows ฉันจึงควรไปที่ Notepad หลังจากที่คุณไปที่ Notepad ให้พิมพ์ดังต่อไปนี้:

Google Maps

Google Maps

หลังจากที่คุณพิมพ์ข้อความต่อไปนี้ใน Notepad เสร็จแล้ว ให้ไปที่ Google Maps ซึ่งคุณจะได้รับรหัสเพื่อใช้ฝัง Google Maps บนเว็บไซต์ของคุณในภายหลัง

นี่คือลิงค์สำหรับคุณที่จะไปที่ Google Maps:

ขั้นตอนที่ 2: ฝัง Google Maps บนเว็บไซต์ของคุณ

เมื่อคุณอยู่บน Google Maps ให้คลิกที่ปุ่ม "เมนู" แล้วมองหา "แชร์หรือฝังแผนที่" เมื่อคุณเห็น "แชร์หรือฝังแผนที่" ให้คลิกที่มัน เมื่อคุณคลิกแล้ว คุณจะเห็น "ส่งลิงก์" และ "ฝังแผนที่" ตอนนี้คลิกที่ "ฝังแผนที่" เมื่อคุณคลิกที่ "ฝังแผนที่" ตอนนี้คุณจะเห็นลูกศรชี้ลงทางด้านซ้ายของกล่องข้อความซึ่งจะใช้เพื่อเลือกว่าต้องการให้แผนที่ใหญ่หรือเล็กเพียงใด คัดลอกข้อความในกล่อง และวางข้อความลงใน HTML ของเว็บไซต์ของคุณ

ขั้นตอนที่ 3: ปรับแต่งเว็บไซต์ของคุณ

กลับไปที่ซอฟต์แวร์แก้ไขข้อความบนคอมพิวเตอร์ของคุณและพิมพ์ดังต่อไปนี้:

เนื้อหาของ Google Maps{background-color:rgb(129, 207, 224, 1);}

Google Maps

แท็กสไตล์ใช้เพื่อปรับแต่งเว็บไซต์ของคุณ ตอนนี้ ฉันจะแนะนำคุณว่าขั้นตอนนี้ใช้ CSS คุณสามารถพิมพ์ข้อความต่อไปนี้เพื่อให้เว็บไซต์ของคุณดูเหมือนเว็บไซต์ของฉัน

เมื่อเสร็จแล้ว ให้บันทึกไฟล์ของคุณเป็น "Google Maps.html" อย่าลืมส่วน html เพราะถ้าคุณไม่ใส่ส่วนนี้ คุณจะไม่สามารถสร้างเว็บไซต์ได้

ขั้นตอนที่ 4: ดูผลิตภัณฑ์ขั้นสุดท้ายของคุณ

เมื่อคุณทำตามขั้นตอนทั้งหมดในคำแนะนำนี้เสร็จแล้ว ให้พิจารณาผลิตภัณฑ์ขั้นสุดท้ายของคุณให้ดี หากคุณพอใจกับผลิตภัณฑ์ขั้นสุดท้ายของคุณ ถือว่าเยี่ยมมาก แต่ถ้าคุณไม่พอใจกับผลิตภัณฑ์ขั้นสุดท้ายของคุณ ให้กลับไปที่ Notepad ของคุณและพยายามแก้ไขผลิตภัณฑ์ขั้นสุดท้ายของคุณ เพื่อที่ว่าครั้งต่อไปเมื่อคุณดูผลิตภัณฑ์ขั้นสุดท้ายของคุณให้ดี คุณจะพอใจกับสิ่งที่คุณสร้างขึ้นด้วย มือของคุณ.

หากคุณต้องการดูซอร์สโค้ดของฉัน สามารถดูได้ที่ด้านล่างของคำแนะนำนี้ ขอบคุณสำหรับการดู Instructables ของฉันและการเข้ารหัสที่มีความสุข!

เพื่อเป็นการเตือนความจำ โปรดลงคะแนนให้ฉันใน Maps Challenge!