Trong bài viết này, tinhocvanphong sẽ hướng dẫn bạn cách dễ dàng thêm công cụ định vị cửa hàng Google Maps trong WordPress.
1. Thêm Google Maps vào trang web của bạn miễn phí
Phương pháp này dễ dàng hơn và miễn phí. Điểm bất lợi là bạn không thể hiển thị nhiều cửa hàng trên một bản đồ.
Trước tiên, bạn cần truy cập trang web Google Maps trên máy tính của mình. Tiếp theo, nhập địa chỉ cửa hàng của bạn vào trường tìm kiếm và Google Maps sẽ hiển thị địa chỉ đó trên bản đồ với một điểm đánh dấu được ghim trên đó.
Thao tác này sẽ hiển thị cửa sổ bật lên nơi bạn cần chuyển sang tab ‘Nhúng bản đồ’. Bây giờ bạn sẽ thấy vị trí đã tìm kiếm của mình trên bản đồ với mã HTML.
Bây giờ hãy chuyển đến khu vực quản trị của trang web WordPress của bạn. Khi đã ở trong khu vực quản trị, hãy tiếp tục và chỉnh sửa bài đăng hoặc trang mà bạn muốn hiển thị bản đồ vị trí cửa hàng.
Trên màn hình chỉnh sửa bài đăng, bạn cần thêm một khối HTML tùy chỉnh.
Trong vùng văn bản của khối HTML tùy chỉnh, bạn cần dán mã bạn đã sao chép từ Google Maps.
Bây giờ bạn có thể chuyển sang tab xem trước để xem Google Maps được nhúng vào trang của bạn. Nó sẽ hiển thị vị trí cửa hàng của bạn được đánh dấu trên bản đồ với các liên kết đến chỉ đường hoặc để lưu vị trí.
2. Thêm công cụ định vị cửa hàng Google Maps bằng một plugin WordPress
Phương pháp này được khuyến nghị cho những người dùng muốn hiển thị nhiều vị trí cửa hàng trên Bản đồ Google. Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WP Store Locator.
Đây là một plugin Google Maps miễn phí cho phép bạn tạo một bản đồ tùy chỉnh với nhiều vị trí cửa hàng và các trường tùy chỉnh.
Nhược điểm của phương pháp này là nó yêu cầu bạn thêm khóa API. Bạn sẽ cần cung cấp thông tin thanh toán của mình để sử dụng khóa API. Để biết giá cả và thông tin khác, vui lòng xem trang web Nền tảng Google Maps .
Bước 1. Tạo khóa API Google Maps
Để sử dụng plugin WP Store Locator, bạn sẽ cần tạo hai khóa API. Khóa đầu tiên được gọi là khóa API trình duyệt và khóa thứ hai được gọi là Khóa máy chủ.
Trước tiên, hãy bắt đầu với Trình duyệt. Nhấp vào liên kết Bảng điều khiển dành cho nhà phát triển của Google và nó sẽ đưa bạn đến trang web API của Google với tất cả các API bắt buộc được bật.
Bạn cần tạo một dự án mới và cho nó một cái tên giúp bạn xác định dự án. Sau đó, bạn sẽ phải đợi trong giây lát khi bảng điều khiển tạo dự án cho bạn.
Tiếp theo, bạn cần cung cấp tiêu đề cho khóa API của mình, để bạn có thể dễ dàng xác định nó là khóa api của trình duyệt cho dự án Google Maps của bạn.
Tiếp theo, bạn cần đặt Application Restrictions’’ thành ‘HTTP Referrers’’. Bên dưới, bạn cần đặt trường ‘Accept requests from’ cho tên miền của mình ở định dạng sau.
https://example.com/*
https://*.example.com/* (if you are using a subdomain)
Cuối cùng, nhấp vào nút ‘Create’. Bảng điều khiển bây giờ sẽ lưu cài đặt của bạn và sẽ hiển thị cho bạn.
Tiếp theo, bạn cần tạo khóa API máy chủ. Nhấp vào liên kết Google Developer Console và nó sẽ đưa bạn trực tiếp đến bảng điều khiển đã bật các API đã chọn.
Sau đó, bạn sẽ được chuyển hướng đến trang cấu hình API.
Bước 2. Thiết lập Plugin định vị cửa hàng WP
Khi bạn đã tạo khóa API của mình, bạn cần phải truy cập trang Store Locator » Settings để thiết lập plugin.
Bây giờ, bạn cần cuộn xuống trên trang cài đặt đến phần ‘Bản đồ’ và nhập điểm bắt đầu của bản đồ.
Có nhiều tùy chọn khác trên trang cài đặt bao gồm kiểu bản đồ, mức thu phóng mặc định, loại bản đồ, bán kính tìm kiếm, quốc gia, v.v. Bạn có thể xem lại chúng và điều chỉnh theo nhu cầu của mình.
Bước 3. Thêm địa điểm cửa hàng
Đi tới Store Locator » New Store để thêm vị trí đầu tiên của bạn.
Bước 4. Thêm bản đồ định vị cửa hàng trong WordPress
Trên màn hình chỉnh sửa bài đăng, bạn cần thêm khối “Shortcode” vào khu vực chỉnh sửa bài đăng. Sau đó, thêm shortcode [wpls] vào bên trong nó.
OK như vậy là đã xong, bạn có thể lưu hoặc xuất bản trang của mình và nhấp vào nút xem trước để xem công cụ định vị cửa hàng Google Maps đang hoạt động.
