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

Thêm bản đồ vào trang web (JavaScript)

1. Trước khi bắt đầu

Trong lớp học lập trình này, bạn sẽ tìm hiểu mọi thứ cần thiết để bắt đầu sử dụng Google Maps Platform cho web. Bạn sẽ tìm hiểu tất cả các kiến thức cơ bản, từ cách thiết lập đến tải API JavaScript của Maps, hiển thị bản đồ đầu tiên, xử lý các điểm đánh dấu và cụm điểm đánh dấu, vẽ trên bản đồ và xử lý hoạt động tương tác của người dùng.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ tạo một ứng dụng web đơn giản có thể làm những việc sau:

Tải Maps JavaScript API
Hiển thị bản đồ có tâm là Sydney, Úc
Hiển thị các điểm đánh dấu tuỳ chỉnh cho những điểm tham quan nổi tiếng ở Sydney
Triển khai tính năng phân cụm điểm đánh dấu
Cho phép người dùng tương tác để căn giữa lại và vẽ một vòng tròn trên bản đồ khi nhấp vào một điểm đánh dấu

Kiến thức bạn sẽ học được

Bắt đầu sử dụng Nền tảng Google Maps
Tải Maps JavaScript API một cách linh động từ mã JavaScript
Tải bản đồ
Sử dụng điểm đánh dấu, điểm đánh dấu tuỳ chỉnh và tính năng phân cụm điểm đánh dấu
Làm việc với hệ thống sự kiện Maps JavaScript API để cung cấp hoạt động tương tác của người dùng
Kiểm soát bản đồ một cách linh động
Vẽ trên bản đồ

2. Điều kiện tiên quyết

Bạn cần làm quen với những mục dưới đây để hoàn tất Lớp học lập trình này. Nếu bạn đã quen với việc sử dụng Nền tảng Google Maps, hãy chuyển đến phần Lớp học lập trình!

Các sản phẩm bắt buộc của Nền tảng Google Maps

Trong Lớp học lập trình này, bạn sẽ sử dụng các sản phẩm sau đây của Nền tảng Google Maps:

Maps JavaScript API
Thư viện phân cụm điểm đánh dấu nguồn mở MarkerClustererPlus

Các yêu cầu khác đối với lớp học lập trình này

Để hoàn tất lớp học lập trình này, bạn cần có các tài khoản, dịch vụ và công cụ sau:

Tài khoản Google Cloud Platform có bật tính năng thanh toán
Khoá API Google Maps Platform có API JavaScript của Maps được bật
Kiến thức cơ bản về JavaScript, HTML và CSS
Node.js đã được cài đặt trên máy tính
Trình chỉnh sửa văn bản hoặc IDE mà bạn chọn

Bắt đầu sử dụng Nền tảng Google Maps

Nếu bạn chưa từng sử dụng Nền tảng Google Maps, hãy làm theo hướng dẫn Bắt đầu sử dụng Nền tảng Google Maps hoặc xem danh sách phát Bắt đầu sử dụng Nền tảng Google Maps để hoàn tất các bước sau:

Tạo tài khoản thanh toán.
Tạo dự án.
Bật các API và SDK của Nền tảng Google Maps (được liệt kê trong phần trước).
Tạo khoá API.

3. Bắt đầu thiết lập

Thiết lập Nền tảng Google Maps

Nếu bạn chưa có tài khoản Google Cloud Platform và dự án có bật tính năng thanh toán, vui lòng xem hướng dẫn Bắt đầu sử dụng Google Maps Platform để tạo tài khoản thanh toán và dự án.

Trong Cloud Console, hãy nhấp vào trình đơn thả xuống dự án rồi chọn dự án mà bạn muốn sử dụng cho lớp học lập trình này.

Bật các API và SDK của Google Maps Platform cần thiết cho lớp học lập trình này trong Google Cloud Marketplace. Để làm như vậy, hãy làm theo các bước trong video này hoặc tài liệu này.
Tạo khoá API trong trang Thông tin xác thực của Cloud Console. Bạn có thể làm theo các bước trong video này hoặc tài liệu này. Tất cả các yêu cầu gửi đến Nền tảng Google Maps đều cần có khoá API.

Thiết lập Node.js

Nếu bạn chưa có, hãy truy cập vào https://nodejs.org/ để tải và cài đặt thời gian chạy Node.js trên máy tính.

Node.js đi kèm với trình quản lý gói npm. Bạn cần cài đặt các phần phụ thuộc cho lớp học lập trình này.

Thiết lập mẫu dự án khởi đầu

Trước khi bắt đầu lớp học lập trình này, hãy làm như sau để tải mẫu dự án khởi đầu cũng như mã giải pháp hoàn chỉnh xuống:

Tải xuống hoặc phân nhánh kho lưu trữ GitHub cho lớp học lập trình này tại https://github.com/googlecodelabs/maps-platform-101-js.

Dự án khởi đầu nằm trong thư mục /starter và bao gồm cấu trúc tệp cơ bản mà bạn cần để hoàn thành lớp học lập trình. Mọi thứ bạn cần để làm việc đều nằm trong thư mục /starter/src. 2. Sau khi tải dự án khởi đầu xuống, hãy chạy npm install trong thư mục /starter. Thao tác này sẽ cài đặt tất cả các phần phụ thuộc cần thiết có trong package.json. 3. Sau khi bạn cài đặt các phần phụ thuộc, hãy chạy npm start trong thư mục.

Dự án khởi đầu đã được thiết lập để bạn sử dụng webpack-dev-server, trình này sẽ biên dịch và chạy mã mà bạn viết cục bộ. webpack-dev-server cũng tự động tải lại ứng dụng của bạn trong trình duyệt bất cứ khi nào bạn thực hiện thay đổi mã.

Nếu muốn xem đoạn mã giải pháp đầy đủ đang chạy, bạn có thể hoàn tất các bước thiết lập ở trên trong thư mục /solution.

4. Tải Maps JavaScript API

Trước khi bắt đầu, hãy đảm bảo bạn làm theo các bước trong phần Thiết lập. Tất cả đã hoàn tất? Đã đến lúc bạn tạo ứng dụng web đầu tiên bằng Nền tảng Google Maps!

Nền tảng sử dụng Nền tảng Google Maps cho web là Maps JavaScript API. API này cung cấp một giao diện JavaScript để sử dụng tất cả các tính năng của Nền tảng Google Maps, bao gồm cả bản đồ, điểm đánh dấu, công cụ vẽ và các dịch vụ khác của Nền tảng Google Maps, chẳng hạn như Địa điểm.

Nếu đã từng sử dụng Maps JavaScript API, bạn có thể đã quen với việc tải API này bằng cách chèn thẻ script vào tệp HTML như sau:

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

Đây vẫn là một cách hoàn toàn hợp lệ để tải API, nhưng trong JavaScript hiện đại, các phần phụ thuộc thường được đưa vào một cách linh hoạt từ mã. Để hoàn thành việc tương đương với thẻ script ở trên từ mã, bạn sẽ sử dụng mô-đun@googlemaps/js-api-loader. JS API Loader đã được đưa vào các phần phụ thuộc của tệp package.json trong dự án, vì vậy, tệp này đã được cài đặt khi bạn chạy npm install trước đó.

Để sử dụng Trình tải API JS, hãy làm như sau:

Mở /src/app.js. Đây là tệp mà bạn sẽ thực hiện mọi việc trong lớp học lập trình này.
Nhập lớp Loader từ @googlemaps/js-api-loader.

Thêm nội dung sau vào đầu app.js:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
Tạo một đối tượng apiOptions.

Lớp Loader yêu cầu một đối tượng JSON chỉ định nhiều lựa chọn để tải Maps JavaScript API, bao gồm cả khoá API của Google Maps Platform, phiên bản API mà bạn muốn tải và mọi thư viện bổ sung do Maps JS API cung cấp mà bạn muốn tải. Để phục vụ mục đích của lớp học lập trình này, bạn chỉ cần chỉ định khoá API bằng cách thêm nội dung sau vào app.js:
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
Tạo một thực thể của Loader và truyền apiOptions của bạn vào thực thể đó.
```
 const loader = new Loader(apiOptions);
```
Tải Maps JS API.

Để tải API, hãy gọi load() trên thực thể Loader. Trình tải API JS trả về một promise sẽ phân giải sau khi API được tải và sẵn sàng sử dụng. Thêm phần khai báo sau để tải API và xử lý lời hứa:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

Nếu mọi thứ diễn ra suôn sẻ, bạn sẽ thấy câu lệnh console.log trong bảng điều khiển trình duyệt. Khi dùng Chrome, bạn có thể truy cập vào cửa sổ bổ sung này tại Xem -> Nhà phát triển -> Bảng điều khiển JavaScript.

Tóm lại, giờ đây, bạn đã tải động Maps JavaScript API từ mã và xác định hàm gọi lại được thực thi sau khi Maps JavaScript API tải xong.

Tệp app.js của bạn sẽ có dạng như sau:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.load().then(() => {
      console.log('Maps JS API Loaded');
    });

Giờ đây, API JavaScript của Maps đã được tải, bạn sẽ tải bản đồ ở bước tiếp theo.

5. Hiển thị bản đồ

Đã đến lúc hiển thị bản đồ đầu tiên của bạn!

Phần thường dùng nhất của API JavaScript của Maps là google.maps.Map. Đây là lớp cho phép chúng ta tạo và thao tác với các thực thể bản đồ. Hãy xem cách thực hiện việc đó bằng cách tạo một hàm mới có tên là displayMap().

Xác định chế độ cài đặt bản đồ.

Maps JavaScript API hỗ trợ nhiều chế độ cài đặt khác nhau cho bản đồ, nhưng chỉ có 2 chế độ là bắt buộc:
- center: đặt vĩ độ và kinh độ cho tâm của bản đồ.
- zoom: đặt cấp độ thu phóng ban đầu của bản đồ.
Sử dụng mã sau đây để đặt bản đồ ở giữa Sydney, Úc và đặt mức thu phóng là 14. Đây là mức thu phóng phù hợp để hiển thị trung tâm thành phố.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
Lấy div tại vị trí mà bản đồ sẽ được chèn vào DOM.

Trước khi có thể hiển thị bản đồ, bạn cần cho Maps JavaScript API biết vị trí bạn muốn hiển thị bản đồ trên trang. Nếu xem nhanh trong index.html, bạn sẽ thấy đã có một div trông như thế này:
```
 <div id="map"></div>
```
Để cho API JavaScript của Maps biết đây là vị trí bạn muốn chèn bản đồ, hãy sử dụng document.getElementById để lấy tham chiếu DOM của vị trí đó:
```
 const mapDiv = document.getElementById('map');
```
Tạo một thực thể của google.maps.Map.

Để yêu cầu API JavaScript của Maps tạo một bản đồ mới có thể hiển thị, hãy tạo một thực thể google.maps.Map và truyền vào mapDiv và mapOptions. Bạn cũng trả về phiên bản Map qua hàm này để có thể làm nhiều việc hơn với phiên bản đó sau này:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Hiển thị bản đồ!

Sau khi xác định tất cả logic để tạo thực thể bản đồ, bạn chỉ cần gọi displayMap() từ trình xử lý lời hứa của JS API để lệnh này được gọi sau khi Maps JavaScript API tải:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

Lúc này, bạn sẽ thấy một bản đồ tuyệt đẹp về Sydney trong trình duyệt:

Tóm lại, trong bước này, bạn đã xác định các lựa chọn hiển thị cho bản đồ, tạo một thực thể bản đồ mới và chèn thực thể đó vào DOM.

Hàm displayMap() của bạn sẽ có dạng như sau:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. Định kiểu bản đồ dựa trên đám mây (Không bắt buộc)

Bạn có thể tuỳ chỉnh kiểu bản đồ bằng tính năng Định kiểu bản đồ dựa trên đám mây.

Tạo mã bản đồ

Nếu bạn chưa tạo mã bản đồ có kiểu bản đồ được liên kết, hãy xem hướng dẫn về Mã bản đồ để hoàn tất các bước sau:

Tạo mã bản đồ.
Liên kết mã bản đồ với kiểu bản đồ.

Thêm Mã bản đồ vào ứng dụng

Để sử dụng mã bản đồ mà bạn đã tạo, hãy sửa đổi hàm displayMap trong tệp app.js và truyền mã bản đồ của bạn vào thuộc tính mapId của đối tượng mapOptions.

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Sau khi hoàn tất, bạn sẽ thấy kiểu mà mình đã chọn trên bản đồ!

7. Thêm điểm đánh dấu vào bản đồ

Có rất nhiều việc mà nhà phát triển có thể làm với Maps JavaScript API, nhưng việc đặt điểm đánh dấu trên bản đồ chắc chắn là việc phổ biến nhất. Các điểm đánh dấu cho phép bạn hiện các điểm cụ thể trên bản đồ và là một phần tử phổ biến trên giao diện người dùng để xử lý hoạt động tương tác của người dùng. Nếu đã từng sử dụng Google Maps, có lẽ bạn đã quen thuộc với điểm đánh dấu mặc định có dạng như sau:

Ở bước này, bạn sẽ dùng google.maps.Marker để đặt điểm đánh dấu trên bản đồ.

Xác định một đối tượng cho vị trí của điểm đánh dấu.

Để bắt đầu, hãy tạo một hàm addMarkers() mới và khai báo một đối tượng locations có tập hợp các điểm vĩ độ/kinh độ sau đây cho các điểm du lịch nổi tiếng ở Sydney.

Ngoài ra, xin lưu ý rằng bạn cần truyền phiên bản Map của mình vào hàm. Bạn sẽ sử dụng dữ liệu này sau khi tạo các thực thể điểm đánh dấu.

 function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }

Tạo một thực thể của google.maps.Marker cho mỗi điểm đánh dấu mà bạn muốn hiển thị.

Để tạo các điểm đánh dấu, hãy dùng mã bên dưới để lặp lại đối tượng locations bằng vòng lặp for...in, tạo một nhóm lựa chọn về cách kết xuất từng điểm đánh dấu, rồi tạo một thực thể google.maps.Marker cho mỗi vị trí.

Lưu ý thuộc tính icon của markerOptions. Bạn còn nhớ ghim mặc định trên bản đồ ở trên không? Bạn có biết rằng bạn cũng có thể tuỳ chỉnh ghim thành bất kỳ hình ảnh nào bạn muốn không? Bạn có thể làm được!

Thuộc tính icon cho phép bạn cung cấp đường dẫn đến bất kỳ tệp hình ảnh nào mà bạn muốn sử dụng làm điểm đánh dấu tuỳ chỉnh. Nếu bạn bắt đầu lớp học lập trình này bằng mẫu dự án của chúng tôi, thì một hình ảnh đã được đưa vào /src/images cho bạn.

Xin lưu ý rằng bạn cũng cần lưu trữ các thực thể điểm đánh dấu trong một mảng và trả về chúng từ hàm để có thể sử dụng sau này.
```
 const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
```
Hiển thị các điểm đánh dấu.

API JavaScript của Maps sẽ tự động tạo và hiển thị một điểm đánh dấu bất cứ khi nào một phiên bản mới của google.maps.Marker được tạo. Vì vậy, giờ đây, tất cả những gì bạn cần làm là cập nhật trình xử lý lời hứa JS API để gọi addMarkers() và truyền phiên bản Map của bạn vào đó:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

Lúc này, bạn sẽ thấy các điểm đánh dấu tuỳ chỉnh trên bản đồ:

Tóm lại, trong bước này, bạn đã xác định một nhóm vị trí đánh dấu và tạo một thực thể google.maps.Marker có biểu tượng điểm đánh dấu tuỳ chỉnh cho từng vị trí.

Hàm addMarkers() của bạn sẽ có dạng như sau:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

Trong bước tiếp theo, bạn sẽ xem xét cách cải thiện trải nghiệm người dùng của các điểm đánh dấu bằng cách sử dụng tính năng nhóm điểm đánh dấu.

8. Bật tính năng nhóm điểm đánh dấu

Khi sử dụng nhiều điểm đánh dấu hoặc các điểm đánh dấu ở gần nhau, bạn có thể gặp phải vấn đề là các điểm đánh dấu chồng lên nhau hoặc xuất hiện quá dày đặc, gây ra trải nghiệm người dùng kém. Ví dụ: sau khi tạo các điểm đánh dấu ở bước cuối cùng, có thể bạn đã nhận thấy điều này:

Đây là lúc bạn cần đến tính năng nhóm điểm đánh dấu. Nhóm điểm đánh dấu là một tính năng khác thường được triển khai, giúp nhóm các điểm đánh dấu lân cận thành một biểu tượng duy nhất thay đổi tuỳ theo mức thu phóng, chẳng hạn như:

Thuật toán phân cụm điểm đánh dấu chia khu vực hiển thị của bản đồ thành một lưới, sau đó phân cụm các biểu tượng nằm trong cùng một ô. Rất may là bạn không cần lo lắng về bất kỳ điều gì trong số đó vì nhóm Google Maps Platform đã tạo một thư viện tiện ích mã nguồn mở hữu ích có tên là MarkerClustererPlus. Thư viện này sẽ tự động thực hiện mọi việc cho bạn. Bạn có thể xem nguồn của MarkerClustererPlus trên GitHub.

Nhập MarkerCluster.

Đối với dự án mẫu của lớp học lập trình này, thư viện tiện ích MarkerClustererPlus đã có trong các phần phụ thuộc được khai báo trong tệp package.json. Vì vậy, bạn đã cài đặt thư viện này khi chạy npm install ở đầu lớp học lập trình này.

Để nhập thư viện, hãy thêm nội dung sau vào đầu tệp app.js:
```
 import MarkerClusterer from '@google/markerclustererplus';
```
Tạo một thực thể mới của MarkerClusterer.

Để tạo các cụm điểm đánh dấu, bạn cần thực hiện 2 việc: cung cấp các biểu tượng mà bạn muốn dùng cho các cụm điểm đánh dấu và tạo một thực thể mới của MarkerClusterer.

Trước tiên, hãy khai báo một đối tượng chỉ định đường dẫn đến các biểu tượng mà bạn muốn sử dụng. Trong dự án mẫu, đã có một nhóm hình ảnh được lưu trong ./img/m. Lưu ý rằng tên tệp hình ảnh được đánh số tuần tự với cùng một tiền tố: m1.png, m2.png, m3.png, v.v.

Khi bạn đặt thuộc tính imagePath trong các lựa chọn cho trình phân cụm điểm đánh dấu, bạn chỉ cần cung cấp đường dẫn và tiền tố tệp, trình phân cụm điểm đánh dấu sẽ tự động sử dụng tất cả các tệp có tiền tố đó và thêm một số vào cuối.

Thứ hai, hãy tạo một thực thể mới của MarkerClusterer và truyền thực thể đó vào thực thể Map nơi bạn muốn hiển thị các cụm điểm đánh dấu và một mảng các thực thể Marker mà bạn muốn phân cụm.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
Hiển thị các cụm điểm đánh dấu.

Gọi clusterMarkers() từ trình xử lý lời hứa JS API. Các cụm điểm đánh dấu sẽ tự động được thêm vào bản đồ khi phiên bản MarkerClusterer được tạo trong lệnh gọi hàm.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });
```

Lúc này, bạn sẽ thấy một vài cụm điểm đánh dấu trên bản đồ.

Xin lưu ý rằng nếu bạn phóng to hoặc thu nhỏ, MarkerClustererPlus sẽ tự động đánh số lại và đổi kích thước các cụm cho bạn. Bạn cũng có thể nhấp vào biểu tượng cụm điểm đánh dấu bất kỳ để phóng to và xem tất cả các điểm đánh dấu có trong cụm đó.

Tóm lại, ở bước này, bạn đã nhập thư viện tiện ích MarkerClustererPlus nguồn mở và dùng thư viện này để tạo một phiên bản MarkerClusterer tự động nhóm các điểm đánh dấu mà bạn đã tạo ở bước trước.

Hàm clusterMarkers() của bạn sẽ có dạng như sau:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

Tiếp theo, bạn sẽ tìm hiểu cách xử lý hoạt động tương tác của người dùng.

9. Thêm lượt tương tác của người dùng

Giờ đây, bạn đã có một bản đồ đẹp mắt hiển thị một số điểm đến du lịch nổi tiếng nhất ở Sydney. Trong bước này, bạn sẽ thêm một số thao tác xử lý bổ sung đối với hoạt động tương tác của người dùng bằng cách sử dụng hệ thống sự kiện của Maps JavaScript API để cải thiện hơn nữa trải nghiệm người dùng trên bản đồ.

Maps JavaScript API cung cấp một hệ thống sự kiện toàn diện sử dụng trình xử lý sự kiện JavaScript để cho phép bạn xử lý nhiều lượt tương tác của người dùng trong mã. Ví dụ: bạn có thể tạo trình nghe sự kiện để kích hoạt quá trình thực thi mã cho các hoạt động tương tác như người dùng nhấp vào bản đồ và điểm đánh dấu, kéo chế độ xem bản đồ, thu phóng và nhiều hoạt động khác.

Trong bước này, bạn sẽ thêm một trình nghe lượt nhấp vào các điểm đánh dấu, sau đó lập trình để bản đồ di chuyển sao cho điểm đánh dấu mà người dùng nhấp vào nằm ở giữa bản đồ.

Đặt trình nghe lượt nhấp trên các điểm đánh dấu.

Tất cả các đối tượng trong Maps JavaScript API hỗ trợ hệ thống sự kiện đều triển khai một bộ hàm tiêu chuẩn để xử lý hoạt động tương tác của người dùng, chẳng hạn như addListener, removeListener và nhiều hàm khác.

Để thêm trình nghe sự kiện nhấp vào từng điểm đánh dấu, hãy lặp lại mảng markers và gọi addListener trên phiên bản điểm đánh dấu để đính kèm trình nghe cho sự kiện click:
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
Di chuyển đến một điểm đánh dấu khi người dùng nhấp vào điểm đó.

Sự kiện click được kích hoạt bất cứ khi nào người dùng nhấp hoặc nhấn vào một điểm đánh dấu, đồng thời trả về một sự kiện dưới dạng đối tượng JSON có thông tin về phần tử trên giao diện người dùng mà người dùng đã nhấp vào. Để cải thiện trải nghiệm người dùng trên bản đồ, bạn có thể xử lý sự kiện click và sử dụng đối tượng LatLng của sự kiện đó để lấy vĩ độ và kinh độ của điểm đánh dấu đã được nhấp.

Sau khi có được đối tượng này, bạn chỉ cần truyền đối tượng đó vào hàm panTo() tích hợp của thực thể Map để bản đồ di chuyển mượt mà nhằm căn giữa lại trên điểm đánh dấu đã nhấp bằng cách thêm nội dung sau vào hàm gọi lại của trình xử lý sự kiện:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```
Chỉ định trình nghe lượt nhấp.

Gọi addPanToMarker() từ trình xử lý lời hứa API JS, đồng thời truyền bản đồ và các điểm đánh dấu của bạn vào đó để thực thi mã và chỉ định trình nghe lượt nhấp.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });
```

Giờ đây, hãy chuyển đến trình duyệt rồi nhấp vào các điểm đánh dấu. Bạn sẽ thấy bản đồ tự động di chuyển để căn giữa lại khi một điểm đánh dấu được nhấp vào.

Tóm lại, trong bước này, bạn đã sử dụng hệ thống sự kiện của Maps JavaScript API để chỉ định một trình nghe lượt nhấp cho tất cả các điểm đánh dấu trên bản đồ, truy xuất vĩ độ và kinh độ của điểm đánh dấu từ sự kiện lượt nhấp đã kích hoạt và sử dụng thông tin đó để đặt lại tâm bản đồ bất cứ khi nào người dùng nhấp vào một điểm đánh dấu.

Hàm addPanToMarker() của bạn sẽ có dạng như sau:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

Chỉ còn một bước nữa thôi! Tiếp theo, bạn sẽ cải thiện hơn nữa trải nghiệm người dùng trên bản đồ bằng cách sử dụng các tính năng vẽ của API JavaScript của Maps.

10. Vẽ trên bản đồ

Cho đến nay, bạn đã tạo một bản đồ Sydney có các điểm đánh dấu cho những địa điểm du lịch nổi tiếng và xử lý hoạt động tương tác của người dùng. Trong bước cuối cùng của lớp học lập trình này, bạn sẽ sử dụng các tính năng vẽ của Maps JavaScript API để thêm một tính năng hữu ích khác vào trải nghiệm bản đồ.

Hãy tưởng tượng rằng bản đồ này sẽ được những người dùng muốn khám phá thành phố Sydney sử dụng. Một tính năng hữu ích là hình dung bán kính xung quanh một điểm đánh dấu khi người dùng nhấp vào điểm đó. Điều này sẽ giúp người dùng dễ dàng biết được những điểm đến khác nằm trong khoảng cách đi bộ dễ dàng từ điểm đánh dấu đã nhấp.

Maps JavaScript API bao gồm một bộ hàm để vẽ các hình dạng trên bản đồ, chẳng hạn như hình vuông, đa giác, đường kẻ và hình tròn. Tiếp theo, bạn sẽ kết xuất một hình tròn để cho biết bán kính 800 mét (khoảng nửa dặm) xung quanh một điểm đánh dấu khi người dùng nhấp vào điểm đó.

Vẽ một hình tròn bằng google.maps.Circle.

Các hàm vẽ trong Maps JavaScript API cung cấp cho bạn nhiều lựa chọn về cách một đối tượng được vẽ xuất hiện trên bản đồ. Để hiển thị bán kính hình tròn, hãy khai báo một tập hợp các lựa chọn cho hình tròn, chẳng hạn như màu sắc, độ đậm của nét vẽ, vị trí đặt tâm hình tròn và bán kính của hình tròn, sau đó tạo một thực thể mới của google.maps.Circle để tạo hình tròn mới:
```
 function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
```
Vẽ vòng tròn khi nhấp vào một điểm đánh dấu.

Để vẽ hình tròn khi người dùng nhấp vào một điểm đánh dấu, bạn chỉ cần gọi hàm drawCircle() mà bạn đã viết ở trên từ lệnh gọi lại trình nghe lượt nhấp trong addPanToMarker() và truyền cho hàm đó bản đồ cũng như vị trí của điểm đánh dấu.

Lưu ý cách một câu lệnh có điều kiện cũng được thêm vào để gọi circle.setMap(null). Thao tác này sẽ xoá vòng tròn đã hiển thị trước đó khỏi bản đồ nếu người dùng nhấp vào một điểm đánh dấu khác, để bạn không gặp phải trường hợp bản đồ bị bao phủ bởi các vòng tròn khi người dùng khám phá bản đồ.

Hàm addPanToMarker() của bạn sẽ có dạng như sau:
```
 function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }
```

Đã xong! Chuyển đến trình duyệt rồi nhấp vào một trong các điểm đánh dấu. Bạn sẽ thấy một bán kính hình tròn được kết xuất xung quanh:

11. Xin chúc mừng

Bạn đã tạo thành công ứng dụng web đầu tiên bằng Google Maps Platform, bao gồm cả việc tải Maps JavaScript API, tải bản đồ, làm việc với các điểm đánh dấu, kiểm soát và vẽ trên bản đồ, cũng như thêm hoạt động tương tác của người dùng.

Để xem mã hoàn chỉnh, hãy xem dự án đã hoàn tất trong thư mục /solutions.

Tiếp theo là gì?

Trong lớp học lập trình này, bạn đã tìm hiểu những kiến thức cơ bản về những việc có thể làm với Maps JavaScript API. Tiếp theo, hãy thử thêm một số tính năng sau vào bản đồ:

Thay đổi loại bản đồ để hiển thị bản đồ vệ tinh, bản đồ kết hợp và bản đồ địa hình.
Bật tính năng bản địa hoá để tải bản đồ bằng nhiều ngôn ngữ.
Tuỳ chỉnh các tương tác khác của người dùng, chẳng hạn như thao tác thu phóng và các chế độ kiểm soát bản đồ.
Thêm cửa sổ thông tin để hiển thị thông tin khi người dùng nhấp vào điểm đánh dấu.
Tham khảo các thư viện bổ sung có sẵn cho Maps JavaScript API để bật các chức năng bổ sung, chẳng hạn như Địa điểm, vẽ và trực quan hoá.

Để tiếp tục tìm hiểu thêm về những cách bạn có thể sử dụng Nền tảng Google Maps trên web, hãy xem các đường liên kết sau: