Thêm Google Maps có điểm đánh dấu bằng HTML

Giới thiệu

Hướng dẫn này trình bày cách thêm bản đồ Google có điểm đánh dấu vào trang web bằng các phần tử HTML tuỳ chỉnh. Đây là bản đồ mà bạn sẽ tạo bằng hướng dẫn này. Điểm đánh dấu được đặt tại Ottumwa, Iowa.

Bắt đầu

Sau đây là các bước chúng ta sẽ thực hiện để tạo bản đồ Google có điểm đánh dấu bằng HTML:

  1. Lấy 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 nổi tiếng 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 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 Maps JavaScript API bằng khoá API của riêng bạn.

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

  1. Chuyển đến 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 quy tắc hạn chế đối với khoá API). Lưu ý: Nếu có khoá API hiện có không bị hạn chế hoặc khoá có các quy tắc hạn chế đối với trình duyệt, bạn có thể sử dụng khoá đó.

  5. Để tránh bị đánh cắp hạn mức và bảo mật khoá API, hãy xem bài viết Sử dụng khoá API.

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

  7. Bây giờ, bạn đã sẵn sàng sử dụng khoá API.

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

Sau đây là mã cho một 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 nạp khởi động cho Maps JavaScript API, như 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&libraries=maps,marker"
    defer
></script>

Vì trang HTML phải độc lập, hãy thêm mã CSS trực tiếp vào trang:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

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 rồi dán vào body của trang HTML:

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Thao tác này sẽ tạo một bản đồ tập trung vào Ottumwa, Iowa, nhưng chưa có điểm đánh dấu.

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

Để thêm đ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 rồi dán lên toàn bộ gmp-map mà bạn đã thêm ở bước trước.

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

Mã trước đó sẽ thêm điểm đánh dấu vào bả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).

Hãy dùng thử ví dụ hoàn chỉnh trên JSFiddle.

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

  • Bạn có thể tuỳ chỉnh bản đồ bằng kiểu tuỳ chỉnh styling.
  • 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 để kiểm thử và chạy mã, đọc báo cáo lỗi và giải quyết các 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 Mac) hoặc Control+Shift+J (trên Windows).

  • Hãy làm theo các bước bên dưới để lấy toạ độ (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 cần lấy toạ độ.
    3. Chọn Địa điểm này là gì trong trình đơn theo bối cảnh xuất hiện. Bản đồ sẽ hiển thị một thẻ ở cuối màn hình. Tìm toạ độ (vĩ độ và kinh độ) trong hàng cuối cùng của thẻ.

  • Bạn có thể chuyển đổi địa chỉ thành toạ độ (vĩ độ và kinh độ) bằng Dịch vụ mã hoá địa lý. Hướng dẫn dành 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 đồ cuối cùng và mã ví dụ đầy đủ được dùng cho hướng dẫn này.

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>