Thêm Bản đồ Google với Điểm đánh dấu bằng HTML

Giới thiệu

Hướng dẫn này chỉ cho bạn cách thêm bản đồ Google có điểm đánh dấu vào một trang web bằng HTML. Dưới đây là bản đồ mà bạn sẽ tạo bằng hướng dẫn này. Hai điểm đánh dấu được định vị, một ở Mountain View, CA và một ở Seattle, WA.

Bắt đầu

Dưới đây là những bước mà chúng ta sẽ đề cập đến để tạo bản đồ Google có điểm đánh dấu bằng cách sử dụng HTML:

  1. Tải khoá API
  2. Tạo HTML, CSS và JS
  3. Thêm bản đồ
  4. Thêm điểm đánh dấu

Bạn cần có một trình duyệt web. Hãy chọn một trình duyệt phổ biến như Google Chrome (nên dùng), Firefox, Safari hoặc Edge, dựa trên nền tảng của bạn trong danh sách các trình duyệt được hỗ trợ.

Bước 1: Lấy khoá API

Phần này giải thích cách xác thực ứng dụng của bạn với API JavaScript của Maps bằng cách sử dụng khoá API của riêng bạn.

Hãy làm theo các bước sau để nhận khoá API:

  1. Truy cập vào Bảng điều khiển Google Cloud.

  2. Tạo hoặc chọn một dự án.

  3. Nhấp vào Tiếp tục để bật API và mọi dịch vụ liên quan.

  4. Trên trang Thông tin xác thực, hãy lấy khoá API (và đặt các hạn chế đối với khoá API). Lưu ý: Nếu đang có khoá API không bị hạn chế hoặc khoá có các hạn chế về trình duyệt, bạn có thể sử dụng khoá đó.

  5. Để ngăn chặn hành vi đánh cắp hạn mức và bảo mật khoá API, hãy xem phần Sử dụng khoá API.

  6. Bật tính năng thanh toán. Hãy xem bài viết Mức sử dụng và thanh toán để biết thêm thông tin.

  7. Giờ thì bạn đã có thể sử dụng khoá API.

Bước 2: Tạo HTML, CSS và JS

Dưới đây là mã cho trang web HTML cơ bản:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Để tải bản đồ, bạn phải thêm thẻ script chứa trình tải khởi động cho API Maps JavaScript, như minh hoạ trong đoạn mã sau (thêm khoá API của riêng bạn):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps,marker&v=beta" defer>
</script>

Cảnh báo tiết lộ nội dung: Hãy thử ví dụ hoàn chỉnh trên JSFiddle.

Bước 3: Thêm bản đồ

Để thêm bản đồ Google vào trang, hãy sao chép phần tử HTML gmp-map và dán phần tử đó vào trong body của trang HTML:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Điều này dẫn đến bản đồ sau:

Bản đồ bạn vừa tạo nằm ở giữa khu vực đô thị San Jose.

Bước 4: Thêm điểm đánh dấu

Để thêm một điểm đánh dấu vào bản đồ, hãy sử dụng phần tử HTML gmp-advanced-marker. Sao chép đoạn mã sau và dán lên toàn bộ gmp-map mà bạn đã thêm ở bước trước.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Mã trước đó thêm 2 điểm đánh dấu cũng như thay đổi tham số zoom và center trên gmp-map để cho thấy các điểm đánh dấu đó tốt hơn. Bạn phải có mã bản đồ để sử dụng Điểm đánh dấu nâng cao (bạn có thể sử dụng DEMO_MAP_ID).

Mẹo và khắc phục sự cố

  • Bạn có thể tuỳ chỉnh bản đồ bằng tính năng tạo kiểu tuỳ chỉnh.
  • Sử dụng Bảng điều khiển công cụ dành cho nhà phát triển trong trình duyệt web của bạn để kiểm thử và chạy mã, đọc báo cáo lỗi và giải quyết vấn đề với mã của bạn.
  • Sử dụng các phím tắt sau để mở bảng điều khiển trong Chrome:
    Command+Option+J (trên máy Mac) hoặc Control+Shift+J (trên Windows).

  • Hãy làm theo các bước bên dưới để nhận vĩ độ và kinh độ cho một vị trí trên Google Maps.

    1. Mở Google Maps trong trình duyệt.
    2. Nhấp chuột phải vào vị trí chính xác trên bản đồ mà bạn yêu cầu toạ độ.
    3. Chọn Đây là gì từ trình đơn theo bối cảnh xuất hiện. Bản đồ hiển thị một thẻ ở cuối màn hình. Tìm vĩ độ và kinh độ ở hàng cuối cùng của thẻ.

  • Bạn có thể chuyển đổi địa chỉ thành vĩ độ và kinh độ bằng dịch vụ Mã hoá địa lý. Hướng dẫn cho nhà phát triển cung cấp thông tin chi tiết về cách bắt đầu sử dụng dịch vụ Mã hoá địa lý.

Mã ví dụ đầy đủ

Sau đây là bản đồ hoàn thiện và mã mẫu đầy đủ được sử dụng cho hướng dẫn này.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html