Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Lỗi thanh toán và lỗi khoá API
Trong một số trường hợp, bản đồ bị tối hoặc hình ảnh "âm" của Chế độ xem đường phố, có hình mờ với văn bản "chỉ dành cho mục đích phát triển", có thể xuất hiện.
Hành vi này thường cho thấy vấn đề về khoá API hoặc thanh toán.
Để sử dụng các sản phẩm của Google Maps Platform, bạn phải bật tính năng thanh toán trên tài khoản của mình và tất cả các yêu cầu phải có một khoá API hợp lệ. Quy trình sau đây sẽ giúp bạn khắc phục vấn đề này:
Bạn có đang sử dụng khoá API không?
Tôi không chắc. Làm cách nào để kiểm tra xem tôi có đang sử dụng khoá API hay không?
Khoá API được truyền dưới dạng tham số key trong URL dùng để tải API JavaScript của Maps. Sau đây là một số cách để kiểm tra xem bạn có đang sử dụng khoá API hay không:
Sử dụng tiện ích Chrome
Trình kiểm tra API Nền tảng Google Maps. Điều này cho phép bạn xác định xem trang web của mình có triển khai đúng cách các API Maps được cấp phép của Google hay không.
Nếu bạn đang sử dụng một thư viện hoặc trình bổ trợ để tải API JavaScript của Maps, hãy kiểm tra chế độ cài đặt của thư viện đó và tìm tuỳ chọn khoá API.
Kiểm tra lỗi trong trình duyệt.
Nếu thấy các thông báo sau, tức là bạn đang sử dụng khoá API không đúng cách:
Nếu bạn có quyền truy cập vào mã nguồn của ứng dụng, hãy tìm thẻ <script> dùng để tải API JavaScript của Maps.
Khi tải API JavaScript của Maps, hãy thay thế YOUR_API_KEY trong mã bên dưới bằng khoá API của bạn.
Kiểm tra lưu lượng truy cập mạng do trang web của bạn tạo ra trong trình duyệt.
Trong Chrome, bạn có thể xem thông tin này bằng cách sử dụng thẻ Mạng trong DevTools.
Tại đây, bạn sẽ thấy các yêu cầu mạng do trang web của bạn thực hiện. Các yêu cầu được thực hiện bằng API JavaScript của Maps sẽ nằm trong đường dẫn maps/api/js.
Tại đây, bạn có thể xác nhận xem các yêu cầu có đang sử dụng tham số key hay không.
Bạn nên
lọc lưu lượng truy cập mạng theo maps/api/js khi xem thẻ Mạng.
Không, tôi không sử dụng khoá API.
Để nhận khoá API, hãy nhấp vào nút bên dưới. Nếu bạn không thấy hướng dẫn thiết lập, hãy làm theo hướng dẫn đầy đủ tại bài viết Bắt đầu sử dụng Nền tảng Google Maps.
Bắt đầu
Có, tôi đang sử dụng khoá API.
Tuyệt vời! Hãy tiếp tục và kiểm tra xem tài khoản thanh toán có được đính kèm vào dự án của bạn hay không.
Tài khoản thanh toán có được liên kết với dự án của bạn không?
Tôi không chắc. Làm cách nào để kiểm tra xem tài khoản thanh toán có được đính kèm vào dự án của tôi hay không?
Chuyển đến
trang Thanh toán trong Google Cloud Console rồi chọn dự án mà bạn đã tạo khoá API.
Cách xác nhận khoá được liên kết với dự án:
Chuyển đến mục Thông tin xác thực. Bạn có thể truy cập vào mục này từ thanh bên trái trong phần Nền tảng Google Maps > Thông tin xác thực.
Kiểm tra để đảm bảo rằng khoá API mà bạn hiện đang sử dụng trên trang web của mình có trong danh sách.
Nếu không, hãy chuyển sang một dự án khác và kiểm tra thông tin xác thực ở đó.
Nếu không tìm thấy dự án cho khoá API của mình, thì có thể bạn đã mất quyền truy cập vào dự án này.
Hãy nhờ người khác trong tổ chức của bạn trợ giúp. Nếu không tìm thấy dự án ban đầu, bạn nên:
Tạo dự án mới. Bạn có thể thực hiện việc này bằng cách chọn Dự án mới trong danh sách dự án hoặc chọn Tạo dự án thông qua trang Trình quản lý tài nguyên.
Tạo khoá API mới. Bạn có thể thực hiện việc này trên trang Thông tin xác thực.
Sau đó, hãy nhấp vào Tạo thông tin xác thực rồi chọn Khoá API.
Sau khi bạn tìm thấy dự án của mình trong Cloud Console, hãy kiểm tra xem tài khoản thanh toán có được đính kèm hay không bằng cách chuyển đến mục Thanh toán trong trình đơn bên trái.
Không, tài khoản thanh toán không được đính kèm vào dự án của tôi.
API có giới hạn hằng ngày do chính bạn đặt ra và bạn đã vượt quá giới hạn đó không?
Nếu đã đặt giới hạn hằng ngày cho bất kỳ API nào (đây là cách phổ biến để ngăn chặn việc tăng số lượng API không mong muốn), bạn có thể giải quyết vấn đề này bằng cách tăng giới hạn hằng ngày.
Bạn có thể kiểm tra hạn mức hằng ngày bằng cách chuyển đến Trang tổng quan về API và dịch vụ trong Cloud Console. Sau khi chuyển đến đó, hãy làm như sau:
Chọn một dự án nếu bạn nhận được lời nhắc.
Chọn một API trong danh sách, rồi nhấp vào thẻ Định mức.
Khoá API của bạn có quy tắc hạn chế về địa chỉ IP không?
Bạn chỉ có thể sử dụng khoá API có quy định hạn chế về địa chỉ IP với các dịch vụ web được dùng từ phía máy chủ (chẳng hạn như API Mã hoá địa lý và các API Dịch vụ web khác).
Hầu hết các dịch vụ web này đều có các dịch vụ tương đương trong API Maps JavaScript (ví dụ: hãy xem Dịch vụ mã hoá địa lý).
Để sử dụng các dịch vụ phía máy khách của API Maps JavaScript, bạn cần tạo một khoá API riêng có thể được bảo mật bằng quy định hạn chế Trình giới thiệu HTTP (xem phần Lấy, thêm và hạn chế khoá API).
Nếu mã của bạn không hoạt động:
Để giúp bạn chạy mã maps, Brendan Kenny và Mano Marks chỉ ra một số lỗi thường gặp và cách khắc phục trong video này.
Tìm lỗi chính tả. Hãy nhớ rằng JavaScript là một ngôn ngữ phân biệt chữ hoa chữ thường.
Kiểm tra thông tin cơ bản – một số vấn đề thường gặp nhất xảy ra khi tạo bản đồ ban đầu. Chẳng hạn như:
Xác nhận rằng bạn đã chỉ định các thuộc tính zoom và center trong các tuỳ chọn bản đồ.
Đảm bảo rằng bạn đã khai báo một phần tử div trong đó bản đồ sẽ xuất hiện trên màn hình.
Đảm bảo phần tử div cho bản đồ có chiều cao. Theo mặc định, các phần tử div được tạo với chiều cao là 0 và do đó không hiển thị.
Sử dụng trình gỡ lỗi JavaScript để xác định vấn đề, chẳng hạn như trình gỡ lỗi có trong Công cụ dành cho nhà phát triển Chrome. Bắt đầu bằng cách tìm lỗi trong bảng điều khiển JavaScript.
Đăng câu hỏi lên Stack Overflow. Bạn có thể xem nguyên tắc về cách đăng câu hỏi hay trên trang Hỗ trợ.
[null,null,["Cập nhật lần gần đây nhất: 2025-08-31 UTC."],[[["\u003cp\u003eTo use the Google Maps JavaScript API, you must include an API key and enable billing for your project.\u003c/p\u003e\n"],["\u003cp\u003eIf you see a darkened map or a negative Street View image watermarked with "for development purposes only", you might have an issue with your API key or billing.\u003c/p\u003e\n"],["\u003cp\u003eTroubleshooting steps involve verifying your API key implementation, checking billing account attachment, ensuring billing method validity, and reviewing daily usage limits and IP restrictions.\u003c/p\u003e\n"],["\u003cp\u003eThis page offers solutions to common billing and API errors, and links to resources for further assistance.\u003c/p\u003e\n"]]],["Using the Maps JavaScript API requires a valid API key and enabled billing. Issues like a darkened map typically stem from these. Verify API key usage via browser checks, source code, or network traffic. Ensure the project linked to your API key has an active billing account. Check for invalid payment methods or exceeded API daily limits. If restricted by IP address, create a key with HTTP referrers. Troubleshoot by checking for typos, verifying map element properties, or using a JavaScript debugger.\n"],null,["# Troubleshooting\n\n| **Reminder:** To use the Maps JavaScript API:\n|\n| - All Maps JavaScript API requests must include an API key; we no longer support keyless access.\n| - You must [enable billing](https://console.cloud.google.com/project/_/billing/enable?utm_source=Docs_BillingNudge) on each of your projects.\n\n### API Key and Billing Errors\n\n\nUnder certain circumstances, a darkened map, or 'negative' Street View image,\nwatermarked with the text \"for development purposes only\", may be displayed.\nThis behavior typically indicates issues with either an API key or billing.\nIn order to use Google Maps Platform products, billing must be enabled on your account,\nand all requests must include a valid API key. The following flow will help troubleshoot this:\n\n#### Are you using an API key?\n\n#### I'm not sure. How can I check if I am using an API key?\n\nAn API key is passed as the `key` parameter in the URL that is used to load the\nMaps JavaScript API. Here are a few options to check if you are using an API key:\n\n- Use the [Google Maps Platform API Checker](https://chrome.google.com/webstore/detail/google-maps-platform-api/mlikepnkghhlnkgeejmlkfeheihlehne) Chrome extension. This allows you to determine if your website is properly implementing Google's licensed Maps APIs.\n- If you are using a library or plugin to load the Maps JavaScript API, check the settings for that library and look for an API key option.\n- Check [errors in your browser](/maps/documentation/javascript/error-messages#checking-errors). If you see the following messages, you are not using your API key correctly:\n - Google Maps JavaScript API warning: [NoApiKeys](/maps/documentation/javascript/error-messages#no-api-keys)\n - Google Maps JavaScript API error: [MissingKeyMapError](/maps/documentation/javascript/error-messages#missing-key-map-error)\n\n#### For web developers:\n\n- If you have access to the source code of your application, look for the `\u003cscript\u003e` tag which is used to load the Maps JavaScript API. When loading the Maps JavaScript API, substitute `YOUR_API_KEY` in the code below with your API key. \n\n ```html\n \u003cscript async defer\n src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap\"\u003e\n \u003c/script\u003e\n ```\n- Check the network traffic generated by your website in the browser. In Chrome, this can be viewed using the [DevTools](/web/tools/chrome-devtools) **Network** tab. Here you will see the network requests made by your website. Requests made using the Maps JavaScript API will be under the path `maps/api/js`. Here you can confirm if the requests are using the `key` parameter. It may be helpful to [filter your network traffic](/web/tools/chrome-devtools/console#filtering_the_console_output) by `maps/api/js` when viewing the **Network** tab.\n\n#### No, I am not using an API key.\n\nTo get an API key, click the button below. If you do not see a guided setup, follow the\nfull instructions at [Get Started with Google Maps\nPlatform](/maps/get-started#procedures).\n\n\n[Get Started](/maps/get-started)\n\n#### Yes, I am using an API key.\n\nGreat! Let's move on and check if a billing account is attached to your project.\n\n#### Is a billing account attached to your project?\n\n#### I'm not sure. How can I check if billing account is attached to my project?\n\nGo to the [Billing page](https://console.cloud.google.com/project/_/billing/enable?utm_source=Docs_BillingNudge) in the Google Cloud console and select the project under which your API key was created.\nTo confirm the key is associated with the project:\n\n1. Go to the **Credentials** section, which can be accessed from the left side bar under **Google Maps Platform \\\u003e Credentials**.\n2. Check that the API key you currently use on your website is listed. If that's not the case, switch to a different project, and check the credentials there.\n3. If you cannot locate the project for your API key, you may have lost access to this project. Ask others in your organization for help. If the original project cannot be located, you should:\n 1. Create a new project. This can be done by selecting **New Project** from the projects list, or by selecting **Create Project** via the [Resource Manager page](https://console.cloud.google.com/cloud-resource-manager).\n 2. Create a new API key. This can be done on the **Credentials** page. Once there click **Create credentials** and then select **API key**.\n\n\nOnce you have located your project in the Cloud console,\ncheck if a billing account is attached by navigating to the [Billing](https://console.cloud.google.com/project/_/billing) section in the left side menu.\n\n#### No, a billing account is not attached to my project.\n\nGo to the [Enable Billing](https://console.cloud.google.com/project/_/billing/enable?utm_source=Docs_BillingNudge) page in the Cloud console\nand add a billing account to your project. For additional information, see\n[Get Started with Google Maps Platform](/maps/get-started).\n\n#### Yes, a billing account is attached to my project.\n\nGreat! Let's make sure the provided billing method is valid.\n\n#### Is the provided billing method no longer valid (for example an expired credit card)?\n\nYou [can add, remove, or update a payment method](https://cloud.google.com/billing/docs/how-to/payment-methods) in the Cloud console.\n\n#### Is there an exceeded self-imposed daily limit on the API?\n\nIf you have set a daily limit on any of your APIs, which is common to prevent unexpected increases,\nyou can resolve this by [increasing your daily limit](/maps/faq#usage_cap).\n\nYou can check your daily limits by going to the\n[APIs \\& Services Dashboard](https://console.cloud.google.com/project/_/apiui/apis/enabled?utm_source=Docs_EnabledAPIsView) in the\nCloud console. Once there:\n\n1. Select a project if prompted.\n2. Select an API from the list, then click the **Quotas** tab.\n\n#### Does your API key have an IP addresses restriction?\n\nAPI keys with an **IP addresses** restriction can only be used with web services that are\nintended for use from the server side (such as the\n[Geocoding API](/maps/documentation/geocoding/start)\nand other [Web Service APIs](/maps/apis-by-platform)).\nMost of these web services have equivalent services within the Maps JavaScript API (for example, see the\n[Geocoding Service](/maps/documentation/javascript/geocoding)).\nTo use the Maps JavaScript API client side services, you will need to create a separate API key which\ncan be secured with an **HTTP referrers** restriction (see\n[Get, add, and restrict an API key](/maps/get-started#api-key)).\n\n### If your code isn't working:\n\nTo help you get your maps code up and running, Brendan Kenny and Mano Marks point out\nsome common mistakes and how to fix them in this video. \n\n- Look for typos. Remember that JavaScript is a case-sensitive language.\n- Check the basics - some of the most common problems occur with the initial map creation. Such as:\n - Confirm that you've specified the `zoom` and `center` properties in your map options.\n - Ensure that you have declared a div element in which the map will appear on the screen.\n - Ensure that the div element for the map has a height. By default, div elements are created with a height of 0, and are therefore invisible.\n\n Refer to our examples for a [reference\n implementation](/maps/documentation/javascript/examples/map-simple).\n- Use a JavaScript debugger to help identify problems, like the one available in the [Chrome\n Developer Tools](/chrome-developer-tools/docs/javascript-debugging). Start by looking in the JavaScript console for errors.\n- Post questions to [Stack\n Overflow](https://stackoverflow.com/questions/ask?tags=google-maps-api-3,google-maps). Guidelines on how to post great questions are available on the [Support](/maps/support) page."]]
