Cách sử dụng Google Maps API

Hướng dẫn sửa lỗi không hiển thị được google map

Sau đây olalaz sẽ hướng dẫn các bạn Cách sử dụng Google Maps API bằng cách lấy API key  một cách đơn giản và nhanh chóng:

1. Lấy google map api key

Đầu tiên bạn hãy nhấp chuột vào đây để lấy key và kích vào GET A KEY :

Google Maps APIs – Get a key

2. Đồng ý với các Điều khoản dịch vụ của google:

Google Maps APIs – Agree with the terms

3. Create browser API key

Chọn tên cho khóa mới và thêm các trang web được cho phép sử dụng với key này. Nếu bạn không cần bất kỳ sự hạn chế trang web, chỉ cần đặt một dấu * trong lĩnh vực đó (nhưng không để trống, trừ khi bạn đang gặp vấn đề với *! ), ví dụ: *.olalaz.net/* . Sau đó nhấn vào Create:

Google Maps APIs – Generate a key

4. Lấy API key

Sao chép api key rồi nhấn ok.

Google Maps APIs – Generated key

5. Chèn script Google Map vào trong website

Xác định vị trí có chứa đoạn mã của Google Maps trên trang web của bạn, và thêm API key của bạn như bên dưới

1	<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async=""defer="defer" type="text/javascript"></script>

Nếu không có các thông số khác, chỉ cần thêm key = YOUR_API_KEY vào cuối src; nếu không thêm & key = YOUR_API_KEY thay vào đó, như thế này:

1	<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY" async="" defer="defer"type="text/javascript"></script>

Rõ ràng, trong cả hai trường hợp, bạn phải thay thế YOUR_API_KEY với mã khóa API của bạn.

6. Sau khi thêm mã trên bạn chỉ cần chờ 5′ hoặc lâu hơn xí để xem kết quả.

Xử lý sự cố

Ở đây có một số lỗi thông thường bạn gặp khi bạn tích hợp Google Maps.

Google Maps API error: RefererNotAllowedMapError

Bạn nhận được lỗi này khi  Google Maps API JavaScript chưa được bổ sung vào danh sách cho phép sử dụng key. Chỉnh sửa khóa API của bạn và thêm URL vào. Nếu bạn muốn cho phép bất kỳ người sử dụng, đặt dấu * thay thế, hoặc bỏ trống trường này (nếu dấu * không làm việc).

Google Maps API error: RefererNotAllowedMapError

Uncaught ReferenceError: google is not defined

Hãy nhớ rằng không thể truy cập vào google maps nếu bạn không tải script maps của bạn trước. Có một số cách để chắc chắn về điều đó:

• Tải script map của bạn trước khi cố gắng truy cập vào map của bạn, đảm bảo không async hoặc hoãn lại thuộc tính đã được thiết lập.
• Đối tượng truy cập google của bạn từ một chức năng mà sẽ được kích hoạt chỉ sau khi kịch bản Google Maps đã được tải về, kèm tham số & callback = yourFunctionName ở cuối src, như thế này:

  1	<script src="//maps.googleapis.com/maps/api/js?key=7rY1zJOKlz4PrRKP23as&callback=yourFunctionName" async=""defer="defer" type="text/javascript"></script>

Failed to load resource: net::ERR_FILE_NOT_FOUND – file://maps.googleapis.com/maps/api/js…

Nếu bạn đang thử nghiệm trang web của bạn trên localhost, bạn phải thiết lập một máy chủ địa phương, hoặc thêm https: ở đầu URL của bạn, như thế này:

1	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"async="" defer="defer" type="text/javascript"></script>

Nếu không, trình duyệt của bạn sẽ tìm kiếm các file js trên máy tính của bạn, thay vì sử dụng giao thức http/https.

Google Maps API error: UrlAuthenticationCommonError

Nguồn: olalaz.net

SHARE

Unknown

• 
• 
• 
• 
•