วิธีเพิ่ม Google Maps ลงในหน้า Digily Link

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

ตัวเลือกที่ 1 ปุ่มเปิดเส้นทางในแอปแผนที่

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

1. เปิด Google Maps ค้นหาธุรกิจของคุณ แตะแชร์ แล้วคัดลอกลิงก์
2. ไปที่แดชบอร์ด สร้างลิงก์สั้นโดยใช้ที่อยู่นั้นเป็นปลายทาง แล้วเปิด "เปิดแอปอัตโนมัติบนมือถือ" Digily Link รองรับลิงก์ Google Maps และ Waze ดังนั้นบนโทรศัพท์ที่ติดตั้งแอปไว้ ลิงก์สั้นจะเปิดการนำทางโดยตรง อ่านเหตุผลว่าทำไมฟังก์ชันนี้จึงสำคัญได้ในคู่มือเรื่อง deep linking
3. เพิ่มบล็อกลิงก์ลงในหน้า วางลิงก์สั้น แล้วตั้งข้อความบนปุ่มว่า "ดูเส้นทาง"

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

ตัวเลือกที่ 2 ฝังแผนที่ด้วยบล็อก iframe

บล็อก iframe มีให้ใช้ในแพ็กเกจ Starter และ Pro โดยจะแสดงแผนที่บนหน้าโดยตรง

1. ค้นหาสถานที่ใน Google Maps เปิดเมนูแชร์ แล้วเปลี่ยนไปที่แท็บ "ฝังแผนที่"
2. คัดลอก HTML ที่ Google แสดง คุณต้องใช้เฉพาะที่อยู่ภายใน src="…" ซึ่งขึ้นต้นด้วย https://www.google.com/maps/embed หากต้องการแยกที่อยู่ออกมาให้ง่ายขึ้น ให้วางโค้ดทั้งหมดลงใน ตัวแยกวิเคราะห์ URL
3. เพิ่มบล็อก iframe ลงในหน้า วางที่อยู่นั้นเป็น URL แล้วกำหนดความสูงประมาณ 300 พิกเซล

วางปุ่มดูเส้นทางจากตัวเลือกที่ 1 ไว้ใต้แผนที่โดยตรง แผนที่ช่วยให้เห็นว่าคุณอยู่ที่ไหน ส่วนปุ่มช่วยพาผู้เข้าชมไปถึงที่นั่น

ตัวเลือกที่ 3 ใช้ HTML แบบกำหนดเองสำหรับแผนที่ที่ปรับตามหน้าจอ

บล็อก HTML แบบกำหนดเองมีในแพ็กเกจ Pro และให้คุณควบคุมการแสดงผลได้เต็มที่ รวมถึงทำให้แผนที่คงสัดส่วนบนหน้าจอทุกขนาด วางโค้ดต่อไปนี้ลงในบล็อก แล้วแทนที่ YOUR_EMBED_URL ด้วยที่อยู่จากแท็บ "ฝังแผนที่"

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px"><iframe src="YOUR_EMBED_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe></div>

ค่า padding-bottom ใช้กำหนดรูปทรงของแผนที่ โดย 56,25% จะได้สี่เหลี่ยมผืนผ้าอัตราส่วน 16:9 ส่วน 75% จะได้แผนที่อัตราส่วน 4:3 ที่เกือบเป็นสี่เหลี่ยมจัตุรัส และ 100% จะเป็นสี่เหลี่ยมจัตุรัส แอตทริบิวต์ loading="lazy" ช่วยไม่ให้แผนที่ทำให้หน้าโหลดช้าก่อนผู้เข้าชมเลื่อนมาถึง หากคัดลอกโค้ดมาจากที่อื่น ควรจัดระเบียบด้วย ตัวลดขนาด HTML ก่อน เพื่อไม่ให้การขึ้นบรรทัดที่หลงมาเพียงจุดเดียวทำให้บล็อกใช้งานไม่ได้

ควรเลือกวิธีไหน

เคล็ดลับสำหรับธุรกิจในพื้นที่

• ใส่รหัสไปรษณีย์ไว้ในบล็อกย่อหน้าเหนือแผนที่ สำหรับผู้ที่ต้องการพิมพ์ลงในแอปของตัวเอง
• เพิ่มบล็อกเวลาทำการ ซึ่งมีให้ใช้ในแพ็กเกจ Free เพื่อให้ผู้เข้าชมรู้ว่าควรออกเดินทางตอนนี้หรือไม่
• ใช้แผนที่เพียง 1 รายการต่อหน้า การฝังแผนที่ 2 รายการจะทำให้เวลาโหลดเพิ่มเป็น 2 เท่า แต่แทบไม่ได้เพิ่มประโยชน์
• พิมพ์ QR ของหน้าไว้ติดหน้าร้านและใส่ในใบปลิว ดูรูปแบบหน้าสำหรับสถานที่ได้ในบทความ การทำ link in bio สำหรับธุรกิจขนาดเล็กในไทย
• ทดสอบปุ่มดูเส้นทางจากภายใน Instagram ทั้งบน iPhone และโทรศัพท์ Android ส่วน ตัวตรวจสอบการเปลี่ยนเส้นทาง URL จะแสดงว่าลิงก์สั้นทำงานอย่างไรบนคอมพิวเตอร์

ร้านป๊อปอัป ตลาดนัด และงานอีเวนต์

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

Apple Maps และ Waze

การเชื่อมไปยังแอปรองรับที่อยู่จาก Google Maps และ Waze สำหรับผู้ใช้ iPhone ที่เลือกใช้ Apple Maps ลิงก์ธรรมดาไปยัง maps.apple.com ซึ่งมีที่อยู่รวมอยู่ด้วยจะเปิด Apple Maps บน iPhone และเปิดแผนที่บนเว็บในอุปกรณ์อื่น ลิงก์ของ Apple ทำงานเช่นนี้ได้โดยไม่ต้องตั้งค่า ปุ่ม 2 ปุ่ม ได้แก่ "Google Maps" และ "Apple Maps" รองรับโทรศัพท์แทบทุกเครื่องในไทย และจำนวนคลิกจะบอกได้ว่าผู้เข้าชมของคุณใช้บริการใดจริง

คำถามที่พบบ่อย

ต้องใช้คีย์ Google Maps API ไหม

ไม่ต้อง โค้ดจาก "ฝังแผนที่" และลิงก์สำหรับแชร์ใช้งานได้ฟรีโดยไม่ต้องมีคีย์ API คีย์จำเป็นเฉพาะสำหรับนักพัฒนาที่สร้างแอปพลิเคชันแผนที่ของตัวเอง

แสดงหมุดมากกว่า 1 จุดได้ไหม

ได้ ให้สร้างแผนที่แบบกำหนดเองใน Google My Maps ใส่สถานที่ทั้งหมด แชร์เป็นสาธารณะ แล้วนำที่อยู่สำหรับฝังไปใช้ในบล็อก iframe หรือบล็อก HTML แบบกำหนดเอง

การฝังแผนที่จะทำให้หน้าโหลดช้าลงไหม

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

แพ็กเกจ Free ทำได้ไหม

ทำปุ่มดูเส้นทางได้ ส่วนบล็อก iframe ต้องใช้ Starter และบล็อก HTML แบบกำหนดเองต้องใช้ Pro หน้า แพ็กเกจ แสดงรายละเอียดว่าแต่ละแพ็กเกจมีอะไรให้ใช้บ้าง

ถ้าย้ายสถานที่ต้องทำอย่างไร

เปลี่ยนปลายทางของลิงก์สั้นที่อยู่หลังปุ่มดูเส้นทาง แล้วแทนที่ที่อยู่สำหรับฝังแผนที่ สื่อที่พิมพ์ไว้ไม่ต้องเปลี่ยน

ตรวจสอบก่อนเผยแพร่

• ปุ่มดูเส้นทางเปิดแอปแผนที่บนโทรศัพท์ และเปิดหน้าแผนที่บนคอมพิวเตอร์
• แผนที่ที่ฝังไว้แสดงหมุดถูกต้อง และพอดีกับความกว้างของหน้าบนโทรศัพท์
• มีรหัสไปรษณีย์และเวลาทำการอยู่บนหน้า
• มีแผนที่เพียง 1 รายการบนหน้า
• ทดสอบจากภายใน Instagram แล้ว ไม่ได้ทดสอบเฉพาะในเบราว์เซอร์