Cách chèn bản đồ vào WordPress Website 2021

|

Để website của doanh nghiệp bạn trở nên tin cậy và chân thực hơn khi sở hữu những thông tin thực. Một trong các thông tin mà mang đến “điểm cộng” chân thực cho doanh nghiệp chính là địa điểm. Khi chèn bản đồ vào wordpress thì khách hàng cảm thấy được sự an tâm và biết địa điểm chính xác hơn. Google map là một bản đồ trực tuyến mà có lượng người dùng lớn hàng đầu. Bài viết dưới đây mình sẽ hướng dẫn chèn Google map vào WordPress nhanh nhất.

Hướng Dẫn Chèn Bản đồ Vào WordPress
Hướng Dẫn Chèn Bản đồ Vào WordPress

Google map là gì?

Google map chính là một dịch vụ bản đồ mà được google phát triển nhằm mục đích để thay thế cho biểu đồ giấy thông thường. Với công nghệ ngày càng phát triển thì google map cũng dần trở thành một trong những ứng dụng tiện ích và phổ biến hiện nay. Với những ứng dụng tìm đường và khoảng cách địa lý không bao giờ đơn giản đến thế, chỉ với chiếc smartphone thì bạn cũng có thể nhanh chóng chọn những địa điểm mà bạn muốn đến cũng như dịch vụ ở xung quanh địa điểm đó.

Không những tiện ích cho người sử dụng mà google map cũng còn giúp cho những doanh nghiệp phát triển hoạt động của mình trong kinh doanh trực tuyến. Đặc biệt là tính năng tích hợp cho bản đồ google vào website nhằm giúp cho khách hàng được định vị cũng như tìm được đến địa chỉ của cửa hàng. SEO local của doanh nghiệp cũng góp phần vào việc gia tăng được traffic về website để từ đó gia tăng được doanh thu bán hàng cho doanh nghiệp.

Vì sao chèn bản đồ vào WordPress?

Sau đây là một số lý do nhúng google map vào website:

  • Có tính tương tác cao hơn và khách hàng cũng truy cập cũng có thể di chuyển xung quanh bản đồ để định vị được tốt hơn.
  • Bạn cũng có thể dùng google map để làm nổi bật được một hay nhiều vị trí mà bạn muốn.
  • Khách truy cập cũng có thể dễ dàng chuyển bản đồ tới điện thoại và cũng dễ dàng lưu lại hướng dẫn chỉ đường trên điện thoại.
  • Thêm chèn google map vào wordpress cũng là một tiêu chí SEO local cho doanh nghiệp. Cũng nhờ vào seo local mà cũng giúp thứ hạng của website khi khách hàng ở khu vực liền kề tìm kiếm cũng được tăng cao.

Hướng dẫn tạo Google Maps API key

Đầu tiên thì bạn cũng cần có là API để có thể sử dụng được Google Maps. Sau đây Themenest sẽ hướng dẫn các bước tạo Google API để sử dụng cho Google Maps theo tên miên riêng của bạn một cách hiệu quả nhất.

  1. Truy cập: https://console.developers.google.com/
  1. Click vào select a project để tạo mới project. Một project có thể chứa nhiểu API. Một API có thể dùng cho nhiều website, tùy thuộc vào cài đặt của các bạn. Các bước như hình sau:
Hướng Dẫn Tạo Google Maps Api Key
Hướng Dẫn Tạo Google Maps Api Key
  1. Điền đầy đủ thông tin rồi ấn Create
Nhập Tên Project Của Bạn
Nhập Tên Project Của Bạn
  1. Sau khi Create xong hãy chọn lại project bạn vừa tạo. rồi làm theo các bước khi trong hình:
Hướng Dẫn Chọn Project Tạo Google Maps Api Key
Hướng Dẫn Chọn Project Tạo Google Maps Api Key
  1. Tại đây bạn đã có API mà bạn cần. Hãy copy nó để sử dụng. Ấn Restrict Key để tiếp tục cài đặt.
Copy Api để Cài đặt Google Maps
Copy Api để Cài đặt Google Maps
  1. Tại đây hãy điền cho API để sau này bạn biết nó dùng web nào hay là ứng dụng nào. Bạn chọn Http referrers (web sites) như hình dưới và điền tền miền của bạn vào theo đúng định dạng “.your-domain.com/* và http://your-domain.com/”. Sau đó nhấn save để lưu thông tin.
Điền Cho Api để Google Biết Bạn Dùng Web Nào
Điền Cho Api để Google Biết Bạn Dùng Web Nào
  1. Đây là bước quan trọng nhất. Bước này để enable thư viện nào mà API được phép sử dụng. Bạn sẽ Enable như sau:
  • Google Maps JavaScript API.
  • Google Maps Directions API.
  • Google Maps Embed API.
  • Google Maps Geocoding API.
  • Google Places API Web Service.
Chọn Enable Thư Viện Mà Api được Phép Sử Dụng
Chọn Enable Thư Viện Mà Api được Phép Sử Dụng
  1. Sau khi Enable xong sang tab Dashboard sẽ được như hình:
Giao Diện Sau Khi Bấm Sang Tab Dashboard Khi Cài đặt Google Map Api
Giao Diện Sau Khi Bấm Sang Tab Dashboard Khi Cài đặt Google Map Api

Như vậy là bạn cài đặt và khởi tạo google map API thành công.

Giao Diện Khởi Tạo Google Map Api Thành Công
Giao Diện Khởi Tạo Google Map Api Thành Công

3 cách chèn google map vào website nhanh chóng và đơn giản

Cách 1: Cài đặt Plugin WP Google Maps

  1. Đăng nhập trang quản trị WordPress, vào mục Plugin → Chọn Cài mới.

Tìm plugin với từ khóa: “WP Google Maps”

Plugin Wp Google Maps
Plugin Wp Google Maps
  1. Cài đặt và Kích hoạt Plugin Google Map trên WordPress
    Sau khi kích hoạt thành công, ta sẽ có mục Maps và trang dashboard của Maps như sau:
Giao Diện Khi Cài đặt Plugin Wp Google Maps Thành Công
Giao Diện Khi Cài đặt Plugin Wp Google Maps Thành Công

Bạn tiếp tục chọn Ok! Let’s start

  1. Đây là thông tin khởi tạo sẵn ban đầu
    Chú ý chúng ta sẽ dùng Shortcode ở đây để chèn vào trang muốn hiển thị Map nhé.

Chọn Edit để chỉnh sửa Map của chúng ta.

Chỉnh Sửa Map
Chỉnh Sửa Map
  1. Chọn Maps Engine → Google maps.
Chọn Maps Engine
Chọn Maps Engine
  1. Chọn “enter a Google Maps API key” nếu bạn đã có Google Maps API KeyHoặc bạn không dùng đến Google Maps API Key thì chọn click “here”
Google Maps
Google Maps
  1. Nhập địa chỉ vào ô Address/GPS => chọn Add Marker
Add Marker
Add Marker

Bản đồ sẽ được cập nhật lại sau khi thêm hoàn tất:

Giao Diện Khi Hoàn Thành
Giao Diện Khi Hoàn Thành
  1. Chèn Shortcode (ở bước 2) vào trang muốn hiển thị, ở ví dụ dưới chúng ta muốn thêm vào trang Sample Page.
Giao Diện Khi Chèn Shortcode
Giao Diện Khi Chèn Shortcode

Tiến hành lưu và mở trang để xem kết quả:

Giao Diện Hoàn Thành
Giao Diện Hoàn Thành

Cách 2: Sử dụng tính năng embed (nhúng code) của Google

  1. Truy cập tính năng Embed của Google tại https://www.embedgooglemap.net/. Đây cũng là một trong những cách nhúng google map vào website.
  1. Điền địa chỉ và thiết lập các thông số (Vệ tinh, độ phóng đại, dài rộng) cho map
Thiết Lập Những Thông Số Trên Google Map
Thiết Lập Những Thông Số Trên Google Map

Điền hoàn tất → Chọn Get HTML-CodeCopy đoạn code được tạo ra (đoạn code chứa map và các thông số của nó).

Chèn Get HTML Code Trên Google Map
Chèn Get HTML Code Trên Google Map
  1. Mở trình soạn thảo Trang hoặc bài viết mà chúng ta muốn chèn Map.
Mở Trình Soạn Thảo Và Bài Viết Muốn Chèn
Mở Trình Soạn Thảo Và Bài Viết Muốn Chèn

Ở trên, chèn google map vào html. Ngay dưới đoạn Shortcode Map ở cách trước → Cập nhật trang
Và mở lại trang để xem kết quả tích hợp google map vào website:

Giao Diện Khi Chèn Map Vào Trang
Giao Diện Khi Chèn Map Vào Trang

Cách 3: Sử dụng Mapbox ngay trong trình chỉnh sửa WordPress

  1. Mở trình chỉnh sửa Trang mà chúng ta muốn thêm google map vào website
  1. Thêm khối Map vào vị trí mong muốn:
Thêm Khối Map
Thêm Khối Map

Ở lần đầu sử dụng chức năng này, sẽ hiển thị một cửa sổ có nội dung như sau:

Giao Diện Khi Chèn Khối Map
Giao Diện Khi Chèn Khối Map

Chọn Create an account or log in to Mapbox.

  1. Tạo tài khoản theo hướng dẫn → Get start
Tạo Tài Khoản Mapbox
Tạo Tài Khoản Mapbox
  1. Sau khi đăng nhập thành công, sẽ hiển thị màn hình phía dưới:
Giao Diện Khi đăng Nhập Mapbox
Giao Diện Khi đăng Nhập Mapbox

Chúng ta sẽ Copy token và dán vào trình chỉnh sửa lúc nãy.

  1. Điền địa chỉ chúng ta cần Map vào:
Điền địa Chỉ Chúng Ta Cần Map
Điền địa Chỉ Chúng Ta Cần Map
  1. Lưu chỉnh sửa rồi xem kết quả chèn google map vào website:
Giao Diện Chèn Bản đồ Vào WordPress Website
Giao Diện nhúng google map vào website

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với ThemeNest thông qua các kênh sau:

  • Hotline: 0902 170 180
  • Email: sales@themenest.vn

ThemeNest hiện đang có chương trình khuyến mãi dành cho khách hàng mua theme wordpress. ThemeNest sẽ hỗ trợ quý khách 24/24 với chất lượng theme tốt nhất!

Có tất cả 2 bình luận

2 thoughts on “Cách chèn bản đồ vào WordPress Website 2021

  1. Phong Nguyễn bình luận:

    Mình muốn hỏi bạn là với google map hiện tại làm sao để nhúng lên website wordpress được ạ? Mình đã làm theo hướng dẫn của bạn nhưng gặp lỗi map ko hiển thị được, và theo mình tìm hiểu thì google map ở VN bị chặn nên không dùng được. Mong nhận được câu trả lời!

    • Phan Long bình luận:

      Chào Phong Nguyễn! Bạn có thể cho Themenest biết bạn nhúng loại map nào (sử dụng API hay không), Themenest khuyên bạn đã thử qua cả ba cách trên luôn nhé! Bên cạnh đó, bài hướng dẫn này Themenest làm rất mới nên bạn hoàn toàn yên tâm, vẫn nhúng map vào website wordpress bình thường! Cảm ơn Phong Nguyễn đã quan tâm.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0902 170 180