Tích hợp tự động hoàn thành địa chỉ với Goong

Giới thiệu về Goong

Goong.io là nền tảng bản đồ và dữ liệu vị trí do người Việt phát triển, cung cấp các API chất lượng cho:

• Gợi ý địa chỉ (Autocomplete)
• Tìm kiếm địa điểm
• Tính khoảng cách, chỉ đường
• Truy xuất tọa độ và địa chỉ ngược (Geocoding/Reverse Geocoding)

Đặc biệt phù hợp với ứng dụng web, mobile phục vụ người dùng Việt.

Bắt đầu sử dụng Goong Autocomplete

Đầu tiên, để bắt đầu sử dụng, bạn đăng kí tài khoản nhé.

Đến Goong

Sau khi đăng kí, Goong sẽ xác nhận tài khoản của bạn sau 24 giờ. Nếu bạn muốn xác nhận nhanh hơn, hãy liên hệ trực tiếp Goong thông qua Zalo nhé.

Tạo API Key

Để sử dụng, bạn cần tạo API Key.

JavaScript

Có nhiều cách tích hợp Goong, ở đây mình ví dụ JavaScript.

async function grabAddress(searchTerm) {
    const APIKey = 'API Key của bạn';
    const searchUrl = `https://rsapi.goong.io/place/autocomplete?input=${encodeURIComponent(searchTerm)}&api_key=${APIKey}`;

    try {
        const response = await fetch(searchUrl);
        if (!response.ok) throw new Error(`Lỗi HTTP: ${response.status}`);

        const data = await response.json();
        goongCallbackSearch(data);
    } catch (error) {
        console.error('Lỗi khi gọi API:', error);
    }
}

function goongCallbackSearch(response) {
    const searchResults = response.predictions || [];

    if (searchResults.length > 0) {
        // Xử lý dữ liệu ở đây
        console.log('Kết quả:', searchResults);
    } else {
        console.log('Không có kết quả phù hợp.');
    }
}

Lưu ý: Bạn cần dán API Key của bạn vào biến APIKey và tự thêm đoạn mã xử lí dữ liệu trả về nhé.

Ví dụ

Để sử dụng, các bạn chỉ cần gọi.

grabAddress('ho hoan kiem');

Ứng dụng thực tế

Bạn có thể dùng đoạn mã này để:

• Gợi ý địa chỉ trong form đặt hàng WooCommerce
• Tự động hoàn thành địa chỉ trong form đăng ký, form cập nhật thông tin
• Tùy biến UX/UI bằng cách hiển thị gợi ý ngay dưới ô input

Bạn có thể tham khảo thêm tài liệu tại đây nhé.

Kết luận

Việc tích hợp Goong Autocomplete giúp bạn:

• Tăng trải nghiệm người dùng
• Rút ngắn thời gian nhập liệu
• Hạn chế lỗi sai địa chỉ

Nếu bạn đang xây dựng website tại Việt Nam, Goong là một lựa chọn thông minh thay thế Google Maps API.

Chúc các bạn thành công!