วิธีฝังแผนที่ google ที่ตอบสนองลงในเว็บไซต์

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

Google แผนที่เริ่มต้นไม่ตอบสนองเสมอไปดังนั้นอาจไม่ปรับขนาดตามขนาดหน้าจอที่แตกต่างกัน ขึ้นอยู่กับว่าคุณใช้ปลั๊กอิน WordPress หรือฝังตัวเองด้วยรหัสอาจต้องเพิ่ม CSS สองบรรทัดเพื่อให้แผนที่ตอบสนอง

ออกแบบเว็บไซต์ที่ตอบสนอง

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

ในการทำเช่นนี้เว็บไซต์จะต้องปรับให้เข้ากับความละเอียดขนาดหน้าจอและสัมผัสที่แตกต่างกัน

การฝัง Google Map ที่ตอบสนองต่อเว็บไซต์

มีสามวิธีที่ฉันรู้ในการฝัง Google Maps ไว้ในเว็บไซต์ หากคุณใช้ธีม WordPress มันอาจมีคุณสมบัติในตัวนอกจากนี้คุณยังสามารถใช้ปลั๊กอินหรือคุณสามารถฝังโค้ดจาก Google ลงในเว็บไซต์ใด ๆ ได้โดยตรง ตัวเลือกแรกและตัวเลือกที่สองนั้นยอดเยี่ยมสำหรับผู้ใช้ WordPress ส่วน CMS อื่น ๆ ก็ใช้ปลั๊กอินเช่นกัน ตัวเลือกสุดท้ายการใช้รหัสควรทำงานบนเว็บไซต์ส่วนใหญ่ไม่ว่าจะสร้างอย่างไร

ใช้ชุดรูปแบบ WordPress เพื่อฝังแผนที่ Google ที่ตอบสนองได้

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

1. เยี่ยมชมหน้านี้ในเว็บไซต์ของ Google เพื่อเริ่มกระบวนการ API
2. เลือกปุ่มเริ่มต้นสีน้ำเงิน
3. เลือกไอคอนเมนูสามบรรทัดที่ด้านซ้ายบนของหน้าจอใหม่
4. เลือก API และบริการจากนั้นเลือกข้อมูลรับรอง
5. เลือกสร้างข้อมูลรับรองจากนั้นเลือกคีย์ API
6. เลือก จำกัด รหัสและเลือกผู้อ้างอิง HTTP
7. เลือกบันทึก
8. คัดลอกคีย์ API และวางลงในหน้าตัวเลือกการออกแบบที่ต้องใช้

เมื่อคุณมีคีย์ API คุณสามารถใช้ Google แผนที่ในเว็บไซต์ของคุณโดยใช้เครื่องมือออกแบบชุดรูปแบบ ตราบใดที่ธีมนั้นตอบสนองได้แผนที่ก็ควรจะเหมือนกัน

ใช้ปลั๊กอินเพื่อฝัง Google แผนที่ตอบสนอง

WordPress ใช้ปลั๊กอิน Joomla ใช้ส่วนขยาย Drupal ใช้โมดูลหรือปลั๊กอินและ CMS อื่น ๆ ใช้หลักการตั้งชื่อที่คล้ายกัน ปลั๊กอินจะอ้างถึงองค์ประกอบแบบแยกส่วนที่คุณสามารถใส่ลงใน CMS หลักของคุณเพื่อเพิ่มคุณสมบัติได้ คุณสมบัติที่มีประโยชน์อย่างหนึ่งคือ Google Map หากชุดรูปแบบเว็บไซต์ของคุณไม่มีองค์ประกอบแผนที่และคุณไม่ต้องการทำโค้ดด้วยตัวเองปลั๊กอินคือสิ่งที่ดีที่สุดถัดไป

1. ใน WordPress นำทางไปยังปลั๊กอินและเพิ่มใหม่
2. ค้นหา Google Maps และเลือกปลั๊กอินที่คุณชอบ
3. เปิดใช้งานภายในปลั๊กอินและไปที่การตั้งค่า
4. เพิ่ม Google Maps API ที่คุณสร้างไว้ด้านบนตามที่ระบุและบันทึก
5. ใช้งานปลั๊กอินได้ทุกที่ที่คุณต้องการให้แผนที่ปรากฏ

CMS อื่น ๆ แตกต่างกันเล็กน้อยในการตั้งชื่อและตำแหน่งเมนูของพวกเขา แต่หลักการเหมือนกันมาก ปลั๊กอินแผนที่ส่วนใหญ่จะต้องใช้ Google Maps API เพื่อให้ทำงานได้

ใช้รหัสเพื่อฝัง Google แผนที่ตอบสนอง

หากคุณไม่ได้ใช้ WordPress หรือ CMS อื่น ๆ คุณยังสามารถฝัง Google แผนที่ตอบสนองได้ คุณเพียงแค่ต้องใช้รหัสแทนโมดูล ใช้งานได้อีกเล็กน้อย แต่จะส่งแผนที่ตอบสนองที่เหมือนกัน

1. ไปที่ Google แผนที่และนำทางจนกว่าแผนที่ที่คุณต้องการแสดงจะเต็มหน้าจอ
2. เลือกลิงค์แบ่งปันสีน้ำเงินและคัดลอกรหัสจากแผนที่ฝัง
3. เพิ่มรหัสฝังเฉพาะลงในรหัสด้านล่างระหว่างและ
4. เพิ่มรหัสภายใน HTML ของหน้าเว็บของคุณที่คุณต้องการดูแผนที่
5. บันทึกการเปลี่ยนแปลงของคุณ

รหัส:

นี่ไม่ใช่รหัสของฉันฉันพบว่าออนไลน์ แต่ทดสอบในเว็บไซต์ของฉัน มันทำงานได้อย่างมีเสน่ห์และควรทำงานได้ไม่ว่าคุณจะใช้ CMS, HTML, Hugo หรือหนึ่งในภาษาเว็บไซต์หรือเครื่องมือหน้าเว็บอื่น ๆ