Kiến thức thiết kế website

Bản đồ chỉ đường trên website của bạn đang bị lỗi và hiển thị câu thông báo “This page didn’t load Google Maps correctly” phải không? Đừng lo lắng về vấn đề này, đây không phải là lỗi mà do Google Maps yêu cầu bạn phải sử dụng API key từ ngày 22/06/2016 (sau khoản thời gian dài là 10 năm google map đã cho sử dụng không cần API key). 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 miễn phí (người dùng cũ vẫn không cần khóa).

Google không thiết lập khoá API cho người dùng website mà họ muốn hướng đến những nhà lập trình và phát triển website, vì thế người dùng website sẽ gặp khó khăn khi tạo API key cho website của mình. Bài viết hướng dẫn này không phải dành riêng cho mã nguồn Joomla, WordPress hay khách hàng của công ty Monster Design mà cho tất cả mọi người biết cách khắc phục lỗi "This page didn’t load Google Maps correctly"

Nguyên nhân gây ra lỗi “This page didn’t load Google Maps correctly”

Đầu tiên chúng ta xem xét tại sao thấy thông báo “This page didn’t load Google Maps correctly” trên website. Có rất nhiều lý do có thể xảy ra khi thấy lỗi này nhưng may mắn thay là Google đã thông báo cho ta biết lý do xảy ra vì vậy chúng ta sẽ khắc phụ nó đơn giản hơn. Mở bản JavaScript console chúng ta sẽ thấy lỗi hiển thị : " Oops! Something went wrong. This page didn’t load Google Maps correctly "

Google maps console error

Dưới đây là những lỗi phổ biến nhất:

Cách khắc phục lỗi “This page didn’t load Google Maps correctly”

Bây giờ bạn biết chính xác những gì gây ra lỗi, bạn có thể sửa nó. Dưới đây là các bản sửa lỗi API Google Maps.

Cách khắc phục lỗi MissingKeyMapError

MissingKeyMapError có nghĩa là bạn không sử dụng khóa API và sẽ cần phải đăng ký một khóa sau đó định cấu hình trang web của bạn để sử dụng nó. Các trang web bắt đầu sử dụng Google Maps vào hoặc sau ngày 22 tháng 6 năm 2016 yêu cầu khóa API để hiển thị bản đồ.

Tạo một khoá Google Maps API Key

Thực hiện theo các bước sau để tạo và triển khai Khóa API Google Maps miễn phí.

  1. Click vào link Get a Key sau đó đăng nhập bằng tài khoản Google account (hoặc đăng ký tài khoản nếu chưa có).
  2. Click Agree and continue để tạo 1 Project mới cho website của bạn.
  3. Bên dưới Accept requests, bạn hãy thêm 2 đường dẫn có thể load script Google map (nhập têndomain.com):
    yourname.com/*
    *.yourname.com/*
  4. gmaps key create 3

    Copy API key mà google cung cấp cho bạn và đưa key này tới website mà bạn cần sử dung Google map.
    gmaps api key done

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 đã nghe báo cáo về việc mất 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.

Cách khắc phục lỗi RefererNotAllowedMapError

RefererNotAllowedMapError là lỗi phổ biến nhất mà chúng tôi đã thấy ngoài việc không sử dụng khóa. Bảng console cũng sẽ thông báo “Your site URL to be authorized”. Nó liên quan đến Bước 3 ở trên khi tạo khóa của bạn. Dưới đây, cách khắc phục lỗi:

  1. Click vào link https://console.developers.google.com/apis/credentials
  2. Click vào tên API key’s của bạn sau đó chỉnh sửa nó.
  3. Bên dưới Accept requests, bạn hãy khai báo đường dẫn tới Google map trên website của bạn như sau :
    yourname.com/*
    *.yourname.com/*
    google maps edit referer 2
  4. Click the Save button sau đó đợi vài phút để thay đổi có hiệu lực (Google cho biết có thể mất tới 5 phút).

Tip: Nếu bạn có nhiều dự án, hãy đảm bảo rằng bạn đang làm việc với dự án chính xác bằng cách sử dụng menu thả xuống ở trên cùng bên phải.

Cách khắc phục lỗi ApiNotActivatedMapError

Lỗi chưa active API Key.

  1. Đi tới https://console.developers.google.com/apis/library
  2. Ngay “Google Maps API’s”, click “More” để thấy tất cả API’s.
    google maps apis
  3. Click vào API bạn đang sử dụng. Website mà Monster Design sử dụng là Google Maps JavaScript APIGoogle Maps Static API. Bạn có thể sử dung API khác nhưng JavaScript API là nhiều người dùng nhất.
  4. Click button Enable trên cùng và đợi vài phút để các thay đổi có hiệu lực (Google cho biết các thay đổi có thể mất tới 5 phút).
    google maps api enable
  5. Lập lại các bước trên nếu bạn đang sử dụng nhiều API key (Lưu ý Monster Design đang sử dụng Google Maps JavaScript APIGoogle Maps Static API).

Tip: Nếu bạn sử dụng một sản phẩm khác với chúng tôi, bạn có thể cần phải bật một API khác. Nếu bạn không chắc chắn nên bật API nào, bạn có thể thử bật tất cả chúng (hoặc hỏi nhà cung cấp của bạn).

Cách khắc phục lỗi InvalidKeyMapError

InvalidKeyMapError đơn giản bạn đã nhập sai key API. Bạn đã tạo nó nhưng không nhập chính xác vào trang web của bạn.

  1. Đi tới https://console.developers.google.com/apis/credentials
  2. Copy key.
    google maps api copy key

Nếu bạn là 1 trong khách hàng của Monster Design, Vui lòng liên hệ chúng tôi sẽ giúp bạn khắc phục lỗi.

Cuối cùng :

Chúng tôi hy vọng Google sẽ cải thiện quy trình tạo khóa API ngay bây giờ vì họ đã biến nó thành yêu cầu đối với hàng triệu người dùng không phải là nhà phát triển. Cho đến lúc đó, tôi hy vọng hướng dẫn này sẽ hữu ích cho nhiều người.

Nguồn từ churchthemes.com

Đã có 12697 người xem bài viết này
Đánh giá bài viết
(2 Đánh giá)
Thiết kế Website - Monster Design

Monster Design là công ty chuyên thiết kế website theo yêu cầu của doanh nghiệp cũng như cung cấp các dịch vụ liên quan đến thiết kế website. Tất cả các ý tưởng kinh doanh tuyệt vời với sự ra mắt của một trang web được thiết kế chuyên nghiệp phù hợp với xu hướng phát triển thế giới công nghệ và hiệu quả cao. Internet đã định nghĩa lại cách thức kinh doanh và trang web của bạn là cửa ngõ để tiếp cận các cơ hội kinh doanh và biến cơ hội kinh doanh trên website thành lợi nhuận.

Về chúng tôi

Công ty TNHH Monster Design được thành lập từ năm 2012 được quản lý và giám sát bởi Công ty Tin Học Nhật Quang là công ty chuyên viết phần mềm và thiết kế website bởi các chuyên gia, kỹ sư tin học giàu kinh nghiệm và uy tín. Đội ngũ quản lý, nhân sự của Công ty phần lớn được đào tạo từ nước ngoài cũng như được quy tụ từ các Công ty lớn trong và ngoài nước.

Kiến thức Thiết kế Website

  • Bài viết này hướng dẫn bạn cách đăng ký và xác thực tài khoản tick xanh trên twitter cập nhật mới nhất năm 2023. Khi tài khoản lên tích xanh Twitter tức là bạn đã nhận được sự tin cậy từ cộng đồng người dùng Twitter và từ chính nhóm…
  • Bản đồ chỉ đường trên website của bạn đang bị lỗi và hiển thị câu thông báo “This page didn’t load Google Maps correctly” phải không? Đừng lo lắng về vấn đề này, đây không phải là lỗi mà do Google Maps yêu cầu bạn phải sử dụng API key…
Xem tất cả bài viết về Thiết kế Website

Thông tin liên hệ

Số 137 Thới An 16, P.Thới An

Q.12, HCM, Vietnam

+84 909 333 021

DUNS: 555820121

MST: 0312031388

contact@monsterdesign.vn