Cách thêm bản đồ vào ứng dụng: nhúng, bản đồ tương tác và định vị cửa hàng

Để thêm bản đồ vào ứng dụng, trước hết hãy quyết định bạn cần một bản đồ nhúng tĩnh (một địa điểm với một ghim, như "tìm cửa hàng của chúng tôi") hay một bản đồ tương tác (nhiều ghim lấy từ dữ liệu của bạn, bộ lọc, gom cụm, "gần tôi"). Với một địa điểm duy nhất, bản đồ nhúng là cách nhanh nhất và, với Maps Embed API của Google, là miễn phí. Với bản đồ tương tác, hãy dùng một thư viện JavaScript bản đồ — Google Maps JavaScript API, Mapbox GL JS, hoặc Leaflet mã nguồn mở với một nhà cung cấp ô bản đồ — lưu vĩ độ và kinh độ của mỗi địa điểm trong cơ sở dữ liệu, và giới hạn khóa API của bạn vào tên miền của chính bạn. Chi tiết về nhà cung cấp dưới đây lấy từ tài liệu của chính họ tính đến tháng 9 năm 2026.

Bạn cần loại bản đồ nào?

Hầu hết website doanh nghiệp nhỏ chỉ cần hàng đầu tiên. Thư mục, sàn giao dịch và trang rao vặt cần hàng thứ ba và thứ tư.

Các lựa chọn của bạn

Google Maps Platform

Hướng dẫn bắt đầu của Google cho biết bạn phải tạo một dự án Cloud đã bật thanh toán và bật các API bạn muốn dùng. Gói trả theo mức dùng của họ cấp các SKU Essentials, bao gồm Dynamic Maps, với hạn mức miễn phí 10.000 sự kiện mỗi tháng, và niêm yết Dynamic Maps ở mức 7,00 USD cho mỗi 1.000 sự kiện vượt mức (ở bậc khối lượng đầu tiên). SKU Maps Embed được niêm yết là không giới hạn và miễn phí. Google cũng bán các gói đăng ký hằng tháng. Hãy kiểm tra giá Google Maps Platform để có số liệu hiện tại.

Mapbox

Trang giá của Mapbox liệt kê 50.000 lượt tải bản đồ miễn phí mỗi tháng cho Mapbox GL JS trên web, sau đó là 5,00 USD cho mỗi 1.000 lượt tải. Xem giá Mapbox.

Leaflet và OpenStreetMap

Leaflet tự mô tả là một thư viện JavaScript mã nguồn mở cho bản đồ tương tác thân thiện với thiết bị di động, khoảng 42 KB JavaScript. Nó cần các ô bản đồ (hình ảnh của bản đồ) từ một nguồn nào đó. Máy chủ ô bản đồ công cộng của OpenStreetMap khá hấp dẫn, nhưng chính sách sử dụng ô bản đồ yêu cầu ghi công hiển thị, cấm tải hàng loạt, không cam kết dịch vụ, và cảnh báo các dịch vụ thương mại rằng quyền truy cập có thể bị thu hồi. Với một sản phẩm thật, hãy dùng nguồn ô bản đồ thương mại hoặc tự lưu trữ và làm việc được với Leaflet.

Khóa API: công khai, nhưng có giới hạn

Khóa bản đồ dùng trong trình duyệt thì ai mở trang của bạn cũng thấy. Điều này là bình thường, nhưng có nghĩa là ai đó có thể sao chép khóa và dùng nó trên trang của họ, khiến hóa đơn của bạn tăng lên. Hướng dẫn bảo mật của Google là thêm giới hạn website (HTTP referrer) liệt kê các tên miền của bạn, và giới hạn API để khóa chỉ hoạt động với các API bạn dùng.

Khóa cho các dịch vụ phía máy chủ — ví dụ geocoding hàng nghìn địa chỉ — nên là khóa riêng và được giữ trong bí mật phía máy chủ, không đặt trong trang. Đồng thời hãy đặt cảnh báo ngân sách hoặc hạn ngạch trong bảng điều khiển của nhà cung cấp để một sai sót không biến thành hóa đơn lớn.

Geocoding: đổi địa chỉ thành tọa độ một lần

Bản đồ vẽ theo vĩ độ và kinh độ, không phải địa chỉ. Chuyển địa chỉ thành tọa độ được gọi là geocoding, và hầu hết nhà cung cấp tính phí cho mỗi yêu cầu. Mẫu hiệu quả là:

1. Khi một tin được lưu, geocode địa chỉ của nó trên máy chủ.
2. Lưu vĩ độ và kinh độ trong cơ sở dữ liệu.
3. Bản đồ đọc tọa độ đã lưu; nó không bao giờ geocode khi xem trang.

Kiểm tra điều khoản của từng nhà cung cấp về thời gian được phép lưu kết quả geocoding; chúng khác nhau.

Các prompt mẫu

Một bản đồ nhúng duy nhất:

Trên trang Liên hệ, thêm một bản đồ Google nhúng hiển thị địa chỉ của chúng tôi (12 High Street, Leeds) bằng Maps Embed API, với khóa lưu trong GOOGLE_MAPS_EMBED_KEY. Thêm liên kết "Chỉ đường" bên dưới. Trên điện thoại hiển thị toàn chiều rộng và tải chậm (lazy-load).

Bản đồ tương tác của các tin:

Thêm vĩ độ và kinh độ vào bảng listings. Khi một tin được tạo hoặc địa chỉ thay đổi, geocode nó trên máy chủ bằng khóa trong GEOCODING_API_KEY và lưu tọa độ. Trên trang Duyệt, hiển thị bản đồ với một ghim cho mỗi tin bằng Leaflet, có gom cụm khi các ghim chồng lên nhau. Nhấp vào một ghim sẽ hiện tiêu đề, giá và một liên kết. Bản đồ và danh sách dùng chung các bộ lọc.

"Gần tôi":

Thêm nút "Gần tôi" hỏi vị trí của khách truy cập và hiển thị các tin trong vòng 10 km, sắp xếp theo khoảng cách. Nếu họ từ chối quyền truy cập vị trí, hãy cho phép họ gõ tên thành phố thay thế.

Từng bước

1. Chọn loại bản đồ từ bảng ở đầu.
2. Tạo tài khoản nhà cung cấp và một dự án, rồi chỉ bật các API bạn cần.
3. Tạo khóa: một khóa trình duyệt được giới hạn vào tên miền của bạn (kể cả tên miền xem trước trong lúc xây dựng) và, nếu cần, một khóa máy chủ cho geocoding.
4. Lưu khóa như bí mật và yêu cầu công cụ tạo ứng dụng dùng chúng; khóa trình duyệt vẫn được giới hạn dù cuối cùng nó nằm trong trang.
5. Lưu tọa độ cho mọi địa điểm trong cơ sở dữ liệu.
6. Xây dựng bản đồ: ghim, cửa sổ thông tin, gom cụm và mức thu phóng mặc định hợp lý.
7. Ghép với một danh sách. Chỉ có bản đồ thì khó dùng trên điện thoại và không dễ tiếp cận với trình đọc màn hình. Hãy hiển thị cùng kết quả dưới dạng danh sách.
8. Đặt cảnh báo ngân sách trong bảng điều khiển của nhà cung cấp.
9. Xuất bản và kiểm tra trên tên miền thật, vì giới hạn referrer thường chặn bản đồ cho đến khi tên miền thật được thêm vào.

Những lỗi thường gặp

• Khóa không giới hạn. Ai cũng có thể dùng lại chúng trên website của họ.
• Geocoding khi xem trang. Chậm và tốn kém; hãy geocode một lần khi lưu.
• Quên tên miền thật trong giới hạn khóa. Chạy được trong xem trước, nhưng ra ô xám trống ở môi trường thật.
• Bố cục chỉ có bản đồ. Ghim không có danh sách rất khó dùng trên màn hình nhỏ và không dễ tiếp cận.
• Hàng trăm ghim mà không gom cụm. Không đọc được và chậm.
• Thiếu ghi công. Hầu hết nhà cung cấp bản đồ và ô bản đồ yêu cầu ghi công, và ẩn nó là vi phạm điều khoản của họ.
• Hỏi vị trí khi tải trang. Chỉ hỏi khi người dùng bấm "Gần tôi".

Danh sách kiểm tra

• Đã chọn đúng loại bản đồ cho nhu cầu
• Khóa trình duyệt được giới hạn vào tên miền và API cần thiết
• Khóa phía máy chủ được giữ trong bí mật
• Tọa độ được lưu trong cơ sở dữ liệu, geocode một lần
• Kết quả cũng được hiển thị dưới dạng danh sách
• Có gom cụm khi có nhiều ghim
• Ghi công hiển thị
• Đã đặt cảnh báo ngân sách với nhà cung cấp
• Đã kiểm tra trên tên miền đã xuất bản và trên điện thoại

Thêm bản đồ với Mythex

Mythex không có tích hợp bản đồ tích hợp sẵn; bạn mang khóa nhà cung cấp của riêng mình, thêm nó làm bí mật dự án (hoặc dán khi agent hiển thị thẻ bí mật), và yêu cầu bản đồ trong chat, như mô tả trong Tích hợp bất kỳ API nào. Tọa độ được lưu trong cơ sở dữ liệu của dự án. Hãy nhớ thêm cả tên miền xem trước và tên miền đã xuất bản vào giới hạn website của khóa, và xuất bản lại sau khi thay đổi bí mật.

Bản đồ thường nằm cạnh tìm kiếm và danh sách: xem cách thêm tìm kiếm vào ứng dụng, cách xây dựng website thư mục và cách xây dựng website doanh nghiệp nhỏ.

Câu hỏi thường gặp