Lỗi this page cant load google maps correctly năm 2024

Many people have been seeing this “can’t load Google Maps” error since late 2018 – it’s related to the pricing which Google has introduced for their Google Maps service. Yes, that’s right, it’s not (quite) free any more.

Whereas most users were previously able to use Maps for free, Google now insist that you add your credit card – even if you plan to spend $0 (which will the case for some). You’ll then also need to replace the key, change or re-generate the Maps code, and so on. A nightmare!

If you don’t want to add your credit card to Google and just want to use maps right away then you can use our FREE API KEY here. It’s fully customizable and – importantly – free for life.

It is a real pain that Google decided to do this without much warning. Read on to see how to fix this error instantly.

The most common solution is that you need to:

1. Login to Google Cloud
2. Update/Add your Credit Card details
3. Then your old Google Map will work after a few minutes.

How to debug the error manually (ADVANCED)

If you want to debug the issue yourself and don’t mind re-generating the keys from Google then read on. The first step is to debug the issue – as there may be many reasons why this is occurring.

You can open the JavaScript console in your browser with a few keystrokes. There is an excellent answer on StackOverflow that tells you plainly in your browser – Chrome, Firefox or others.

There are the errors that can exist after doing the above steps to view the error in the console:

• MissingKeyMapError – API key (valid or not) is not added to your code
• ApiNotActivatedMapError – API is not enabled
• InvalidKeyMapError – The API key used is incorrect

The most likely one you will see is the last – InvaludKeyMapError – this means that you need to update your credit card details with Google here: https://cloud.google.com/billing/docs/how-to/payment-methods

Confusingly, this is within Google Cloud – not Google Maps. They don’t make it easy to understand – if you are not an advanced user then we seriously recommend to use the free API key listed for everyone here. It only takes a few seconds to customize.

Armed with this information, let’s delve in some more:

• Go to the Google Maps Platform welcome page then click Get Started.
• Choose “Maps, Routes and Places” (all three) then click Continue
• Fill out the form as below:.
  Embedding a Google map – select the Platform first

I’m still having problems!?

Here are a few things to check if you are still seeing the “This page didn’t load Google Maps correctly” error.

Bạn có đang nhìn thấy thông báo “Trang này đã không tải Google Maps một cách chính xác” hay “This page can’t load Google Maps correctly.”, khi xem bản đồ trên trang web của bạn không? Lỗi này đã trở nên phổ biến hơn rất nhiều kể từ khi Google Maps bắt đầu yêu cầu khóa API vào ngày 22 tháng 6 năm 2016 (sau khoảng 10 năm cho phép sử dụng không cần khóa). Nếu bạn bắt đầu sử dụng Google Maps trên trang web của mình vào hoặc sau ngày đó thì bạn sẽ cần đăng ký và triển khai khóa API (người dùng cũ vẫn không cần khóa).

Google đã không thiết lập khóa API một quy trình rất thân thiện với người dùng. Giao diện của họ hướng đến các nhà phát triển. Như vậy, nhiều người dùng gặp khó khăn khi tạo một khóa chính xác. Hướng dẫn này không chỉ dành cho các website thuộc Synezi mà còn cho bất kỳ ai trên Internet muốn biết cách khắc phục lỗi Trang này đã không tải Google Maps một cách chính xác lỗi trên trang web của họ.

Tạo Khóa API của Google Maps

Thực hiện theo các bước sau để tạo và triển khai Khóa API Google Maps. Google cung cấp cho bạn một số lượng ứng dụng miễn phí rất lớn mỗi tháng, điều này khiến dịch vụ bản đồ của họ hầu như miễn phí. Cho đến nay, không có khách hàng nào của chúng tôi từng báo cáo cần phải trả phí dịch vụ của Google.

• Chuyển đến trang Google Maps Platform, sau đó nhấp vào Bắt đầu (Get Started).
• Chọn Bản đồ (Maps), Tuyến đường (Routes) và Địa điểm (Places) (cả ba), sau đó nhấp vào Tiếp tục.

• Đăng nhập vào Tài khoản Google của bạn hoặc tạo một tài khoản mới, nếu cần. Bạn có thể cần lặp lại các bước trên sau khi đăng nhập.
• Chọn mục Tạo một dự án mới (Create a new project), nhập tên, sau đó nhấp vào Tiếp theo (Next).

• Google sẽ yêu cầu Thiết lập thanh toán cho dự án mới của bạn để tiến hành kích hoạt API của bạn. Bước này Google yêu cầu phải nhập thông tin thẻ tín dụng, nếu bạn không sẵn sàng thì có thể bỏ qua và thực hiện các bước tiếp theo bên dưới.

• Vào trực tiếp trang quản lý ứng dụng của google : sau đó chọn Dự án mà bạn vừa tạo ở bước trên nếu có nhiều dự án, nếu chỉ có 1 thì ngầm định sẽ là dự án vừa tạo.

• Chọn Google maps và Kích hoạt (Enable) Map Javascript API

• Tiếp tục chọn mục Thông tin xác thực Credentials

• Lựa chọn API Key

• Key sẽ được tạo thành công

• Như vậy bạn đã có thể sử dụng key này vào website của mình ví dụ trong Tùy chọn Theme (Theme options)

• Để api key hoạt động đúng, bạn cần hạn chế key cho website mà bạn sở hữu.Trong phần Giới hạn ứng dụng, chọn HTTP (trang web)-HTTP referrers (web sites), sau đó thêm hai mục bên dưới (thay thế yourname.com bằng tên miền của riêng bạn). Nhập mục đầu tiên, sau đó nhấn enter trên bàn phím của bạn để thêm nó. Lặp lại để thêm mục thứ hai. Có cả hai mục (có dấu hoa thị) sẽ giúp đảm bảo bản đồ của bạn hoạt động trên bất kỳ URL nào của trang web của bạn. Tất nhiên, key này có thể sử dụng cho nhiều website khác nhau.

Lưu ý: Google cho biết có thể mất tới 5 phút để khóa của bạn hoạt động. Chúng tôi đã thấy có trường hợp cần tới 30 phút hoặc lâu hơn. Hãy ghi nhớ điều này nếu bản đồ của bạn không hiển thị ngay lập tức.