Cách tạo khóa API Google Maps mới – google maps api tạo bản đồ

Bạn đang xem : google maps api tạo bản đồ

Bản đồ Google Maps của bạn gần đây có ngừng hoạt động không? Bạn có thấy thông báo Chỉ dành cho mục đích phát triển trên bản đồ Google Maps của mình không? Nếu vậy thì bạn có thể thở phào nhẹ nhõm vì tôi sẽ hướng dẫn bạn quy trình thiết lập khóa API Google Maps mới để khắc phục sự cố này.

Kể từ khi ra mắt Nền tảng Google Maps, Google đã liên tục đưa ra các thay đổi đối với sản phẩm, giá cả và hỗ trợ của họ để mang lại cho người dùng sự linh hoạt, minh bạch và khả năng kiểm soát cao hơn.

Một thay đổi gần đây đối với Nền tảng Google Maps yêu cầu bạn cho phép thanh toán trên tài khoản của mình bằng thẻ tín dụng và có khóa API hợp lệ cho tất cả các dự án của bạn để bản đồ Google Maps của bạn hoạt động.

thông báo chính thức của họ cho biết rằng:

Kể từ ngày 11 tháng 6 năm 2018, bạn phải bật thanh toán bằng thẻ tín dụng và có khóa API hợp lệ cho tất cả các dự án của mình. Điều này sẽ cung cấp cho bạn khả năng mở rộng quy mô dễ dàng với ít thời gian ngừng hoạt động hơn và ít vấn đề về hiệu suất hơn.

Các liên kết tiện dụng

Trước khi tôi xem hướng dẫn từng bước giải thích cách thiết lập tài khoản thanh toán của bạn và tạo khóa API Google Maps mới, tôi muốn chia sẻ với bạn một vài liên kết đáng được đánh dấu trang để sử dụng trong tương lai:

  • Nền tảng Google Maps
    • Bắt đầu: https://cloud.google.com/maps-platform/
  • Nền tảng đám mây của Google
    • Trang tổng quan API (để xem lại việc sử dụng khóa API của bạn):
      https://console.cloud.google.com/apis/dashboard
    • Thư viện API (để quản lý các thư viện API được bật trong dự án của bạn):
      https://console.cloud.google.com/apis/library
    • Thông tin đăng nhập API (để tạo và quản lý các khóa API của bạn):
      https://console.cloud.google.com/apis/credentials

Bước 1 – Bắt đầu!

Bắt đầu thiết lập Dự án Google Maps

Để bắt đầu, hãy đảm bảo rằng bạn đã đăng nhập vào tài khoản Google của mình và truy cập url sau https://cloud.google.com/maps- nền tảng / .

Nhấp vào nút Bắt đầu .

Nền tảng Google Maps có một số Thư viện API có sẵn bên trong nó. Các Thư viện API sẽ được bật trong dự án của bạn được xác định dựa trên (các) sản phẩm mà bạn chọn để bật trong bước này.

Chọn sản phẩm của bạn trong Dự án Google Maps

Một cửa sổ bật lên sẽ xuất hiện và bạn cần chọn các sản phẩm mà bạn sẽ sử dụng trong dự án của mình. Trong ví dụ của mình, tôi đã bật các sản phẩm Bản đồ Địa điểm .

Nhấp vào nút Tiếp tục .

Tạo dự án Google Maps mới

Nếu trước đây bạn đã tạo một dự án, hãy chọn dự án đó từ danh sách. Nếu bạn đang tạo một dự án mới, hãy chọn tùy chọn + Tạo dự án mới từ danh sách và cung cấp tên cho dự án của bạn. Tôi khuyên bạn nên đặt tên có liên quan (như Trang web nvision) trong trường hợp bạn kết thúc việc tạo nhiều dự án trong tài khoản của mình.

Nhấp vào liên kết Tiếp theo .

Bước 2 – Tạo Tài khoản Thanh toán

Thiết lập thanh toán trên tài khoản Google

Khi bạn đã tạo dự án của mình ở Bước 1, bạn sẽ được chuyển hướng đến trang nhắc bạn bật thanh toán cho dự án của mình. Nếu bạn nhấp vào liên kết Hủy, bạn sẽ được quay lại màn hình trước đó và sẽ không thể tiếp tục chuyển tiếp vì tài liệu Nền tảng Google Maps nêu rõ rằng bạn phải bật thanh toán bằng thẻ tín dụng cho tất cả các dự án của mình.

Xem Thêm  Cách căn giữa mọi thứ bằng CSS - Căn chỉnh Div, Text, v.v. - căn giữa một đối tượng css

Nhấp vào liên kết Tạo tài khoản thanh toán để bắt đầu thiết lập tài khoản của bạn.

Thiết lập tài khoản Google Cloud Platform

Bạn sẽ được nhắc thiết lập tài khoản của mình trong Google Cloud Platform .

Chỉ định quốc gia của bạn, tùy chọn đăng ký nhận bản tin của họ, đồng thời đọc và đồng ý với các điều khoản của họ.

Nhấp vào nút Tiếp tục .

Google Cloud Platform Billing Screen

Cung cấp thông tin thanh toán của bạn và nhấp vào nút Bắt đầu bản dùng thử miễn phí của tôi .

Bước 3a – Tạo khóa API của bạn từ lời nhắc

Câu hỏi ban đầu về dự án Google Maps. Cung cấp thông tin chi tiết về dự án của bạn hoặc bỏ qua các câu hỏi.

Sau khi thiết lập tài khoản thanh toán, bạn sẽ được chuyển hướng đến trang tổng quan Google Cloud Platform. Trong lần truy cập đầu tiên, bạn sẽ được nhắc với một số câu hỏi ban đầu về dự án của mình. Chọn câu trả lời thích hợp nhất từ ​​menu thả xuống hoặc sử dụng nút Bỏ qua.

Khi bạn đã trả lời (hoặc bỏ qua) các câu hỏi, bạn sẽ được nhắc Bật các API của mình.

Nhấp vào liên kết Tiếp theo .

Nút để sao chép khóa API Google Maps

Bạn có thể sử dụng nút sao chép để sao chép khóa API vào khay nhớ tạm và bắt đầu sử dụng nó trên các trang web của mình nhưng tôi khuyên bạn nên áp dụng hạn chế đối với khóa API của mình trước khi làm như vậy.

Hạn chế này sẽ cho phép khóa của bạn chỉ hoạt động khi được yêu cầu từ trang web hoặc ứng dụng của bạn (điều này được khuyến nghị để ngăn việc sử dụng trái phép khóa API của bạn).

Bước 3b – Tạo khóa API của bạn từ trang tổng quan

Google Maps Tạo khóa API

Nếu bạn không được nhắc với tùy chọn tạo khóa API mới như được hiển thị trong Bước 3a hoặc nếu bạn muốn tạo khóa mới mà không làm theo lời nhắc Bắt đầu, bạn có thể tạo khóa mới bằng cách đi tới phần sau url:
https://console.cloud.google.com/apis/credentials

Nhấp vào nút Tạo thông tin đăng nhập và chọn tùy chọn Khóa API .

Bước 4 – Hạn chế Khóa API của bạn đối với Trang web của bạn

Bạn sẽ muốn áp dụng một hạn chế đối với khóa API của mình để khóa API chỉ hoạt động trên trang web / ứng dụng của bạn nhằm ngăn chặn việc sử dụng trái phép. Nền tảng này cung cấp cho bạn nhiều phương pháp hạn chế.

Các tùy chọn của bạn là:

  • Không có
  • Các liên kết giới thiệu HTTP (các trang web)
  • Địa chỉ IP (máy chủ web, cron job, v.v.)
  • Ứng dụng Android
  • Ứng dụng iOS

Tùy thuộc vào cách bạn đến thời điểm này (Bước 3a hoặc Bước 3b), sẽ có một số cách để chuyển đến chế độ xem Chỉnh sửa của khóa API của bạn để áp dụng hạn chế.

Google Maps đi tới liên kết API Console

Nếu đến đây qua Bước 3a, bạn có thể áp dụng hạn chế cho khóa API của mình bằng cách nhấp vào liên kết Bảng điều khiển API .

Hạn chế khóa API Google Maps

Nếu đến đây qua Bước 3b, bạn có thể áp dụng hạn chế cho khóa API của mình bằng cách nhấp vào liên kết Khóa hạn chế .

Nút chính chỉnh sửa Google Maps

Hoặc bạn có thể nhấp vào nút chỉnh sửa trên bảng Thông tin đăng nhập .

Cài đặt khóa API Google Maps

Trên màn hình Chỉnh sửa khóa API, bạn sẽ muốn:

  • Đổi tên khóa của bạn thành một thứ phù hợp hơn khóa API, khóa API 2, v.v. Tôi khuyên bạn nên sử dụng các tên như Khóa API của Bản đồ định vị cửa hàng.
  • Thay đổi cài đặt Hạn chế ứng dụng thành Liên kết giới thiệu HTTP (trang web) để chỉ có thể sử dụng cài đặt này trên trang web của bạn.
  • Cung cấp url cho trang chủ của trang web của bạn

    https://yourdomainname.com

    , theo sau là một

    / *

    . Điều này cho phép khóa được sử dụng trên tất cả các trang trong trang web của bạn.

Bước 5 – Thư viện API của Google Maps (Tùy chọn)

Tùy thuộc vào việc bạn định sử dụng khóa API để làm gì, bạn có thể cần bật các API bổ sung thông qua Thư viện API.

Hầu hết các dự án của chúng tôi đều có chức năng Google Maps tương tự và việc bật API JavaScript của Maps cùng với API địa điểm đáp ứng nhu cầu của chúng tôi.

Chúng tôi sử dụng plugin ACF ( Trường tùy chỉnh nâng cao ) trên các trang web WordPress của chúng tôi, vì vậy cần có thư viện API Địa điểm để tìm kiếm các vị trí trong Google Maps loại trường.

Để bật Thư viện API trong dự án của bạn, chỉ cần nhấp vào thư viện trong trang tổng quan Thư viện. Bạn sẽ được đưa đến trang tổng quan của thư viện API đó. Đọc qua thông tin và nếu thư viện giống như thứ mà bạn cần trên bản đồ Google Maps của mình, hãy nhấp vào nút Bật .

Bước 6 – Cập nhật khóa API Google Maps trên trang web / ứng dụng của bạn

làm tốt lắm công việc tốt

Giờ đây, khóa API Google Maps mới của bạn đã được thiết lập xong và sẵn sàng sử dụng, chỉ cần cập nhật khóa trong trang web hoặc ứng dụng của bạn ở những nơi thích hợp.

Nếu bạn không chắc nơi cập nhật cần diễn ra, hãy liên hệ với nhà phát triển hoặc quản trị viên web của bạn để quản lý bản cập nhật cho bạn.

Cập nhật sẽ xảy ra trong một tập lệnh trông giống như sau:

 https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap 

Cảm ơn đã đọc!

Cảm ơn bạn đã xem bài viết này. Nếu bạn nhận thấy bất kỳ lỗi nào trong các hướng dẫn ở trên hoặc có đề xuất cải tiến, chỉ cần gửi cho tôi nhận xét bên dưới. Mọi phản hồi đều được hoan nghênh 🙂


Xem thêm những thông tin liên quan đến chủ đề google maps api tạo bản đồ

Build and Deploy a Google Maps Travel Companion Application | React.js

alt

  • Tác giả: JavaScript Mastery
  • Ngày đăng: 2021-08-06
  • Đánh giá: 4 ⭐ ( 9610 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Geolocation, Google Maps API & Google Places API, fetching API data based on the location, data filtering are just some features that make this Travel Advisor App the best Maps Application that you can currently find on YouTube 🔥

    💻JS Mastery Pro – https://jsmastery.pro?discount=youtube
    ✅ A special YOUTUBE discount code is automatically applied!

    ⭐ RapidAPI – https://rapidapi.com/hub?utm_source=youtube.com/JavaScriptMastery&utm_medium=DevRel&utm_campaign=DevRel
    ⭐ Travel Advisor API – https://rapidapi.com/apidojo/api/travel-advisor?utm_source=youtube.com/JavaScriptMastery&utm_medium=DevRel&utm_campaign=DevRel
    ⭐ Open Weather Map API – https://rapidapi.com/community/api/open-weather-map?utm_source=youtube.com/JavaScriptMastery&utm_medium=DevRel&utm_campaign=DevRel

    If you get: “This page can’t load Google Maps correctly.” and “For development purposes only.” that means that you have to enter your billing details. Google requires that to verify your identity and distinguish actual people from robots. You’ll be getting free $200 worth of API requests indefinitely and you will NOT be charged.

    📚 Materials/References:
    GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/project_travel_advisor
    Styles & Other Code: https://gist.github.com/adrianhajdin/ede527249054b7abbdf4e3a9fac95b5e

    📧 Join our JavaScript Mastery’s Newsletter on Web Development, JavaScript & React to get exclusive programming guides, tips & tricks, and entire e-books: https://resource.jsmasterypro.com/newsletter 🔥

    ⭐Hostinger is my personal recommendation for hosting – https://www.hostinger.com/javascriptmastery
    Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.

    In this video, you’ll learn:
    – Advanced React Best Practices, such as folder & file structure, hooks, and refs
    – Creating a User Interface using Material UI
    – Working with Google Maps API
    – fetching data from unlimited sources using RapidAPI

    Project created in collaboration with Enyel Sequeira – https://www.enyelsequeira.com
    Want me to cover the project you’ve created? Send me an e-mail 👌

    💻 Master JavaScript: https://www.completepathtojavascriptmastery.com/
    Use the special promo code “YOUTUBE” on checkout to save $60!

    ❤️ Support JavaScript Mastery & Suggest Future Videos:
    BuyMeACoffe: https://www.buymeacoffee.com/JSMastery
    Patreon: https://www.patreon.com/javascriptmastery

    🌎 Find Me Here:
    Discord Group: https://discord.gg/n6EdbFJ
    Instagram: https://instagram.com/javascriptmastery
    Twitter: https://twitter.com/jsmasterypro

    💼 Business Inquiries:
    E-mail: javascriptmastery00@gmail.com

    Time Stamps 👇
    00:00:00 Intro
    00:02:10 Setup
    00:03:32 Demo
    00:07:09 Project Setup
    00:13:02 Folder Structure
    00:19:19 Header
    00:27:40 Map
    00:35:42 List
    00:45:51 Working with APIs
    01:05:08 Place Card
    01:20:39 Display Places on the Map
    01:27:53 Scroll Places & Filters
    01:46:39 Places Search
    01:57:24 Weather API
    02:04:18 Change Map Styles
    02:06:08 ENV
    02:10:06 Deployment

Tạo Google Maps API Key để chèn bản đồ vào WordPress

  • Tác giả: abweb.vn
  • Đánh giá: 5 ⭐ ( 2648 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sau khi Google cập nhật chính sách mới về việc chèn Google Maps vào blog/ website, chắc hẳn nhiều bạn sẽ cảm thấy hoang mang vì bản đồ không còn hiển thị được như trước đó nữa. Thay vào đấy là những dòng thông báo lỗi kiểu như “Google Maps API error: MissingKeyMapError”. Nguyên nhân của việc này là do giờ đây Google yêu cầu phải có API Key thì mới cho hiển thị Google Maps. Vậy cách tạo Google Maps API Key như thế nào? Trong bài viết hôm nay, tôi sẽ hướng dẫn cho các bạn cách để làm điều đó.

Cách tạo nhiều bản đồ địa điểm đơn giản với Google Maps API

  • Tác giả: lamvt.vn
  • Đánh giá: 3 ⭐ ( 8312 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã từng tạo trang địa điểm cho một nhà hàng có nhiều vị trí. Đây là một xu hướng áp đảo, một bản đồ Google mà với mỗi vị trí có một điểm đánh dấu riêng.

Cách tạo Google Maps API Key để hiển thị bản đồ trên website

  • Tác giả: muatheme.com
  • Đánh giá: 3 ⭐ ( 6559 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để có thể tích hợp dịch vụ Google Maps cho website / ứng dụng của mình bạn cần phải tạo Google Maps Api Key.

Kieu Trong Khanh: Google API – Tạo một bản đồ trên web với Google Maps API

  • Tác giả: www.kieutrongkhanh.net
  • Đánh giá: 4 ⭐ ( 1475 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử dụng google map API để hiện bản đồ,tìm địa điểm, tìm đường đi + báo cáo + code + slide

  • Tác giả: sharecode.vn
  • Đánh giá: 5 ⭐ ( 3539 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng google map API để hiện bản đồ,tìm địa điểm, tìm đường đi. Các bước tạo lấy key map API.

Tạo bản đồ địa điểm với Google Maps API

  • Tác giả: hocwp.net
  • Đánh giá: 4 ⭐ ( 2312 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  4 cách bạn có thể kết nối Python với MySQL - ví dụ về python trình kết nối mysql