Trang này được dịch bởi Cloud Translation API.

Thêm Google Maps bằng điểm đánh dấu vào trang web của bạn

Giới thiệu

Hướng dẫn này cho bạn biết cách thêm một bản đồ Google đơn giản có một điểm đánh dấu vào một trang web. Nền tảng này phù hợp với những người có kiến thức cơ bản hoặc trung cấp về HTML và CSS và một chút kiến thức về JavaScript. Để được hướng dẫn nâng cao về cách tạo bản đồ, hãy đọc hướng dẫn của nhà phát triển.

Dưới đây là bản đồ mà bạn sẽ tạo bằng cách sử dụng hướng dẫn này. Điểm đánh dấu nằm tại Uluru (hay còn gọi là Ayers Rock) trong Vườn quốc gia Uluru-Kata Tjuta.

Phần dưới đây cho thấy toàn bộ mã bạn cần để tạo bản đồ trong hướng dẫn này.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

HTML

<html>
  <head>
    <title>Add Map</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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Thử mẫu

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Bắt đầu

Có ba bước để tạo bản đồ Google có điểm đánh dấu trên trang web của bạn:

Tạo trang HTML
Thêm bản đồ có điểm đánh dấu
Nhận khoá API

Bạn cần có một trình duyệt web. 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 các trình duyệt được hỗ trợ.

Bước 1: Tạo một trang HTML

Sau đây là mã cho một trang web HTML cơ bản:

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Hãy lưu ý rằng đây là một trang rất cơ bản, có tiêu đề cấp ba (h3) và một phần tử div. Bạn có thể thêm bất kỳ nội dung nào bạn thích vào trang web.

Hiểu mã

Mã bên dưới sẽ tạo một trang HTML bao gồm phần đầu và phần nội dung.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Bạn có thể thêm cấp độ tiêu đề ba ở trên bản đồ bằng cách sử dụng mã bên dưới.

<h3>My Google Maps Demo</h3>

Mã dưới đây xác định một khu vực của trang cho Google Maps của bạn.

<!--The div element for the map -->
<div id="map"></div>

Ở giai đoạn này của hướng dẫn, div chỉ xuất hiện dưới dạng một khối màu xám vì bạn chưa thêm bản đồ. Đoạn mã dưới đây mô tả CSS đặt kích thước và màu sắc của div.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}

Trong mã trên, phần tử style đặt kích thước div cho bản đồ của bạn. Đặt chiều rộng và chiều cao của div thành lớn hơn 0px để bản đồ hiển thị. Trong trường hợp này, div được đặt thành chiều cao 400 pixel và chiều rộng là 100% để hiển thị trên chiều rộng của trang web.

Bước 2: Thêm bản đồ có điểm đánh dấu

Phần này cho bạn biết cách tải API JavaScript của Maps vào trang web và cách viết JavaScript của riêng bạn sử dụng API để thêm bản đồ kèm theo điểm đánh dấu.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

HTML

<html>
  <head>
    <title>Add Map</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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Thử mẫu

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Hiểu mã

Trong mã bên dưới, script tải API từ URL được chỉ định.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Trong mã trên, tham số callback thực thi hàm initMap sau khi API tải. Thuộc tính async cho phép trình duyệt tiếp tục phân tích cú pháp phần còn lại của trang trong khi API tải. Sau khi tải, trình duyệt sẽ tạm dừng và thực thi tập lệnh ngay lập tức. Thông số key chứa khoá API của bạn.

Xem Bước 3: Lấy khóa API để biết hướng dẫn về cách nhận khóa API của riêng bạn sau.

Mã bên dưới chứa hàm initMap để khởi chạy và thêm bản đồ khi trang web tải. Hãy sử dụng thẻ script để bao gồm JavaScript của riêng bạn, trong đó có chứa hàm initMap.

  function initMap() {}

Thêm hàm document.getElementById() để tìm bản đồ div trên trang web.

Mã dưới đây tạo một đối tượng mới của Google Maps và thêm các thuộc tính vào bản đồ, bao gồm cả trung tâm và mức thu phóng. Vui lòng xem tài liệu về các tuỳ chọn khác về thuộc tính.

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);index.ts

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});index.js

Trong mã trên, new google.maps.Map() tạo một đối tượng Google Maps mới. Thuộc tính center cho API biết vị trí của bản đồ.

Tìm hiểu thêm về cách lấy vĩ độ/kinh độ hoặc chuyển đổi địa chỉ thành toạ độ địa lý.

Thuộc tính zoom chỉ định mức thu phóng cho bản đồ. Thu phóng: 0 là mức thu phóng thấp nhất và hiển thị toàn bộ trái đất. Đặt giá trị thu phóng cao hơn để phóng to tới trái đất ở độ phân giải cao hơn.

Mã dưới đây sẽ đặt một điểm đánh dấu trên bản đồ. Thuộc tính position thiết lập vị trí của điểm đánh dấu.

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.js

Tìm hiểu thêm về điểm đánh dấu:

Bước 3: Nhận 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 cho 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 để lấy khoá API:

Chuyển đến Google Cloud Console.
Tạo hoặc chọn một dự án
Nhấp vào Tiếp tục để bật API và mọi dịch vụ có liên quan.
Trên trang Thông tin xác thực, hãy lấy khoá API (và đặt các quy định 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ó quy định hạn chế của trình duyệt, bạn có thể sử dụng khoá đó.
Để tránh bị đánh cắp hạn mức và bảo mật khoá API, hãy xem phần Sử dụng khoá API.
Bật tính năng thanh toán. Xem phần Mức sử dụng và thanh toán để biết thêm thông tin.
Sao chép toàn bộ mã của hướng dẫn này từ trang này vào trình chỉnh sửa văn bản.
Thay thế giá trị của tham số key trong URL bằng khoá API của riêng bạn (tức là khoá API mà bạn vừa nhận được).
```
<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
```
Lưu tệp này với tên kết thúc bằng .html, như index.html.
Tải tệp HTML trong một trình duyệt web bằng cách kéo tệp từ máy tính để bàn vào trình duyệt của bạn. Ngoài ra, thao tác nhấp đúp vào tệp hoạt động trên hầu hết các hệ điều hành.

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

Bạn có thể điều chỉnh các tùy chọn như kiểu và thuộc tính để tùy chỉnh bản đồ. Để biết thêm thông tin về cách tuỳ chỉnh bản đồ, hãy đọc hướng dẫn về cách tạo kiểu và vẽ trên bản đồ.
Sử dụng Developer Tools Console 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 các vấn đề với mã.
Sử dụng 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).
Làm theo các bước bên dưới để lấy tọa độ theo vĩ độ và kinh độ của 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 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ạ độ theo vĩ độ và kinh độ bằng cách sử dụ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ý.