Giới thiệu về Places UI Kit: Một thư viện thành phần có chi phí thấp và sẵn sàng sử dụng, cho phép bạn đưa giao diện người dùng quen thuộc của Google Maps cho Địa điểm vào bất kỳ bản đồ nào mà bạn chọn. Hãy dùng thử và chia sẻ ý kiến của bạn để góp phần định hình tương lai của GMP!

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

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

Giới thiệu

Hướng dẫn này trình bày cách thêm một bản đồ đơn giản của Google có điểm đánh dấu vào một trang web. Khoá học 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, cũng như có một chút kiến thức về JavaScript.

Dưới đây là bản đồ mà bạn sẽ tạo bằng hướng dẫn này. Điểm đánh dấu nằm ở Uluru (còn được gọi là Ayers Rock) trong Công viên Quốc gia Uluru-Kata Tjuta.

Bắt đầu

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

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

Bạn cần có một trình duyệt web. Chọn một trình duyệt phổ biến như Google Chrome (nên dùng), Firefox, Safari hoặc Edge, tuỳ thuộc vào 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:

Chuyển đến Bảng điều khiển Google Cloud.
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ụ liên quan.
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 có khoá API hiện tại 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á đó.
Để 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.
Bật tính năng thanh toán. Hãy xem phần Mức sử dụng và thanh toán để biết thêm thông tin.

Sau khi bạn có khoá API, hãy thêm khoá đó vào đoạn mã sau bằng cách nhấp vào "YOUR_API_KEY". Sao chép và dán thẻ tập lệnh chương trình khởi động để sử dụng trên trang web của riêng bạn.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Bước 2: Tạo 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>

    <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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

Xin lưu ý rằng đây là một trang rất cơ bản có tiêu đề cấp 3 (h3) và một phần tử div duy nhất. Bạn có thể thêm bất kỳ nội dung nào bạn muốn vào trang web.

Tìm hiểu về mã

Ở giai đoạn này trong ví dụ, chúng ta có:

Khai báo ứng dụng dưới dạng HTML5 bằng cách sử dụng nội dung khai báo !DOCTYPE html.
Tạo một phần tử div có tên "map" để chứa bản đồ.
Đã tải Maps JavaScript API bằng trình tải khởi động.

Khai báo ứng dụng của bạn là HTML5

Bạn nên khai báo một DOCTYPE thực trong ứng dụng web của mình. Trong các ví dụ ở đây, chúng tôi đã khai báo các ứng dụng của mình dưới dạng HTML5 bằng cách sử dụng DOCTYPE HTML5 đơn giản như minh hoạ dưới đây:

<!DOCTYPE html>

Hầu hết các trình duyệt hiện tại sẽ hiển thị nội dung được khai báo bằng DOCTYPE này ở "chế độ tiêu chuẩn", nghĩa là ứng dụng của bạn sẽ tuân thủ nhiều trình duyệt hơn. DOCTYPE cũng được thiết kế để giảm hiệu suất một cách từ từ; những trình duyệt không hiểu được thẻ này sẽ bỏ qua và sử dụng "chế độ tương thích" để hiển thị nội dung.

Xin lưu ý rằng một số CSS hoạt động trong chế độ tương thích không hợp lệ ở chế độ tiêu chuẩn. Cụ thể, tất cả các kích thước dựa trên tỷ lệ phần trăm đều phải kế thừa từ các phần tử khối gốc và nếu bất kỳ phần tử tổ tiên nào trong số đó không chỉ định kích thước, thì chúng được giả định là có kích thước 0 x 0 pixel. Vì lý do đó, chúng tôi đưa ra tuyên bố style sau đây:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

Tạo một phần tử div

Để bản đồ xuất hiện trên một trang web, chúng ta phải dành riêng một vị trí cho bản đồ. Thông thường, chúng ta thực hiện việc này bằng cách tạo một phần tử div có tên và lấy một tham chiếu đến phần tử này trong mô hình đối tượng tài liệu (DOM) của trình duyệt.

Đoạn mã bên dưới xác định một vùng trên trang cho bản đồ của bạn trên Google.

<!--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.

/* 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 đoạn mã trên, phần tử style sẽ đặ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 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 100% để hiển thị trên chiều rộng của trang web. Xin lưu ý rằng các div thường lấy chiều rộng từ phần tử chứa chúng và các div trống thường có chiều cao bằng 0. Vì lý do này, bạn phải luôn đặt chiều cao cho div một cách rõ ràng.

Tải Maps JavaScript API

Trình tải khởi động chuẩn bị API JavaScript của Maps để tải (không có thư viện nào được tải cho đến khi importLibrary() được gọi).

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Hãy xem Bước 3: Lấy khoá API để biết hướng dẫn về cách lấy khoá API của riêng bạn.

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

Phần này hướng dẫn bạn cách tải Maps JavaScript API vào trang web và cách viết JavaScript của riêng bạn để sử dụng API này nhằm thêm một bản đồ có điểm đánh dấu.

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();index.js

Trong đoạn mã trên, các thư viện Map và AdvancedMarkerElement sẽ được tải khi hàm initMap() được gọi.

Tìm hiểu về mã

Đến bước này trong hướng dẫn, chúng ta đã có:

Xác định một hàm JavaScript tạo bản đồ trong div.
Tạo một AdvancedMarkerElement để thêm điểm đánh dấu vào bản đồ.

Thêm bản đồ

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

TypeScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});
index.js

Mỗi bản đồ đều có 2 lựa chọn bắt buộc: center và zoom. Trong đoạn mã trên, new Map() sẽ tạo một đối tượng Google Maps mới. Thuộc tính center cho API biết vị trí cần căn giữa bản đồ.

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 Trái Đất ở độ phân giải cao hơn.

Việc cung cấp bản đồ toàn bộ Trái Đất dưới dạng một hình ảnh duy nhất sẽ đòi hỏi một bản đồ khổng lồ hoặc một bản đồ nhỏ có độ phân giải rất thấp. Do đó, hình ảnh bản đồ trong Google Maps và Maps JavaScript API được chia thành các "ô" bản đồ và "mức thu phóng". Ở mức thu phóng thấp, một nhóm nhỏ các ô bản đồ sẽ bao phủ một khu vực rộng lớn; ở mức thu phóng cao hơn, các ô có độ phân giải cao hơn và bao phủ một khu vực nhỏ hơn. Danh sách sau đây cho biết mức độ chi tiết gần đúng mà bạn có thể thấy ở từng mức thu phóng:

1: Thế giới
5: Lục địa hoặc châu lục
10: Thành phố
15: Đường phố
20: Toà nhà

3 hình ảnh sau đây phản ánh cùng một vị trí ở Tokyo ở mức thu phóng 0, 7 và 18.

Thêm một điểm đánh dấu

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

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});index.js

Mã ví dụ hoàn chỉnh

Xem mã ví dụ hoàn chỉnh tại đây:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Add Map</title>

    <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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>index.html

Dùng thử mẫu

JSFiddle.net Google Cloud Shell

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

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

Tìm hiểu thêm về cách lấy toạ độ vĩ độ/kinh độ hoặc chuyển đổi địa chỉ thành toạ độ địa lý.
Bạn có thể điều chỉnh các lựa chọn như kiểu và thuộc tính để tuỳ 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ề định kiểu và vẽ trên bản đồ.
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ề mã.
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).
Làm theo các bước bên dưới để lấy toạ độ 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 cần 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ạ độ theo vĩ độ và kinh độ ở hàng cuối cùng của thẻ.
Bạn có thể chuyển đổi một địa chỉ thành toạ độ vĩ độ và kinh độ bằng cách sử dụng dịch vụ Mã hoá địa lý. Các 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ý.

Thêm Google Maps có Điểm đánh dấu bằng JavaScript Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Giới thiệu

Bắt đầu

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

Bước 2: Tạo trang HTML

Tìm hiểu về mã

Khai báo ứng dụng của bạn là HTML5

Tạo một phần tử div

Tải Maps JavaScript API

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

TypeScript

JavaScript

Tìm hiểu về mã

Thêm bản đồ

TypeScript

JavaScript

Thêm một điểm đánh dấu

TypeScript

JavaScript

Mã ví dụ hoàn chỉnh

TypeScript

JavaScript

CSS

HTML

Dùng thử mẫu

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

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

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