Khi bạn làm Website cho mục đích kinh doanh, để tạo sự thuận lợi cho khách hàng, website cần bổ sung thêm bản đồ. Sau đây, Môi Trường Số chia sẻ cách nhúng bản đồ Google Map cực kỳ đơn giản vào website WordPress.
Tại sao cần nhúng bản đồ Google Map vào website?
Như chúng ta biết, thông tin trên website là cơ sở để tạo uy tín cho doanh nghiệp. Ngoài địa chỉ liên hệ, điện thoại liên lạc, email… Thì bản đồ vị trí (MAP) của doanh nghiệp cực kỳ quan trọng. Từ MAP này, khách hàng có thể khai thác thêm thông tin doanh nghiệp. Thậm chí, khách hàng có thể đến trực tiếp cơ sở dựa vào đường đi trên bản đồ.
Ngoài ra, đối với Google Map, doanh nghiệp có thể cung cấp thêm rất nhiều thông tin. Có thể bao gồm hình ảnh, trang web, thời gian mở cửa, thời gian nghỉ …
Làm thế nào để có thể nhúng bản đồ Google Map vào website?
Có nhiều cách để nhúng Google Map vào website, như dùng Plugin, tạo một Widget… Nhưng trong bài viết này, giới thiệu với các bạn cách cực kỳ đơn giản mà không phải ai cũng biết.
Bước 1: Lấy vị trí Google Map cần nhúng
Các bạn lên google, nhập tên doanh nghiệp của bạn (nếu chưa có, các bạn vào https://google.com/map để tạo. Giả sử mình cần địa chỉ Map của “Cây giống quyền mai“. Tiếp theo, các bạn chọn Share như hình dưới đây:
Ở bước kế tiếp, các bạn chọn Embed a map > Chọn COPY HTML
Bước 2: Lựa chọn vị trí cần đặt Google Map trên website
Thông thường, Google Map thường đặt ở chân trang (footer), sidebar, hoặc một phần trong nội dung trang liên hệ. Ở đây, chúng ta cùng thực hiện theo cách đặt ở chân trang.
Trong cửa sổ thiết kế chân trang bằng công cụ UX Builder của theme Flatsome, chọn section, row hay column cần nhúng Map. Ví dụ này, chúng ta thêm vào cột thứ 3 bên tay phải của chân trang.
Chọn Add to Column > Nhập html vào Elements > Chọn HTML
Bước 3: Dán mã nhúng Google Map vào thẻ HTML
Từ link google map chúng ta copy ở Bước 1, các bạn dán (Ctrl+V) vào ô nhập mã HTML
Sau đó các bạn điều chỉnh lại thông số Width (chiều rộng) và Height (chiều cao) trong mã trên cho phù hợp với cấu trúc hiển thị của phần chân trang.
Cuối cùng, các bạn chọn Apply > Update để cập nhật thiết kế của mình. Đến đây chúng ta đã hoàn thành việc nhúng bản đồ Google Map vào website rất đơn giản phải không? Chúc các bạn thành công nhé.
Cùng chuyên mục: