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

Thêm bản đồ vào trang web của bạn (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 tìm hiểu tất cả những thông tin cơ bản, từ thiết lập đến tải API JavaScript của Maps, hiển thị bản đồ đầu tiên của bạn, làm việc với các điểm đánh dấu và phân nhóm điểm đánh dấu, vẽ trên bản đồ và xử lý 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 tạo một ứng dụng web đơn giản thực hiện những việc sau:

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

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

Bắt đầu sử dụng Nền tảng Google Maps
Tải API JavaScript của Maps một cách linh động từ mã JavaScript
Đang tải bản đồ
Sử dụng các điểm đánh dấu, điểm đánh dấu tùy chỉnh và nhóm sự kiện đánh dấu
Làm việc với hệ thống sự kiện API JavaScript của Maps để 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 các mục bên dưới để hoàn tất Lớp học lập trình này. Nếu bạn đã quen làm việc với Nền tảng Google Maps, hãy chuyển đến Lớp học lập trình!

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 của Google Maps Platform:

API JavaScript của Maps
Thư viện phân nhó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 thành 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 đã bật tính năng thanh toán
Khóa 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
Đã cài đặt Node.js 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 với Nền tảng Google Maps để hoàn thành các bước sau:

Tạo một tài khoản thanh toán.
Tạo một dự án.
Bật 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. 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à một dự án đã 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à một dự án.

Trong Cloud Console, hãy nhấp vào trình đơn thả xuống dự án và 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 API và SDK của Nền tảng Google Maps bắt buộc 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 Google Maps Platform đều yêu cầu khóa API.

Thiết lập Node.js

Nếu bạn chưa có ứng dụng này, hãy truy cập vào https://nodejs.org/ để tải xuống 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 mà 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ành cho người mới bắt đầu dự án

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

Tải xuống hoặc phân phối 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 dành cho người mới bắt đầ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 tất lớp học lập trình. Mọi công việc bạn cần làm đều nằm trong thư mục /starter/src. 2. Sau khi tải dự án dành cho người mới bắt đầ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 liệt kê trong package.json. 3. Sau khi cài đặt các phần phụ thuộc, hãy chạy npm start trong thư mục.

Dự án dành cho người mới bắt đầu đã được thiết lập để bạn sử dụng máy chủ webpack-dev. Máy chủ này sẽ biên dịch và chạy 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 kỳ khi nào bạn thực hiện thay đổi mã.

Nếu muốn xem mã giải pháp đầ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 API JavaScript của Maps

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

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

Nếu đã có kinh nghiệm sử dụng API JavaScript của Maps, bạn có thể làm quen với việc tải API bằng cách chèn thẻ script vào một 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 tải API hoàn toàn hợp lệ, nhưng trong phần phụ thuộc JavaScript hiện đại thường bao gồm mã một cách linh động. Để thực hiện tương đương với thẻ script ở trên từ mã, bạn sẽ dùng mô-đun @googlemaps/js-api-load. Trình tải API JS đã được đưa vào các phần phụ thuộc của tệp package.json của dự án, vì vậy, trình cài đặt 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. Tệp này là nơi bạn thực hiện tất cả công việc của mình trong lớp học lập trình này.
Nhập lớp Loader từ @googlemaps/js-api-load.

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

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

Để tải API, hãy gọi load() trên bản sao Loader. Trình tải API JS trả về một lời hứa sẽ phân giải sau khi API được tải và sẵn sàng để sử dụng. Thêm trì hoãn 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ứ thành công, bạn sẽ thấy câu lệnh console.log trong bảng điều khiển của trình duyệt:

Tóm lại, bạn hiện đã tải API JavaScript của Maps một cách linh động từ mã và xác định hàm callback được thực thi sau khi API JavaScript của Maps 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.then(() => {
      console.log('Maps JS API Loaded');
    });

Bây giờ, API JavaScript của Maps đã được tải, bạn sẽ tải bản đồ trong 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, lớp này cho phép chúng ta tạo và thao tác với các thực thể bản đồ. Hãy xem hiệu suất đó 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 đồ của bạn.

API JavaScript của Maps hỗ trợ nhiều chế độ cài đặt khác nhau cho bản đồ, nhưng chỉ có 2 chế độ cài đặt bắt buộc:
- center: đặt vĩ độ và kinh độ cho trung tâm của bản đồ.
- zoom: đặt mức thu phóng ban đầu của bản đồ.
Sử dụng mã sau đây để căn giữa bản đồ tại Sydney, Úc và đặt mức thu phóng là 14, đây chỉ 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 nơi bản đồ sẽ được chèn vào DOM.

Trước khi có thể hiển thị bản đồ, bạn cần cho API Maps Maps biết bạn muốn vị trí đó hiển thị trên trang. Nếu xem nhanh trong index.html, bạn sẽ thấy rằng có div trông giống như sau:
```
 <div id="map"></div>
```
Để thông báo cho API JavaScript của Maps rằng đây là nơi bạn muốn đưa bản đồ vào, hãy sử dụng document.getElementById để tham chiếu DOM:
```
 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 bản sao của google.maps.Map và chuyển vào mapDiv và mapOptions. Bạn cũng có thể trả về bản sao Map từ hàm này để có thể làm được nhiều việc hơn sau này:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Hiển thị bản đồ!

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

Bây giờ, bạn sẽ thấy một bản đồ tuyệt đẹp của Sydney trong trình duyệt của mình:

Để tóm tắt, trong bước này, bạn đã xác định các tùy chọn hiển thị cho bản đồ, tạo phiên bản bản đồ mới và chèn bản sao đó 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. Tạo bản đồ dựa trên đám mây (Không bắt buộc)

Bạn có thể tùy chỉnh kiểu của bản đồ bằng cách tạo 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 đồ với kiểu bản đồ được liên kết, hãy xem hướng dẫn 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 ID bản đồ vào ứng dụng của bạn

Để 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à chuyể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 thành, 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 điều mà các nhà phát triển làm được với API JavaScript của Maps, nhưng việc đặt điểm đánh dấu trên bản đồ chắc chắn là phổ biến nhất. Điểm đánh dấu cho phép bạn hiển thị các điểm cụ thể trên bản đồ và là một phần tử giao diện người dùng phổ biến để xử lý việc tương tác của người dùng. Nếu trước đây bạn đã sử dụng Google Maps thì có thể bạn đã quen thuộc với điểm đánh dấu mặc định, giống như thế này:

Trong bước này, bạn sẽ sử dụng google.maps.Marker để đặt các điểm đánh dấu vào bản đồ.

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

Để bắt đầu, hãy tạo một hàm addMarkers() mới và khai báo đố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 phải chuyển thực thể Map đến hàm. Bạn sẽ sử dụng mã này vào lúc khác khi tạo các phiên bản đ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 bản sao của google.maps.Marker cho mỗi điểm đánh dấu bạn muốn hiển thị.

Để tạo điểm đánh dấu, hãy dùng mã bên dưới để lặp lại đối tượng locations bằng cách sử dụng vòng lặp for...in, tạo một bộ tùy chọn về cách hiển thị từng điểm đánh dấu, sau đó tạo một bản sao của google.maps.Marker cho từng vị trí.

Hãy chú ý đến thuộc tính icon của markerOptions. Bạn có nhớ mã PIN bản đồ mặc định trước đó không? Bạn có biết rằng bạn cũng có thể tùy 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 điều đó!

Thuộc tính icon cho phép bạn cung cấp đường dẫn đến mọi tệp hình ảnh mà bạn muốn sử dụng làm điểm đánh dấu tùy 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ì tức là một hình ảnh đã được cung cấp cho bạn trong /src/images.

Xin lưu ý rằng bạn cũng cần lưu trữ các thực thể đánh dấu trong một mảng và trả về các thực thể đó từ hàm để có thể sử dụng lại sau.
```
 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 tự động tạo và hiển thị một điểm đánh dấu bất cứ khi nào một thực thể mới của google.maps.Marker được tạo, vì vậy, bây giờ bạn chỉ cần cập nhật trình xử lý hứa hẹn API JS để gọi addMarkers() và chuyển thực thể này vào phiên bản Map:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

Đến đây, bạn sẽ thấy các điểm đánh dấu tùy 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í điểm đánh dấu và tạo một phiên bản của google.maps.Marker bằng biểu tượng điểm đánh dấu tùy chỉnh cho mỗi 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 tính năng phân nhóm điểm đánh dấu.

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

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

Đây là lúc tính năng phân nhóm điểm đánh dấu xuất hiện. Tạo nhóm các điểm đánh dấu là một tính năng thường được triển khai khác, 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 tùy thuộc vào mức thu phóng, như sau:

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

Nhập MarkerCluster.

Đối với dự án mẫu cho 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, do đó, 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 phiên bản mới của MarkerClusterer.

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

Trước tiên, hãy khai báo đố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. Xin lưu ý rằng tên tệp hình ảnh được đánh số tuần tự với cùng tiền tố: m1.png, m2.png, m3.png, v.v.

Khi đặt thuộc tính imagePath trong các tùy chọn của nhóm đánh dấu, bạn chỉ cần cung cấp đường dẫn và tiền tố tệp, sau đó, cụm điểm đánh dấu sẽ tự động dùng tất cả các tệp có tiền tố đó và nối một số vào cuối.

Thứ hai, hãy tạo một thực thể mới của MarkerClusterer và chuyển bản sao của Map, nơi bạn muốn hiển thị các cụm điểm đánh dấu và một mảng gồm các thực thể Marker mà bạn muốn phân nhó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ý hứa hẹn API JS. Các cụm điểm đánh dấu sẽ tự động được thêm vào bản đồ khi bản sao 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);
 });
```

Bây giờ, bạn sẽ thấy một vài cụm điểm đánh dấu trên bản đồ của mình.

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

Tóm lại, trong bước này, bạn đã nhập thư viện tiện ích MarkerClustererPlus nguồn mở và sử dụng thư viện này để tạo một phiên bản của MarkerClusterer. Danh sách này sẽ 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 đồ tuyệt đẹp hiển thị một số điểm đến du lịch phổ biến nhất ở Sydney. Trong bước này, bạn sẽ thêm một số thao tác 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 API JavaScript của Maps để cải thiện hơn nữa trải nghiệm người dùng trên bản đồ của bạn.

API JavaScript của Maps 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ý các hoạt động tương tác khác nhau của người dùng trong mã. Ví dụ: bạn có thể tạo trình xử lý sự kiện để kích hoạt việc thực thi mã cho các tương tác như người dùng nhấp vào bản đồ và các điểm đánh dấu, xoay chế độ xem bản đồ, phóng to và thu nhỏ, v.v.

Trong bước này, bạn sẽ thêm một trình xử lý lượt nhấp vào các điểm đánh dấu của mình, sau đó dùng phương pháp lập trình để xoay bản đồ để đặt điểm đánh dấu mà người dùng đã nhấp vào giữa bản đồ.

Đặt trình xử lý lượt nhấp vào các điểm đánh dấu của bạn.

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

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

     });
   });
 }
```
Xoay đến một điểm đánh dấu khi được nhấp vào.

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 điểm đánh dấu và trả về một sự kiện dưới dạng đối tượng JSON có thông tin về thành phần trên giao diện người dùng đã được 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 đã nhấp vào.

Sau khi bạn làm xong việc đó, chỉ cần chuyển hàm đó sang hàm panTo() được tích hợp sẵn vào bản sao Map để giúp bản đồ di chuyển suôn sẻ đến gần hơn trên điểm đánh dấu đã nhấp bằng cách thêm phần sau vào hàm callback 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 xử lý lượt nhấp.

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

Bây giờ, hãy chuyển đến trình duyệt và nhấp vào các điểm đánh dấu của bạn. Bạn sẽ thấy bản đồ tự động quay gần đó 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 API JavaScript của Maps để chỉ định một trình xử lý 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 nhấp chuột được kích hoạt và sử dụng điều này để tạo bản đồ gần hơn bất cứ khi nào điểm đánh dấu được nhấp vào.

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 thêm trải nghiệm người dùng của 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 được bản đồ của Sydney hiển thị các điểm đánh dấu cho các điểm đến du lịch nổi tiếng và xử lý hoạt động tương tác của người dùng. Đối với 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 API JavaScript của Maps để thêm tính năng hữu ích khác cho trải nghiệm bản đồ của mình.

Hãy tưởng tượng rằng bản đồ này sẽ được sử dụng bởi những người dùng muốn khám phá thành phố Sydney. Một tính năng hữu ích sẽ là trực quan hóa bán kính xung quanh một điểm đánh dấu khi người dùng nhấp vào. Việc này sẽ cho phép người dùng dễ dàng hiểu những điểm đến khác nằm trong khoảng cách đi bộ dễ dàng của điểm đánh dấu được nhấp vào.

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

Vẽ một vòng tròn bằng google.maps.Circle.

Các hàm vẽ trong API JavaScript của Maps cung cấp cho bạn nhiều tùy chọn về cách đố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 tùy chọn cho một vòng tròn, chẳng hạn như màu sắc, trọng lượng nét, nơi hình tròn nên được căn giữa và bán kính, sau đó tạo một phiên bản mới của google.maps.Circle để tạo một vòng 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 người dùng nhấp vào một điểm đánh dấu.

Để vẽ vòng 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 của trình nghe lượt nhấp trong addPanToMarker(), rồi chuyển bản đồ và vị trí của điểm đánh dấu đó.

Hãy lưu ý cách thêm câu lệnh có điều kiện vào lệnh gọi circle.setMap(null). Thao tác này sẽ xóa 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 kết thúc bằng một bản đồ được bao phủ trong các vòng tròn khi người dùng của bạn khám phá bản đồ đó.

Hàm addPanToMarker() của bạn phải 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);
     });
   });
 }
```

Tất cả đã xong! Chuyển đến trình duyệt của bạn và nhấp vào một trong các điểm đánh dấu. Bạn sẽ thấy bán kính hình tròn hiển thị xung quanh nó:

11. Xin chúc mừng

Bạn đã xây dựng thành công ứng dụng web đầu tiên của mình bằng Nền tảng Google Maps, bao gồm việc tải API JavaScript của Maps, tải bản đồ, làm việc với các điểm đánh dấu, điều khiển và vẽ trên bản đồ cũng như thêm tương tác của người dùng.

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

Nội dung tiếp theo là gì?

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

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

Để tiếp tục tìm hiểu những cách khác giúp bạn làm việc với Google Maps Platform trên web, hãy xem các liên kết sau: