Hướng dẫn tích hợp Google Maps vào WordPress một cách đơn giản

Giới thiệu

Google Maps là một công cụ hữu ích giúp người dùng dễ dàng tìm kiếm địa điểm và hướng dẫn đường đi. Việc tích hợp Google Maps vào trang web WordPress không chỉ tạo sự thuận tiện cho người dùng mà còn cải thiện trải nghiệm sử dụng. Bài viết này sẽ hướng dẫn bạn cách tích hợp Google Maps vào WordPress một cách đơn giản và hiệu quả.

Các bước chuẩn bị

Trước khi tiến hành tích hợp, bạn cần chuẩn bị một số thông tin và tài nguyên sau:

  • Tài khoản Google để tạo API Key.

  • Truy cập vào trang quản lý Google Cloud Platform.

  • Hệ thống WordPress đang hoạt động với theme của bạn.

Tạo API Key trên Google Cloud Platform

Để có thể sử dụng Google Maps trên trang web của bạn, trước tiên bạn cần tạo một API Key. Dưới đây là các bước để thực hiện:

  1. Đăng nhập vào tài khoản Google và truy cập vào Google Cloud Console.

  2. Chọn hoặc tạo một dự án mới.

  3. Đi đến mục “API & Services” và chọn “Library”.

  4. Tìm kiếm “Maps JavaScript API” và kích hoạt nó.

  5. Trở lại mục “API & Services” và chọn “Credentials”.

  6. Chọn “Create Credentials” và chọn “API Key”.

  7. Sao chép API Key vừa tạo.

Thêm Google Maps vào WordPress

Có nhiều cách để tích hợp Google Maps vào trang web WordPress. Bạn có thể sử dụng shortcode, widget hoặc trực tiếp chèn mã vào bài viết hoặc trang. Dưới đây là hướng dẫn chi tiết cho từng cách:

1. Sử dụng shortcode

Nếu theme của bạn hỗ trợ shortcode, bạn có thể dùng mã dưới đây để chèn Google Maps vào bài viết hoặc trang:

[google_map lat="10.762622" lng="106.660172" zoom="14"]

Trong đó:

  • lat: Vĩ độ của địa điểm bạn muốn hiển thị.

  • lng: Kinh độ của địa điểm.

  • zoom: Mức độ zoom, giá trị từ 0 đến 21.

2. Sử dụng widget

Nếu bạn muốn hiển thị Google Maps trong vùng sidebar hoặc footer, bạn có thể sử dụng widget. Dưới đây là cách thực hiện:

  1. Truy cập vào mục “Appearance” (Giao diện) > “Widgets” trong bảng điều khiển WordPress.

  2. Kéo thả widget “Custom HTML” vào khu vực bạn muốn hiển thị Google Maps.

  3. Chèn mã nhúng sau vào widget:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.1153323505373!2d106.65814411479751!3d10.762622155278451!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752716d43e257b%3A0x9388aeb401bfa6!2zQ2h1bmcgQWxjZXNzb3Ih!5e0!3m2!1svi!2s!4v1616176579401!5m2!1svi!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

  1. Bấm “Save” để lưu lại.

3. Chèn mã vào bài viết hoặc trang

Nếu bạn muốn tích hợp Google Maps trực tiếp vào nội dung bài viết hoặc trang, hãy làm theo các bước sau:

  1. Vào mục “Bài viết” hoặc “Trang” và tạo mới hoặc chỉnh sửa một bài viết hoặc trang hiện có.

  2. Tại điểm mà bạn muốn chèn Google Maps, chuyển sang tab “Text” (hoặc “Code” nếu sử dụng trình soạn thảo mới).

  3. Chèn mã nhúng Google Maps vào.

  4. Bấm “Cập nhật” hoặc “Đăng” để lưu thay đổi.

Tùy chỉnh kích thước và vị trí Google Maps

Bạn có thể tùy chỉnh kích thước và vị trí của bản đồ bằng cách thay đổi giá trị width và height trong thẻ <iframe>. Ví dụ:

width="100%" height="400"

Điều này giúp bản đồ tự động điều chỉnh kích thước theo kích thước của màn hình thiết bị.

Kết luận

Tích hợp Google Maps vào WordPress không chỉ giúp cải thiện trải nghiệm người dùng mà còn làm cho trang web của bạn trở nên thân thiện hơn. Với những hướng dẫn trên, bạn có thể dễ dàng thực hiện được điều này mà không cần có nhiều kiến thức kỹ thuật. Hy vọng bài viết sẽ giúp bạn xây dựng một trang web đẹp và chuyên nghiệp hơn.