Thêm Google Maps vào website sử dụng plugin Meta Box

Thông thường, khi bạn muốn thêm bản đồ để chỉ đường đến địa điểm công ty bạn chẳng bạn, bạn có thể dùng 1 trong 2 cách phổ biến đó là nhúng mã Google Maps trực tiếp lên website hoặc sử dụng một plugin hỗ trợ như hướng dẫn trong bài viết này. Nhưng nếu như website của bạn là một trang kiểu listing page, liệt kê danh sách các quán ăn có trong thành phố và bạn cần thể hiện bản đồ cho từng quán ăn đó thì cả hai cách trên lại không khả thi lắm.

Trong bài viết này, mình sẽ giới thiệu cho bạn thêm một cách thứ 3, giúp bạn có thể thêm bản đồ vào từng bài viết hoặc từng trang trên website một cách đơn giản, đó là sử dụng Meta Box plugin.

Meta Box có cung cấp một loại field dạng Map giúp bạn hiển thị bản đồ (Google Maps hoặc Open Street Map). Bạn chỉ cần tạo 1 field nhập địa chỉ cùng với 1 field dạng Map này và cho phép hiển thị 2 field này với Post, Page hoặc một loại Post type nào đó của bạn. Khi đó, ở mỗi bài viết sẽ hiển thị 2 field này để bạn điền thông tin địa chỉ và hiển thị bản đồ tương ứng cho bài viết đó.

Cụ thể cách làm như sau:

Bước 1: Lấy Google Maps API Key

Bạn hãy làm theo các hướng dẫn của Google tại đây để lấy được API Key. Sau khi hoàn tất các bước như hướng dẫn, bạn sẽ lấy được một API Key như trong ảnh sau:

Google Maps API Key

Hãy copy đoạn mã API Key này để sử dụng cho bước sau nhé.

Bước 2: Tạo custom fields để nhập địa chỉ

Quay trở lại admin dashboard trên website của bạn, tìm đến mục Meta Box > Custom Fields > Add New.

Trong giao diện Add New Field Group mà bạn đang thấy, tại tab Fields, bạn đặt tên cho field group của mình nhé, và lần lượt tạo 2 custom field như dưới đây

Tạo field dạng Text với Label là ‘Address’ để điền địa chỉ:

Bạn nhấn chọn loại field dạng Text phía bên cột trái và chỉnh sửa các thông tin cho field:

Tạo field dạng Text với Label là 'Address'

Tạo field dạng Google Maps để hiển thị bản đồ theo địa chỉ ở field ‘Address’ trên:

Vì mình sử dụng Google Maps API Key nên mình chọn loại field là Google Maps. Tuy nhiên, Meta Box có hỗ trợ cả Open Street Map, nên bạn có thể tùy ý lựa chọn.

Bạn tìm loại field Google Maps ở bên cột trái, điền API Key vào ô Google Maps API Key, và nhớ điền ID của field Address vừa tạo vào ô Address field nhé.

API Key của Google Maps API Key

Cho phép các field trên hiển thị với Post, Page, hoặc loại Post Type bạn muốn

Sau khi tạo 2 custom fields xong, bạn di chuyển sang tab Settings, và ở mục Post types, bạn chọn Post, hoặc Page, hoặc một loại Post types bất kì mà bạn muốn nhé.

Hiển thị Post, Page, hoặc Post Type

Cuối cùng, nhấn Save Changes.

Bây giờ, bạn có thể chỉnh sửa một bài viết bất kỳ thuộc loại post type mà bạn đã chọn. Bạn sẽ thấy 2 trường thông tin bạn vừa tạo. Bạn hãy nhập thử địa chỉ nhé.

edit any post with the post type

Bước 3: Hiển thị bản đồ ra Frontend

Ở đây, mình dùng WooCommerce cho sản phẩm trên website của mình, nên mình sẽ cần dùng hook riêng của WooCommerce và đặt đoạn code dưới đây vào file functions.php.

add_action( 'woocommerce_after_single_product', 'add_google_map' );
function add_google_map() {
    $args = array(
        'zoom'         => 14,
        'marker'       => true,
    );
    $map = rwmb_meta( 'map', $args );
    echo $map;
}

Trong đó, 'map' là ID của field Map ở trên.

Nếu bạn không dùng WooCommerce thì bạn thêm một đoạn code như sau vào file single-[tên-post-type].php.

$args = array(
    'zoom'     => 14,
    'marker'   => true,
);
echo rwmb_meta( 'map', $args );

Bạn có thể tham khảo thêm một số thuộc tính khác ở đây để hiển thị bản đồ cho phù hợp với website của bạn.

Bây giờ, bạn sẽ thấy bản đồ hiển thị trên trang của bạn.

Hiển thị bản đồ trên trang

Lời cuối

Vậy là bạn đã hoàn thiện việc thêm bản đồ lên website của bạn rồi đó. Làm theo cách này, bạn có thể thêm được từng bản đồ cho mỗi bài viết riêng của bạn khá dễ dàng. Nếu cách làm này có ích với bạn, hãy để lại lời nhắn cho chúng mình ở phần comment dưới đây nhé. Và hãy nhớ theo dõi thêm các bài hướng dẫn sau của mình nha.

 

 

 

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 *