Hướng dẫn chèn Google Maps vào wordpress

Hướng dẫn chèn Google Maps vào wordpress

Cho dù bạn điều hành một doanh nghiệp, tổ chức, sự kiện hay chỉ cần giới thiệu bản đồ vì bất kỳ lý do nào khác. Việc biết cách thêm Google Maps vào WordPress có thể hữu ích. Hơn thế nữa, với plugin phù hợp, bạn thậm chí có thể tạo bản đồ tùy chỉnh. Sự tương tác để hiển thị tốt hơn vị trí thực của bạn hoặc thông tin quan trọng khác.

Trong hướng dẫn này, chúng tôi sẽ giới thiệu cho bạn plugin Otter Blocks. Một công cụ tuyệt vời và thân thiện với người mới bắt đầu. Sau đó, chúng tôi sẽ hướng dẫn bạn cách sử dụng nó để thêm Google Maps vào WordPress. Hãy cùng xem!

Các bài viết liên quan:

Giới thiệu khối rái cá Khối Google Maps

Cách đơn giản nhất để chèn Google Maps vào WordPress chính là ứng dụng các plugin thích hợp. Ví dụ: Otter Blocks Chúng tôi đã xây dựng plug-in này với mục đích. Giúp người dùng dễ dàng tạo ra và tùy biến bản đồ thỏa mãn cho nhu cầu của họ. Trình tạo giao diện bản đồ cho user thuận tiện cho việc có thể tự ý tạo bao nhiêu bản đồ tùy ý và có thể chỉnh sửa lưu hay thậm chí copy nó.

Những chức năng chính như sau:

Tùy biến các yếu tố trên bản đồ, gồm cả vị trí, khả năng có thể zoom và những tính năng khác.

Tùy chỉnh nhiều kiểu cho bản đồ bằng cách phối màu và thêm nhiều tùy chọn khác.

Ghim nhiều tọa độ và điểm đánh dấu maps của riêng bạn.

Dễ dàng lưu giữ và thiết lập bộ sưu tập  bản đồ của bạn.

Giá: Otter Blocks là miễn phí.

Phương pháp hướng dẫn chèn Google Maps vào wordpress (gồm 3 bước)

Bây giờ, chúng ta sẽ làm quen với việc tạo bản đồ cho website. Bạn sẽ cần chuẩn bị việc thiết lập Otter Blocks. Trên website WordPress của bạn tương tự như các plug- in khác. Tiếp theo, bạn chỉ cần thao tác theo từng bước chúng tôi đã chuẩn bị cho bạn bên dưới là bạn sẽ thành công thôi !

Xem thêm 5 plugin quét lỗ hổng bảo mật tốt nhất của WordPress

Bước 1: Chèn key API Google Maps của chính bạn vào page WordPress

Sau khi bạn đã tiến hành thiết lập Otter Blocks, sẽ có một phần mới có tên là Otter trong tab Thiết lập trong trang tổng quan. Khi thực hiện truy cập nó, chúng ta sẽ thấy phần Bản đồ có một hộp cho key API của mình. Hộp này được chèn vào trước khi bạn tiến hành tạo mới bản đồ:

Hướng dẫn chèn Google Maps vào wordpress

Bạn hãy truy cập trang API của Google để tiến hành get 1 key cho mình. Nếu bạn đã có account của google, bạn sẽ bỏ qua bước này và đăng nhập vào luôn trang tiếp theo.

Bên trong bảng thiết lập API của Google, hãy chọn nút Create Project màu xanh lam ở bên phải phần trên của trang:

Hướng dẫn chèn Google Maps vào wordpress

Chọn Tạo trên màn hình tiếp theo. Sau đó, bạn sẽ có thể chọn một tên cho dự án của mình:

Hướng dẫn chèn Google Maps vào wordpress

Click vào nút Create sau đó bạn sẽ  được chuyển sang trang tổng quan. Chọn Bật API và Dịch vụ ở gần đầu màn hình và tìm kiếm “API JavaScript của Google Maps” trong Thư viện API. 

Khi đã thấy những gì hiện ra như hình minh họa bên dưới, hãy bấm vào nút ENABLE:

Hướng dẫn chèn Google Maps vào wordpress

Ở màn hình kế tiếp, click vào nút Tạo thông tin đăng nhập ở bên phải phía trên của màn hình. Sau đó, trên page kế tiếp, chọn vào dòng “Tôi cần bằng chứng xác thực nào”? 

Bạn sẽ nhận được một key API, bạn tiến hành sao chép dòng KEY API đã được cung cấp.

Hướng dẫn chèn Google Maps vào wordpress

Trở lại trang web WordPress và paste key mà bạn đã sao chép trước đó vào hộp Khóa API Google Maps:

Hướng dẫn chèn Google Maps vào wordpress

Và lưu lại những sửa đổi vừa rồi của bạn nhé! Giờ đây, bạn chuẩn bị đủ mọi thứ cho việc xây dựng bản đồ cho riêng bạn.

Xem thêm Cách lên lịch cho bài viết wordpress

Bước 2: Tạo bản đồ mới

Để tạo bản đồ đầu tiên của bạn, hãy chọn khối Google Maps từ phần Otter. Bạn có rất nhiều tùy chọn ngay bây giờ:

Hướng dẫn chèn Google Maps vào wordpress

Việc đầu tiên bạn cần làm là chọn  Thêm để ghim một địa điểm mới của bạn muốn thêm vào . Nó sẽ lấy tọa độ của bạn và ghim vào đây . 

Bạn có thể đặt tên gợi nhớ cho điểm đánh dấu, chọn địa chỉ và kiểu nhà (ví dụ trường học, trạm xe, nhà công cộng hay các quán ăn):

Hướng dẫn chèn Google Maps vào wordpress

Bạn cũng nên thêm và format phần text hiển thị khi người dùng bấm vào các điểm đã ghim:

Hướng dẫn chèn Google Maps vào wordpress

Sau đó, bạn dễ dàng bắt đầu tùy biến cho bản đồ của bạn bằng các lựa chọn khác có thể tìm hiểu thêm trong trình tạo bản đồ. Hãy lưu ý từng chút một để hiểu rõ hơn.

Định vị & Thu phóng

Hướng dẫn chèn Google Maps vào wordpress

Để đặt một mức thu phóng và vị trí nhất định cho bản đồ của bạn, bạn có thể chỉ cần phóng to và thu nhỏ bản đồ mẫu và kéo nó đến bất cứ nơi nào bạn muốn. Cách bạn cài đặt nó trong trình edit là cách nó sẽ hiện ra cho người dùng theo dõi.

Bạn cũng có thể thay đổi loại bản đồ, từ địa hình, vệ tinh, đường hoặc kết hợp.

Kiểm soát

Hướng dẫn chèn Google Maps vào wordpress

Trong phần Control, bạn có thể tùy chọn loại nào thân thiện và dễ tiếp cận cho người dùng. Điều này bao gồm việc rằng họ có thể rê bản đồ và họ có tùy chỉnh chế độ xem phố hay không.

Phong cách

Hướng dẫn chèn Google Maps vào wordpress
Hướng dẫn chèn Google Maps vào wordpress

Trong phần Kiểu, bạn có thể chỉnh sửa bản đồ của mình trông như thế nào. Bạn cũng có thể chọn từ một số kiểu bản đồ được xác định trước hoặc thậm chí tạo của riêng bạn.

Tuy nhiên, bằng cách điều chỉnh các cài đặt trên, bạn sẽ có thể tạo một bản đồ vừa phong cách vừa hữu ích cho khách truy cập của mình.

Xem thêm Cách cài đặt Google Analytics trong WordPress cho người mới bắt đầu

Bước 3: Ghim tọa độ bản đồ trên website

Sau khi bản đồ của bạn được chỉnh sửa hãy lưu nó lại và tùy chỉnh các kích thước như chiều dài, chiều rộng hoặc có thể xóa bản đồ.

Hướng dẫn chèn Google Maps vào wordpress

Nhấn xuất bản và thế là xong! Bản đồ đã sẵn sàng bây giờ bạn sẽ hiện nó lên cho người dùng  theo dõi vị trí trên website của bạn:

Hướng dẫn chèn Google Maps vào wordpress
Hướng dẫn chèn Google Maps vào wordpress

Bạn cũng có thể ghim nhiều tọa độ cho website của ban. Chằng hạn như cơ sở kinh doanh bạn có nhiều chi nhánh, thì việc này là hoàn toàn cần thiết để mọi người có thể căn cứ vào điểm nào gần họ để quyết định tới chi nhánh đó. Đó là tất cả những gì bạn cần biết trong việc chèn Google Maps vào WordPress.

Phần kết luận

“Hiển thị, không nói” là một quy tắc thông minh cần tuân theo trên trang web của bạn. Chẳng hạn, bao gồm một bản đồ, cho khách truy cập biết chính xác cách doanh nghiệp hoặc các tổ chức của bạn thích hợp với cộng đồng của họ hay không. 

Để ứng dụng kỹ thuật này trên website, bạn có thể thử trải nghiệm plug-in Otter Blocks hỗ trợ chèn Google maps vào page WordPress. Bạn thực hiện ngắn gọn theo các hướng dẫn sau đường phân thành 3 bước:

Chèn Key API Google Maps của bạn vào page WordPress.

Create một bản đồ mới và dung plug- in để định cấu hình.

Dùng đoạn mã mà bạn vừa được cung cấp gắn trực tiếp lên website của bạn.

Xem thêm Hướng dẫn sử dụng WordPress cho người mới bắt đầu

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, thiết kế web giá rẻ

Leave a Reply