วิธีเพิ่มแผนที่ให้แอปของคุณ: embed แผนที่แบบโต้ตอบ และตัวค้นหาสาขา

การเพิ่มแผนที่ให้แอป ก่อนอื่นตัดสินใจว่าคุณต้องการ embed แบบคงที่ (สถานที่เดียวพร้อมหมุด เช่น "หาร้านของเรา") หรือ แผนที่แบบโต้ตอบ (หมุดจำนวนมากจากข้อมูลของคุณ ตัวกรอง การจัดกลุ่ม "ใกล้ฉัน") สำหรับสถานที่เดียว embed แผนที่เป็นวิธีที่เร็วที่สุด และด้วย Maps Embed API ของ Google มันฟรี สำหรับแผนที่แบบโต้ตอบ ให้ใช้ไลบรารีแผนที่ฝั่ง JavaScript เช่น Google Maps JavaScript API, Mapbox GL JS หรือ Leaflet โอเพนซอร์สพร้อมผู้ให้บริการ tile เก็บ latitude และ longitude ของแต่ละสถานที่ในฐานข้อมูล และจำกัดคีย์ API ให้ใช้ได้เฉพาะโดเมนของคุณ รายละเอียดของผู้ให้บริการด้านล่างมาจากเอกสารของแต่ละผู้ให้บริการ ณ เดือนกันยายน 2026

คุณต้องการแผนที่แบบไหน?

เว็บไซต์ธุรกิจขนาดเล็กส่วนใหญ่ต้องการเพียงแถวแรก ไดเรกทอรี ตลาดกลาง และเว็บไซต์รายการต่าง ๆ ต้องการแถวที่สามและสี่

ตัวเลือกของคุณ

Google Maps Platform

คู่มือเริ่มต้นของ Google ระบุว่าคุณต้องสร้าง โปรเจกต์ Cloud ที่เปิดการเรียกเก็บเงิน และเปิดใช้ API ที่คุณต้องการ การตั้งราคาแบบจ่ายตามการใช้งานให้ SKU ระดับ Essentials รวมถึง Dynamic Maps ซึ่งมีโควตาฟรี 10,000 อีเวนต์ต่อเดือน และระบุ Dynamic Maps ที่ $7.00 ต่อ 1,000 อีเวนต์ เหนือโควตานั้น (ที่ระดับปริมาณแรก) SKU ของ Maps Embed ระบุว่าไม่จำกัดและฟรี Google ยังขายแพ็กเกจรายเดือนด้วย ตรวจ ราคา Google Maps Platform สำหรับตัวเลขปัจจุบัน

Mapbox

หน้าราคาของ Mapbox ระบุ 50,000 การโหลดแผนที่ฟรีต่อเดือนสำหรับ Mapbox GL JS บนเว็บ จากนั้น $5.00 ต่อ 1,000 การโหลด ดู ราคา Mapbox

Leaflet และ OpenStreetMap

Leaflet อธิบายตัวเองว่าเป็นไลบรารี JavaScript โอเพนซอร์สสำหรับแผนที่แบบโต้ตอบที่เหมาะกับมือถือ ขนาดประมาณ 42 KB ของ JavaScript แต่ต้องใช้ tile (ภาพของแผนที่) จากที่ใดที่หนึ่ง เซิร์ฟเวอร์ tile สาธารณะของ OpenStreetMap น่าดึงดูด แต่ นโยบายการใช้ tile กำหนดให้แสดงการระบุแหล่งที่มาที่มองเห็นได้ ห้ามดาวน์โหลดจำนวนมาก ไม่มีการรับประกันบริการ และเตือนบริการเชิงพาณิชย์ว่าการเข้าถึงอาจถูกยกเลิก สำหรับผลิตภัณฑ์จริง ให้ใช้แหล่ง tile เชิงพาณิชย์หรือที่โฮสต์เองที่ทำงานกับ Leaflet ได้

คีย์ API: สาธารณะ แต่ต้องจำกัด

คีย์แผนที่ที่ใช้ในเบราว์เซอร์มองเห็นได้โดยทุกคนที่เปิดหน้าของคุณ นั่นเป็นเรื่องปกติ แต่หมายความว่ามีคนคัดลอกคีย์ของคุณไปใช้และทำให้บิลพุ่งได้ คำแนะนำด้านความปลอดภัยของ Google คือเพิ่ม การจำกัดตาม HTTP referrer (เว็บไซต์) ที่ระบุโดเมนของคุณ และ การจำกัด API เพื่อให้คีย์ใช้ได้เฉพาะ API ที่คุณใช้

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

Geocoding: แปลงที่อยู่เป็นพิกัดครั้งเดียว

แผนที่วางหมุดตาม latitude และ longitude ไม่ใช่ที่อยู่ การแปลงที่อยู่เป็นพิกัดเรียกว่า geocoding และผู้ให้บริการส่วนใหญ่คิดค่าบริการต่อคำขอ รูปแบบที่มีประสิทธิภาพคือ:

1. เมื่อบันทึกรายการ ให้ geocode ที่อยู่บนเซิร์ฟเวอร์
2. เก็บ latitude และ longitude ไว้ในฐานข้อมูล
3. แผนที่อ่านพิกัดที่เก็บไว้ และไม่เคย geocode ตอนมีการดูหน้า

ตรวจข้อกำหนดของผู้ให้บริการแต่ละราย ว่าคุณเก็บผลลัพธ์ geocoding ได้นานแค่ไหน เพราะแตกต่างกัน

ตัวอย่างพรอมต์

แผนที่ embed เดียว:

ในหน้าติดต่อ เพิ่มแผนที่ Google แบบ embed ที่แสดงที่อยู่ของเรา (12 High Street, Leeds) โดยใช้ Maps Embed API และคีย์ที่เก็บใน GOOGLE_MAPS_EMBED_KEY เพิ่มลิงก์ "นำทาง" ไว้ด้านล่าง ให้กว้างเต็มความกว้างบนโทรศัพท์และโหลดแบบ lazy

แผนที่แบบโต้ตอบของรายการ:

เพิ่ม latitude และ longitude ในตาราง listings เมื่อสร้างรายการหรือที่อยู่เปลี่ยน ให้ geocode บนเซิร์ฟเวอร์ด้วยคีย์ที่เก็บใน GEOCODING_API_KEY และบันทึกพิกัด ในหน้า Browse แสดงแผนที่ที่มีหมุดหนึ่งอันต่อรายการโดยใช้ Leaflet พร้อมการจัดกลุ่มเมื่อหมุดทับกัน คลิกหมุดแล้วแสดงชื่อ ราคา และลิงก์ แผนที่และรายการใช้ตัวกรองชุดเดียวกัน

"ใกล้ฉัน":

เพิ่มปุ่ม "ใกล้ฉัน" ที่ขอตำแหน่งของผู้เยี่ยมชมแล้วแสดงรายการภายใน 10 กม. เรียงตามระยะทาง หากพวกเขาปฏิเสธการเข้าถึงตำแหน่ง ให้ให้พิมพ์ชื่อเมืองแทน

ขั้นตอนทีละขั้น

1. เลือกชนิดแผนที่ จากตารางด้านบน
2. สร้างบัญชีผู้ให้บริการ และโปรเจกต์ แล้วเปิดใช้เฉพาะ API ที่คุณต้องการ
3. สร้างคีย์: คีย์ฝั่งเบราว์เซอร์ที่จำกัดตามโดเมนของคุณ (รวมโดเมนพรีวิวระหว่างสร้าง) และหากจำเป็น คีย์ฝั่งเซิร์ฟเวอร์สำหรับ geocoding
4. เก็บคีย์เป็นความลับ และขอให้เครื่องมือสร้างใช้ คีย์ฝั่งเบราว์เซอร์ยังต้องถูกจำกัดแม้ว่าจะไปอยู่ในหน้า
5. เก็บพิกัด ของทุกสถานที่ในฐานข้อมูล
6. สร้างแผนที่: หมุด ป็อปอัป การจัดกลุ่ม และระดับการซูมเริ่มต้นที่เหมาะสม
7. จับคู่กับรายการ แผนที่อย่างเดียวใช้ยากบนโทรศัพท์และสำหรับโปรแกรมอ่านหน้าจอ แสดงผลลัพธ์เดียวกันเป็นรายการด้วย
8. ตั้งการแจ้งเตือนงบประมาณ ในคอนโซลของผู้ให้บริการ
9. เผยแพร่และทดสอบ บนโดเมนจริง เพราะการจำกัด referrer มักบล็อกแผนที่จนกว่าจะเพิ่มโดเมนจริง

ข้อผิดพลาดที่พบบ่อย

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

เช็กลิสต์

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

การเพิ่มแผนที่กับ Mythex

Mythex ไม่มีการเชื่อมต่อแผนที่ในตัว คุณนำคีย์ของผู้ให้บริการมาเอง เพิ่มเป็นความลับของโปรเจกต์ (หรือวางเมื่อเอเจนต์แสดงการ์ดความลับ) และขอแผนที่ในแชต ตามที่อธิบายใน Integrate any API พิกัดเก็บไว้ใน ฐานข้อมูล ของโปรเจกต์ อย่าลืมเพิ่มทั้งโดเมนพรีวิวและโดเมนที่เผยแพร่แล้วลงในการจำกัด referrer ของคีย์ และเผยแพร่อีกครั้งหลังเปลี่ยนความลับ

แผนที่มักอยู่ควบคู่กับการค้นหาและรายการ ดู วิธีเพิ่มการค้นหาให้แอปของคุณ, วิธีสร้างเว็บไซต์ไดเรกทอรี และ วิธีสร้างเว็บไซต์ธุรกิจขนาดเล็ก

คำถาม