Gắn Google Map vào website cho khách dễ tìm đường

Mỗi lần bàn giao web cho một cửa hàng hay văn phòng có địa chỉ thật, mình đều hỏi một câu: "Anh chị có muốn gắn Google Map vào website để khách bấm là ra đường chỉ tới tận cửa không?" Gần như ai cũng gật. Lý do đơn giản: khách thời nay lười gõ địa chỉ vào ứng dụng bản đồ rồi tự dò, họ muốn thấy ngay cái bản đồ trên trang web, bấm một cái là điện thoại tự mở chỉ đường. Một tấm bản đồ nhỏ đặt đúng chỗ nhiều khi giữ chân được người khách đang phân vân có nên ghé hay không.

Cái hay là việc này không khó như nhiều người tưởng. Bạn không cần biết code, không cần cài thêm gì phức tạp. Google cho sẵn một đoạn mã, bạn copy rồi dán vào đúng chỗ trên web là xong. Bài này mình chỉ từng bước, từ chuyện lấy mã, dán vào đâu, cho tới mấy lưu ý nhỏ mà bỏ qua thì bản đồ hiện ra nhưng không phát huy hết tác dụng.

Vì sao một cửa hàng nên có bản đồ trên web

Trước khi làm, mình muốn bạn hiểu rõ tấm bản đồ đó đáng giá ở chỗ nào, để đặt nó cho đúng chứ không phải gắn cho có.

Thứ nhất là chuyện chỉ đường. Khách xem web trên điện thoại, thấy bản đồ, bấm vào là Google Maps tự mở lên và vạch tuyến đường từ chỗ họ đang đứng tới cửa hàng bạn. Không phải gõ địa chỉ, không sợ gõ sai, không lạc. Với quán ăn, spa, showroom, phòng khám — những nơi khách phải tìm tới tận nơi — đây là thứ gần như bắt buộc.

Thứ hai là sự tin cậy. Một website có địa chỉ thật, có bản đồ thật chỉ đúng vị trí, trông đáng tin hơn hẳn web chỉ ghi mỗi dòng địa chỉ chữ. Khách ngầm hiểu: chỗ này có cửa hàng thật, không phải bán hàng online mập mờ. Cái cảm giác yên tâm đó nhỏ thôi nhưng ảnh hưởng tới quyết định mua.

Thứ ba, và dân làm web hay quan tâm, là local SEO (tối ưu tìm kiếm theo địa phương). Khi web của bạn có địa chỉ và bản đồ trùng khớp với hồ sơ doanh nghiệp trên Google, các tín hiệu về vị trí của bạn nhất quán hơn, giúp Google hiểu bạn ở đâu và phục vụ khu vực nào. Mình nói thẳng để bạn khỏi kỳ vọng quá: gắn bản đồ không phải phép màu đẩy bạn lên top, nhưng nó là một mảnh ghép góp phần, và là mảnh dễ làm nhất.

Lấy mã nhúng bản đồ từ Google Maps

Đây là phần cốt lõi. Mình mô tả bằng chữ rõ ràng để bạn làm theo được ngay, không cần nhìn hình cũng làm được.

Đầu tiên, mở trình duyệt vào Google Maps (maps.google.com). Ở ô tìm kiếm, gõ tên cửa hàng hoặc địa chỉ chính xác của bạn. Nếu cửa hàng đã có hồ sơ trên Google thì gõ tên là ra ngay cái ghim đỏ đúng chỗ. Nếu chưa, bạn gõ địa chỉ và kéo bản đồ cho đúng vị trí.

Khi bản đồ đã hiện đúng chỗ của bạn, bấm vào nút Chia sẻ (Share). Một cửa sổ nhỏ hiện lên với hai thẻ: một thẻ là gửi liên kết, thẻ còn lại tên là Nhúng bản đồ (Embed a map). Bạn chọn thẻ Nhúng bản đồ. Lúc này Google cho bạn chọn kích thước (nhỏ, vừa, lớn hoặc tùy chỉnh) và đưa ra một đoạn mã dài bắt đầu bằng <iframe. Đoạn iframe này (khung nhúng — một cái khung kéo nội dung từ trang khác vào trang của bạn) chính là thứ bạn cần. Bấm Sao chép HTML (Copy HTML) để chép toàn bộ đoạn đó.

Vậy là bạn đã có trong tay đoạn mã bản đồ. Việc còn lại chỉ là dán nó vào đúng chỗ trên web. Mình tóm gọn cả quy trình lấy mã thành các bước cho dễ nhớ:

Dán mã bản đồ vào đâu trên website

Có mã rồi, giờ là chuyện đặt nó ở đâu cho khách dễ thấy nhất. Theo kinh nghiệm bên mình, có hai chỗ vàng.

Chỗ thứ nhất, và quan trọng nhất, là trang liên hệ. Đây là nơi khách chủ động vào khi đã có ý định tới cửa hàng. Bạn đặt bản đồ ngay dưới phần địa chỉ và số điện thoại, để khách đọc xong địa chỉ là thấy luôn bản đồ, bấm chỉ đường được ngay. Trên hầu hết nền tảng, bạn mở trang liên hệ trong khu quản trị, tìm chỗ soạn nội dung, chuyển sang chế độ chỉnh mã (thường có nút gắn nhãn HTML hoặc biểu tượng </>), rồi dán đoạn iframe vừa chép vào. Lưu lại và xem thử ngoài web là thấy bản đồ hiện ra.

Chỗ thứ hai là footer (chân trang — phần đáy hiện ở mọi trang). Nhiều cửa hàng thích để một bản đồ nhỏ ở chân trang để dù khách đang đọc trang nào cũng thấy được vị trí. Cái này tùy gu, không bắt buộc. Nếu để ở footer thì nên chọn bản đồ cỡ nhỏ cho gọn, đừng để to choán hết chân trang.

Một lưu ý mình hay nhắc khách: đừng dán bản đồ vào quá nhiều chỗ. Một cái ở trang liên hệ là đủ làm tròn việc. Thêm một cái nhỏ ở footer thì được. Nhưng nhồi bản đồ vào trang chủ, trang sản phẩm, từng bài viết thì vừa rối mắt vừa làm web nặng và chậm đi, vì mỗi khung bản đồ đều phải tải dữ liệu từ Google về.

Nếu bạn chưa quen với khu quản trị web hay sợ dán nhầm chỗ làm vỡ giao diện, mình khuyên đọc thêm bài cách quản trị website sau khi nhận bàn giao để nắm chắc chỗ nào đụng được chỗ nào nên hỏi thợ. Còn nếu web bạn do bên mình làm, cứ nhắn một câu là bên mình gắn giúp, không tính thêm tiền cho việc nhỏ này.

Đồng bộ với hồ sơ Google Doanh nghiệp

Đây là phần nhiều người bỏ qua, mà bỏ qua thì phí. Bản đồ bạn nhúng vào web nên trỏ đúng tới hồ sơ Google Doanh nghiệp (Google Business Profile — trang thông tin cửa hàng của bạn trên Google, hiện ra khi khách tìm tên bạn) chứ không phải một cái ghim vu vơ bạn tự thả trên bản đồ.

Khác biệt nằm ở chỗ: nếu bạn đã đăng ký hồ sơ doanh nghiệp và gõ đúng tên cửa hàng khi lấy mã nhúng, tấm bản đồ trên web sẽ gắn liền với hồ sơ đó. Khách bấm vào có thể thấy luôn tên cửa hàng, giờ mở cửa, đánh giá sao, hình ảnh. Còn nếu bạn chỉ thả một cái ghim trống vào một địa chỉ, khách bấm vào chỉ thấy mỗi tọa độ trơ trọi, không có thông tin gì thêm.

Vì vậy mình luôn dặn theo thứ tự: đăng ký hồ sơ Google Doanh nghiệp trước, khai đúng tên, đúng địa chỉ, đúng số điện thoại, rồi mới lấy mã nhúng bằng cách tìm chính tên cửa hàng đó. Và một điều cực kỳ quan trọng: tên, địa chỉ, số điện thoại ghi trên web phải khớp từng chữ với hồ sơ Google. Dân trong nghề gọi đây là NAP đồng nhất (Name — tên, Address — địa chỉ, Phone — điện thoại). Lệch nhau, ví dụ web ghi "Số 5 đường Lê Lợi" mà Google ghi "5 Lê Lợi", thì tín hiệu bị nhiễu, không tốt cho tìm kiếm địa phương.

Vài lỗi nhỏ hay gặp và cách tránh

Làm nhiều, mình thấy đi thấy lại mấy lỗi quen. Kể ra để bạn né trước.

Lỗi hay gặp nhất là bản đồ hiện ra nhưng không co giãn theo màn hình (responsive — web tự thay đổi cho vừa màn hình to nhỏ). Trên máy tính thì đẹp, mở điện thoại lại bị tràn ra ngoài hoặc bị cắt. Cái này do đoạn iframe của Google đặt sẵn chiều rộng cố định. Cách xử lý đơn giản nhất là nhờ bên làm web chỉnh cho khung bản đồ tự co theo bề ngang trang, hoặc nếu web bạn dùng nền tảng có sẵn khối bản đồ thì dùng luôn khối đó cho lành.

Lỗi thứ hai là đặt sai vị trí cái ghim. Lúc lấy mã mà bạn kéo bản đồ chưa đúng, hoặc Google nhận nhầm địa chỉ gần giống, thì khách bấm chỉ đường sẽ tới nhầm chỗ. Sửa rất phiền vì khách đã đi lạc rồi. Nên trước khi dán mã, bạn mở thử đường chỉ đường một lần xem nó dẫn tới đâu.

Lỗi thứ ba là để bản đồ làm web chậm. Như đã nói, mỗi khung bản đồ phải tải dữ liệu từ Google. Một cái thì không sao, nhưng dán năm bảy cái rải khắp web thì trang ì hẳn. Nguyên tắc của mình: chỉ đặt bản đồ ở nơi khách thật sự cần biết đường đi, còn lại thôi.

Nếu bạn đang trong giai đoạn chuẩn bị làm web mới, mình gợi ý gom sẵn các thông tin này từ đầu — địa chỉ chuẩn, hồ sơ Google, số điện thoại thống nhất — để lúc dựng web là gắn được ngay. Bài chuẩn bị nội dung trước khi làm website nói kỹ về việc gom thông tin doanh nghiệp trước khi bắt tay vào làm, bạn đọc qua sẽ đỡ phải bổ sung lắt nhắt về sau.

Tóm gọn cho bạn dễ làm theo

Gắn bản đồ vào web là một trong những việc dễ làm mà lợi nhiều, nhất là với cửa hàng có địa chỉ thật. Bạn chỉ cần ba bước lớn: lấy mã nhúng từ Google Maps, dán vào trang liên hệ, và đảm bảo nó khớp với hồ sơ Google Doanh nghiệp của mình. Phần kỹ thuật nhẹ nhàng, phần đáng để tâm là sự chính xác của địa chỉ và tính nhất quán giữa web với hồ sơ Google.

Nếu bạn đang làm web mới hoặc muốn người có nghề lo trọn khâu này cho gọn, bên mình — Thiết Kế Web Giá Rẻ — làm web trọn gói từ 1.990.000đ gói Cơ bản, 3.990.000đ gói Pro, từ 7.990.000đ gói VIP. Mọi gói tặng tên miền, hosting và chứng chỉ bảo mật SSL năm đầu, bàn giao 3–7 ngày, và tất nhiên có gắn sẵn bản đồ chỉ đường cho cửa hàng của bạn. Mời xem bảng giá trọn gói, còn cần tư vấn riêng thì cứ nhắn qua trang liên hệ hoặc gọi Zalo 0777 716 863, bên mình chỉ tận nơi.