Cách Chèn Google Map Vào WordPress Nhanh Nhất
Chèn Google Map vào Website WordPress cho phép người dùng xác định vị trí cửa hàng hoặc doanh nghiệp của bạn trên bản đồ, tìm chỉ đường lái xe hoặc chia sẻ vị trí với bạn bè. Thêm Google Map cửa hàng vào trang web doanh nghiệp hoặc trang web bán hàng của bạn sẽ giúp bạn ngay lập tức giành được sự tin tưởng của người dùng.
Trong bài viết này, mình sẽ hướng dẫn bạn cách dễ dàng chèn Google Map vào WordPress của bạn bằng 2 cách cực kì đơn giản.
Làm sao để có thể thêm Google Map vào WordPress?
Google Maps đã giới thiệu một API trả phí để hiển thị bản đồ trên các trang web. Họ vẫn cung cấp một tùy chọn miễn phí có giới hạn để nhúng bản đồ của Google trên các trang web nhỏ .
Hầu hết các plugin Google Maps dành cho WordPress đều sử dụng API Google để truy xuất và hiển thị bản đồ. Nếu bạn muốn sử dụng một plugin của Google Maps, thì bạn sẽ cần phải đăng ký với nền tảng API của Google và bật tùy chọn thanh toán.
Đây là một dịch vụ trả tiền khi bạn sử dụng dịch vụ, có nghĩa là bạn sẽ bị tính phí dựa trên số lượng lệnh gọi API được thực hiện từ trang web của bạn.
mình sẽ chỉ cho bạn cả phương thức miễn phí và trả phí, phân tích ưu và nhược điểm của từng loại, sau đó bạn có thể chọn phương thức phù hợp nhất với nhu cầu của mình.
Cách 1: Thêm Google Maps vào Website của bạn miễn phí
Theo mình thì cách này là dễ nhất và hoàn toàn 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 cùng một bản đồ.
Nếu bạn mới chỉ có hoặc chỉ muốn thêm 1 cửa hàng trên Google Maps vào WordPress thì đây là cách bạn nên dùng.
Trước tiên, bạn cần truy cập trang web Google Maps trên máy tính. Tiếp theo, nhập địa chỉ cửa hàng của bạn vào ô tìm kiếm và Google Maps sẽ hiển thị địa chỉ đó với một điểm đánh dấu được ghim trên bản đồ.
Đảm bảo là điểm đánh dấu được đặt vào đúng vị trí của bạn. Bạn có thể chọn mức thu phóng bằng cách nhấp vào nút thu phóng để kiểm tra. Khi bạn đã hài lòng, thì nhấp vào nút Chia sẻ từ cột bên trái.
Sẽ có 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.
Nhấp vào liên kết Sao chép HTML để lấy mã nhúng.
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.
Thông thường, người dùng thêm bản đồ vị trí cửa hàng trên trang liên hệ với số điện thoại và giờ mở cửa.
Trên màn hình chỉnh sửa bài đăng, bạn chọn thêm một khối HTML tùy chỉnh.
Trong vùng văn bản của block 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 đánh giá (nếu có), liên kết chỉ đường hoặc lưu vị trí.
Cách 2: Thêm Google Maps bằng Plugins WordPress
Cách này khó hơn. Dành cho những người muốn hiển thị nhiều vị trí cửa hàng trên cùng 1 Bản đồ Google và phải biết 1 chút về công nghệ (Nếu bạn có hoặc là nhân viên kỹ thuật thì quá tốt)
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WP Store Locator . Nếu chưa biết cách cài, bạn có thể xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress .
Đây là một plugin Google Maps miễn phí cho phép bạn chèn bản đồ Google, hiển thị nhiều vị trí cửa hàng và có nhiều tùy chỉnh.
Nhược điểm của phương pháp này là nó yêu cầu bạn phải có khóa API của Google để thêm vào plugin. Bạn sẽ cần cung cấp thông tin thanh toán thì mới có thể sử dụng dịch vụ API của Google Cloud.
Khi tài khoản của bạn mới tạo lần đầu thì sẽ được Google tặng $300 để dùng thử. Để biết giá cả và thông tin khác, vui lòng xem trang web Nền tảng Google Maps .
Sẵn sàng chưa? bắt đầu nhé!
Bước 1. Tạo khóa API Google Maps
Để sử dụng plugin WP Store Locator, bạn sẽ cần tạo 2 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 API máy chủ.
Tạo khóa API Trình Duyệt
Đầu tiên, để tạo API Trình duyệt. Bạn Nhấp vào liên kết này: Bảng điều khiển dành cho nhà phát triển của Google để truy cập trang web API của Google.
Tiếp theo bạn nhấp vào nút Create Project, ở góc phải màn hình.
Ở trang tiếp theo, bạn nhập tên project để dễ phân biệt
Tiếp theo, bạn sẽ được chuyển hướng đến trang chi tiết của project vừa tạo. Bạn nhấp vào APIs & Services
Ở trang kế tiếp bạn nút + CREATE CREDENTIALS > chọn API keym như hình dưới.
Sau đó, ở phần ‘Applications restrictions‘, bạn chọn ‘HTTP refferrers’. Bên dưới, bạn nhập tên miền của bạn vào trường ‘Website restrictions’, có định dạng như sau:
https://tenmiencuaban.vn
Cuối cùng, nhấp vào nút ‘Save’.
API Key của bạn đã được tạo thành công, nhớ Copy và Lưu lại trong notepad hoặc ở đâu đó tiện, để tý nữa còn xài.
Tiếp theo, bạn cần tạo Khóa API máy chủ. Thao tác cũng tương tự như tại API trình duyệt.
Tạo Khóa API Máy Chủ
Một lần nữa bạn chọn tạo thêm 1 dự án bằng cách nhấn nút CREATE PROJECT. Vì bạn đã tạo một dự án rồi nên bạn có thể chỉ cần nhấp vào menu thả xuống là thấy nút để tạo.
Lặp lại các bước như cách tạo API trình duyệt.
Tiếp theo, bạn sẽ được chuyển hướng đến trang chi tiết của project vừa tạo. Bạn nhấp vào APIs & Services
Ở trang kế tiếp bạn nút + CREATE CREDENTIALS > chọn API keym như hình dưới.
Khác nhau là ở bước này, ở phần ‘Applications restrictions‘, bạn chọn ‘IP Addresses’. Bên dưới, bạn nhập địa chỉ máy chủ Web (Có thể tìm thấy ở trong trang quản trị Hosting của bạn), có định dạng như sau:
172.16.0.0/12
Trong phần ‘Accept requests from these server IP addresses’, bạn nhập Địa chỉ IP webs servers của bạn vào. Hiểu nôm na là mình đang yêu cầu Google chỉ chấp nhận các yêu cầu máy chủ đến từ các địa chỉ IP cụ thể (để bảo mật).
Sau đó, bạn cần nhấp vào nút ‘SAVE’ để lưu cài đặt của mình và tương tự, bạn Sao chép khóa API Máy chủ và Lưu lại.
Bước 2. Thiết lập Plugin WP Store Locator
Khi đã có đủ khóa API của Google Maps, bạn cần đi tới trang Cài đặt » Store Locator để thiết lập plugin.
Nhập các khóa API máy chủ và trình duyệt Google Maps mà bạn đã tạo trước đó vào. Tiếp theo, chọn ngôn ngữ và khu vực của Maps, sau đó nhấp vào nút Lưu thay đổi để lưu cài đặt của bạn.
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 thành phố hoặc quốc gia hiện tại 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 và điều chỉnh chúng theo nhu cầu của mình.
Khi bạn đã hoàn tất, đã đến lúc thêm địa điểm.
Bước 3. Thêm địa điểm cửa hàng
Chuyển qua menu của plugin, chọn Store » New Store để thêm vị trí đầu tiên của bạn.
Cung cấp tiêu đề cho cửa hàng của bạn và sau đó cuộn xuống phần ‘Store Details’. Ở đây, nhập địa chỉ cửa hàng của bạn vào.
Bạn sẽ thấy một bản đồ ở cột bên phải, nhấp vào nút Xuất bản để lưu lại. Sau đó, nhấn F5 và bản đồ đã cập nhật thành vị trí mà bạn vừa thêm vào .
Thao tác lặp lại các bước để thêm các vị trí khác mà bạn muốn. Bạn có thể thêm bao nhiêu vị trí cửa hàng cũng được, không giới hạn.
Bước 4. Thêm Google Maps vào trang WordPress
Để hiển thị công cụ định vị cửa hàng của bạn trên trang WordPress, chỉ cần tạo một trang mới hoặc chỉnh sửa một trang hiện có mà bạn muốn hiển thị bản đồ.
Trên màn hình chỉnh sửa bài đăng, bạn cần thêm block ‘Shortcode’. Sau đó, thêm shortcode [wpsl] vào bên trong nó.
Xong, bạn có thể Lưu hoặc Xuất bản trang của mình và kiểm tra xem mọi thứ có hoạt động chưa.
Vậy là bạn đã chèn Google Maps vào WordPress thành công. Mình hy vọng bài viết này đã giúp bạn có thêm được một tính năng hữu ích để tạo thêm độ tin tưởng khi khách truy cập vào website của bạn. Bạn cũng có thể muốn xem các bài hướng dẫn của mình về Cách chèn Googel Analytics vào WordPress hoặc Cách đưa website của bạn lên Google
