14 Tháng 12, 2016 Tác giả: Thịnh Nguyễn Chuyên mục: Công cụ

Hướng dẫn đăng ký Google để tạo key API Google Map

Hiện nay Google Map là một công cụ bản đồ tốt nhất hiện nay, nhưng không chỉ dừng ở việc giúp người dùng định vị mà nó còn cho phép bạn nhúng map cùng địa chỉ tọa độ văn phòng, công ty của bạn vào website.

Việc mà bạn đính Google Map mà có hiển thị được tạo độ bản đồ vị trí công ty, văn phòng của bạn có ích rất nhiều. Lý do giúp người truy cập website biết được vị trí của công ty bạn ngay trên bản đồ thay vì phải vào Google Map để tìm kiếm. Nhưng khi bạn nhúng thì sẽ có một vấn đề đó là mã nhũng mà Google cung cấp là dạng API. Nếu không có mã key API thì dù bạn có nhúng đi chăng nữa cũng không thể hiển thị được bản đồ. Tuy nhiên điều đó không khó khăn gì hết và ở bài này Thịnh chia sẻ với bạn cách tạo mã key API Google Map.

Lưu ý: Sau khi tạo API key Google Map thì bạn cũng cần xác định được tạo độ chính xác địa chỉ trên Google Map thì bạn mới đính được vị trí công ty hay văn phòng của bạn. Vấn đề làm sao để xác định được tọa độ trên Google Map và lấy được thông số thì sẽ có ở bài hướng dẫn kết tiếp.

Các bước tạo key API Google Map.

  1. Đầu tiên bạn truy cập trang develop của google: liên kết.
  2. Tại đây bạn có 2 lựa chọn.
    get-api-key

    1. Bạn bấm vào nút “GET A KEY” để tạo project rồi mới tạo key.
    2. Nếu bạn không sử dụng nút “GET A KEY” thì bạn bấm vào liên kết “Google API Console” trong phần “Go to the Google API Console” như hình trên.
  3. Nếu bạn không sử dụng nút “GET A KEY” thì khi bạn vào phần Google API Console nó sẽ hỏi bạn lựa chọn tạo mới hoặc lựa chọn project đã có sẵn. Nếu chưa tạo thì bấm vào nút “Continue”. Nếu có rồi thì chọn ở nút “Creat a project” để hiển thị lựa chọn project đã có hoặc lựa chọn là tạo mới. Ở đây mình tạo mới cho các bạn dễ hiểu hơn.
    create-project
  4. Sau khi bấm tiếp tục bạn sẽ được hỏi một số thứ nhưng bạn bỏ qua mà chuyển qua tab như mũi tên như hình dưới. Bên phải bạn sẽ thấy phần “Google Maps AIPs” và bạn bấm vào “more” để mở ra và chọn “Google Maps Embed API”.
    library-google-api
  5. Tiếp đến bạn bấm vào dòng chữ “Embed” như hình dưới.
    google-maps-embed-api
  6. Sau khi kích hoạt xong bạn quay về tab Credentials và chọn “API key” như hình.
    credentials-google-api
  7. Sau khi bấm bạn sẽ phải điền các thông số như hình dưới.
    credentials-google-api-1

    • Bạn điền tên API key 1 thành tên của bạn muốn.
    • Key restriction bạn tích chọn http.
    • Form bạn điền là domain.
  8. Sau khi điền xong bạn bấm vào nút “Create” là bạn sẽ có mã api và copy sử dụng chúng. Sau khi copy bạn bấm vào nút “Restrict key”.
    api-key-created

Như vậy là xong, bây giờ bạn đã có API key của Google map để sử dụng cho mục đích của bạn. Ở bài tiếp theo mình sẽ hướng dãn bạn tạo map ngay trong website của bạn.

Tác giả: Thịnh Nguyễn

Chuyên gia chia sẻ kiến thức về lập trình, thiết kế web và tối ưu hệ thống server.

Chia sẻ bài viết này:

3 bình luận

  • Hoàng

    19/07/2019 lúc 15:44

    Cảm ơn bài viết anh đã chia sẻ.
    Anh ơi cho em hỏi là lúc load trang thì bị “Trang này không thể tải Google Maps đúng cách.” và bị watermark “For development purposes only” trên bản đồ.
    Có phải mình cần trải $300 để active không ạ?

    • Thịnh Nguyễn

      19/07/2019 lúc 15:51

      Với chính sách mới của google thì tạo API sẽ mất phí, nhưng với tài khoản của mình cũ vẫn dùng thoải mãi không mất phí, và bạn kiểm tra lại sử dụng map javascrip API, mình vô cái đó tạo bình thường

  • Hoàng

    19/07/2019 lúc 15:44

    Cảm ơn bài viết anh đã chia sẻ.
    Anh ơi cho em hỏi là lúc load trang thì bị “Trang này không thể tải Google Maps đúng cách.” và bị watermark “For development purposes only” trên bản đồ.
    Có phải mình cần trải $300 để active không ạ?

Để lại bình luận của bạn

Địa chỉ email của bạn sẽ không được công bố rộng rãi. Các trường bắt buộc được đánh dấu *

Bài viết liên quan

Hướng dẫn cách tải về code được chia sẻ trên trang gitlab.com

Bài trước mình hướng dẫn các bạn cách tạo tài khoản gitlab trên trang gitlab thì bài này là cách tải về code được mình share trên trang gitlab.com. Sau khi bạn xem xong hướng dẫn bạn hoàn toàn có thể download về cũng như lời giải đáp cho các bạn đang muốn lấy được […]

Xem chi tiết →

Hướng dẫn nâng dung lượng import cơ sở dữ liệu vào phpmyadmin trên Xampp

Xin chào tất cả các bạn, hôm nay Thịnh rảnh rỗi làm một hướng dẫn nho nhỏ giúp các bạn có thể nâng dung lượng import cơ sở dữ liệu vào phpmyadmin trên Xampp để thuận tiện cho quá trình bạn lập trình web hơn. Lý do tại sao lại phải nâng dung lượng import […]

Xem chi tiết →

Sử dụng Zopim Live Chat cho hệ thống hỗ trợ trực tuyến của website

Zopim Live Chat hay gọi nhanh là zopim là một trong những dịch vụ tạo live chat tốt nhất hiện nay dành cho các website chuyên về thương mại điện tử và dịch vụ. Với Zopim Live Chat bạn hoàn toàn có thể chủ động chát trực tiếp với khách hàng ngay trên website thông […]

Xem chi tiết →