Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Biệt thự An Vượng
5 (100%) 1 vote

Fix lỗi thiếu API KEY Google Maps không tải đúng cách

Lỗi Google Maps không tải đúng cách trên WordPress có một số nguyên nhân. Trong đó phổ biến là lỗi thiếu Google API KEY. Lỗi này thường xảy ra với các theme sử dụng Shortcode chèn Google Map.

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Hình ảnh: Lỗi “Trang này đã không tải Google Maps đúng cách. Hãy xem bảng điều khiển Javascript để biết chi tiết kỹ thuật”

Theo một số bạn thì lỗi này chỉ xảy ra ở Hosting Việt Nam, tuy nhiên mình sử dụng cả Hosting Việt Nam và nước ngoài (Digital Ocean) đều bị lỗi này.

Thông báo lỗi:

  • Ngôn ngữ Tiếng Việt: Rất tiếc! Đã xảy ra lỗi. Trang này đã không tải Google Maps đúng cách. Hãy xem bảng điều khiển JavaScript để biết chi tiết kỹ thuật.
  • Ngôn ngữ Tiếng Anh: Oops! something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

Các Fix lỗi thiếu API KEY Google Maps không tải đúng cách

Nguyên nhân xuất hiện lỗi:

Do thông tin Google Map trên trang của bạn kết nối tới Server của Google mà không thông qua hàm API.

Cách khắc phục:

Chuẩn bị: Để đỡ mất thời gian, bạn hãy đăng nhập vào Google trước khi thực hiện. Chưa có tài khoản Google thì bạn hãy tạo lấy 1 cái.

Bước 1: Tải Plugin (Gói mở rộng) API KEY for Google Maps

Trong giao diện quản trị (admin), bạn tìm tới tab Plugin (ngôn ngữ Tiếng Việt là Gói mở rộng) >> nhấn chọn Cài mới.

Trong ô Search Plugins bạn gõ API KEY for Google Maps. Sau khi có kết quả, bạn nhấn cài đặtActive (kích hoạt) Plugin này lên.

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Tìm, cài đặt và kích hoạt plugin API KEY for Google Maps

(Lưu ý: Nếu bạn nào bị lỗi hiển thị number_format_thousands_sep000 như trong hình thì xem cách fix tại ĐÂY)

Bước 2: Truy cập API Console

Trong giao diện quản trị website, bạn nhấn vào Settings (Cài đặt) / chọn Google API KEY sau đó nhấn vào link click here. Trang Google API Console được mở ra.

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Hình ảnh: Trang Create an API – Google API Console

Sau khi mở Google API Console và bạn đã đăng nhập tài khoản Gmail (tài khoản Google), bạn sẽ được đưa thẳng đến trang Enable an API. Bạn chọn Create a Project sau đó nhấn Continue và đợi trong giây lát.

Bước 3: Tạo API KEY

Sau đó, trang Credentials của Google hiện ra, bạn tùy chọn như hình dưới và nhấn Create.

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Tùy chọn tạo Project

Sau khi tạo thành công, xuất hiện thông báo như hình dưới. Nội dung trong ô Your API key chính là Google API key bạn cần. Hãy copy dòng đó và sang bước 4.

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Tạo Google API key thành công

Bước 4: Khai báo API KEY cho Google Maps.

Tại giao diện Google API KEY trong trang quản trị (admin) của website. Bạn Paste (Ctrl + V) Google API KEY vừa mới tạo Enter Google Maps API KEY và nhấn Save Changes.

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Nhập Google API key mới tạo vào website quản trị

Cuối cùng, bạn mở website ra và xem kết quả nhé!

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Kết quả sau 4 bước

TRƯỜNG HỢP CÁC BẠN LÀM THEO CÁCH TRÊN VẪN KHÔNG THÀNH CÔNG HÃY THỬ CÁCH BÊN DƯỚI

Trên trình duyệt đang mở trang quản trị website, bạn đăng nhập 1 tài khoản google bất kỳ. Trong cửa sổ API KEY for Google Maps, bạn click vào Generate API Key, như hình dưới:

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Cửa sổ xuất hiện, bạn click vào mũi tên dropdown trong ô Select or Create Project và chọn Create a New Project như hình dưới.

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Sau đó bạn gõ tên Project này vào thay chữ New Project đề phòng sau này cần sử dụng lại API sẽ tìm dễ dàng hơn hoặc để mặc định và click vào Next. Sau khi click vào Next, bạn đợi đến khi cửa sổ như hình dưới hiện ra.

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Bạn bôi đen khóa API hoặc nhấn vào nút copy sau đó đóng cửa sổ này lại. Bạn dán khóa API vừa copy được vào ô Enter Google Maps API KEY và nhấn lưu thay đổi.

Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách

Chúc các bạn thành công!

Trường hợp chưa thành công:

Trường hợp bạn thực hiện chính xác các bước như trên mà chưa thành công, hãy thêm đoạn code sau vào trong thẻ head:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

Thay YOUR_API_KEY bằng Google API key của bạn.

9 bình luận cho bài viết “Hướng dẫn fix lỗi thiếu API KEY Google Maps không tải đúng cách”
  1. Hải 21/09/2017
  2. Phạm Tâm 30/05/2018
  3. Administrator 30/05/2018
  4. Phạm Tâm 01/06/2018
    • Administrator 15/06/2018
  5. xuannghia 05/07/2018
  6. Lê Long 06/08/2018
  7. Tiến 12/08/2018
  8. Đặng Huyền 22/08/2018

Viết bình luận

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 *