Lỗi trang này không thể tải google maps đúng cách năm 2024

Google Maps là một ứng dụng dich vu bản đồ số được công ty Google cung cấp miễn phí qua website map.google.com, hoặc qua các ứng dụng trên mobile. Người dùng có thể dễ dàng định vị vị trí hiện tại của mình và địa điểm mình cần đến, google maps sẽ tính toán và đưa ra lời gợi ý tuyến đường chỉ dẫn an toàn và tiêt kiệm nhất cho họ. Một số điểm mạnh của Google maps so với các dịch vụ khác khiến nó trở thành ứng dụng chỉ đường được đa số người dùng đánh giá cao hơn các dịch vụ bản đồ kỹ thuật số khác nên Google Maps:

• Có mặt trên 200 quốc gia và phủ sóng 99% diện tích của thế giới, có thể nói không hang cùng ngỏ hẻm nào mà bạn không thể tìm thấy trên Google Maps. Các dữ liệu về đia điểm này được xây dựng trên tiêu chí an toàn, tin cậy và chính xác so với các dịch vụ khác.
• 25 triệu cập nhật về địa điểm, khu vực, tuyến đường hằng ngày với sự đóng góp hùng hậu từ các dịch vụ bên ngoài cũng như đội ngủ Google Local Guide.
• Khẳng định chất lượng dịch vụ đáng tin cậy với số lượng người dùng hơn 1 tỷ mỗi tháng.

Google Maps Api là gì?

Google Maps Api là cổng kết nối các tính năng hiện có của Google Map dành cho các lập trình viên để phát triển các ứng dụng bên thứ ba. Google Map Api được google phát triển và tập trung vào 3 mảng chính sau:

• Triển khai Google Map trên các ứng dụng web mà không phải quan tâm công nghệ phát triển đằng sau nó là gì: php, asp.net, java …
• Tích hợp vào các ứng dụng mobile, cung cấp các tiện ích về chỉ đường, đánh dấu, tính toán khoảng cách, thời gian hoàn thành chuyến đi. Uber và Grab là hai ứng dụng mobile nổi bật cho ví dụ này.
• Các ứng dụng webservice: là tham chiếu để tạo ra các bộ thư viện, dịch vụ cho các ứng dụng khác cần tích hợp.

Với Google Map Api bạn sẽ có thể:

Tiếp cận và sử dụng dịch vụ cơ sở hạ tầng của Google trong ứng dụng của bạn. Có quyền truy cập toàn bộ các dữ liệu được Google Maps Publish. Giảm thời gian phát triển, chi phi cũng như gia tăng trải nghiệm người dùng khi ứng dụng cần các tính năng về địa điểm, định vị.

Vì sao bạn cần tạo Google Map API key?

Vì Google yêu cầu phải có API Key riêng cho mỗi domain (tên miền) thì mới cho hiển thị Google Maps trên website được. Nếu dùng 1 Google Map Api Key không hợp lệ, bạn thường sẽ thấy thông báo lỗi như bên dưới:

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.

Để tích hợp và hiển thị Google Maps vào website của mình, bạn cần phải xác minh với Google, việc xác minh này đã được Google đơn giản hóa quy trình bằng 1 đoạn mã duy nhất gọi là Google Maps API key. Đoạn mã này sẽ được gửi lên Google để xác thực, nếu hợp lệ Google sẽ gửi về dữ liệu cần tìm cho chúng ta.

Cách tạo Google Maps API Key:

Để có thể tích hợp sâu dịch vụ Google Maps cho website / ứng dụng của mình bạn cần phải có Google Maps Api Key. Với key này google có thể report cho bạn số lượng query đã thực hiện hằng tháng, giúp bạn phân tích lưu lượng sử dụng, tính tiền trực quan với Google Map( Google API Key chỉ miễn phí một số lượng query hằng tháng, do đó bạn cần bảo mật và hạn chế vùng truy cập của api của mình nhằm tiết kiệm tiền sử dụng).

Để có thể lấy được Google Maps API Key hay của bất kì dịch vụ nào điều đầu tiên bạn cần có là: có thể tạo được một project trên https://console.cloud.google.com/?hl=vi&pli=1

Tạo project trên Google Console

Sau khi tạo được project, thì bạn chọn project mình vừa tạo, màn hình sẽ chuyển sang trang report tình hình sử dụng api của ứng dụng.

Màn hình quản lý API ứng dụng

Chọn “Go to APIs overview” và click chọn thư viện api bên tay trái, chọn thư viện api mình cần sử dụng, click “Enable”, như trong hình dưới là dịch vụ Google Maps Javascript Api

Thư viện Google Map Api Javascript

Click vào nút tạo chứng chỉ như hình.

Tạo chứng chỉ Google APIs

Chọn API Key nếu được hỏi:

Tạo Api Key

Màn hình hiển thị như hình dưới là ok: ( phần bôi đen là thông tin nhạy cảm nhé mọi người)

Tạo Key Dịch Vụ

Chọn xác thực giới hạn gọi api key để hạn chế người khác sài chùa gây tốn chi phí

Tạo giới hạn gọi Api

Tùy theo ứng dụng cần nhúng Google Map mà ta cho vùng giới hạn cho phù hợp, như trong hình là mình đang muốn nhúng Maps Api vào web nên chọn xác thực giới hạn qua http. Để triển khai trên môi trường development bạn có thể chọn không giới hạn hoặc chèn virtual domain localhost.