Thêm bản đồ Google có đ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 bằng điểm đánh dấu vào một trang web. Công cụ này phù hợp với những người có kiến thức mới bắt đầu hoặc trung cấp về HTML và CSS và một chút kiến thức về JavaScript.

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 được đặt tại Uluru (còn gọi là Ayers Rock) trong Vườn quốc gia Uluru-Kata Tjuta.


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();

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();

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

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>

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

Thử mẫu

Bắt đầu

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

  1. Tạo trang HTML
  2. Thêm bản đồ bằng điểm đánh dấu
  3. Lấy khoá API

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, 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 trang HTML

Dưới đâ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>

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

Hãy lưu ý rằng đây là một trang rất cơ bản có một tiêu đề cấp ba (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.

Hiểu rõ đoạn mã

Mã dưới đây 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 tiêu đề cấp ba phía trên bản đồ bằng cách sử dụng mã dưới đây.

<h3>My Google Maps Demo</h3>

Đoạn mã dưới đây xác định một khu vực của trang cho bản đồ Google 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 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 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 để hiển thị bản đồ. 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ị chiều rộng của trang web.

Trình tải khởi động chuẩn bị API JavaScript củ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>

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

Bước 2: Thêm bản đồ bằng đ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 đồ có đánh dấu trên đó.

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();

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();

Trong mã trên, thư viện MapAdvancedMarkerView được tải khi hàm initMap() được gọi.

Hiểu rõ đoạn mã

Đoạn mã dưới đây xây dựng 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ả mức độ trung tâm và mức thu phóng. Xem tài liệu để biết các tuỳ chọn thuộc tính khác.

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',
  }
);

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",
});

Trong mã ở trên, new Map() 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 đồ.

Tìm hiểu thêm về cách nhận 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ộ Earth. Đặt giá trị thu phóng cao hơn để phóng to Trái đất ở độ phân giải cao hơn.

Mã bên dưới đặ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'
});

JavaScript

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

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

Bước 3: 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.

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

  1. Chuyển đến Google Cloud Console.

  2. Tạo hoặc chọn một dự án.

  3. Nhấp vào Tiếp tục để bật API này 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 hạn chế đối với khoá API). Lưu ý: Nếu hiện có một khoá API không bị hạn chế hoặc khoá có các hạn chế về trình duyệt, thì 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 phần Sử dụng khoá API.

  6. Bật thanh toán. Hãy xem bài viết Mức sử dụng và thanh toán để biết thêm thông tin.

  7. Sao chép toàn bộ mã của hướng dẫn này từ trang này vào trình soạn thảo văn bản của bạn.

  8. Thay thế giá trị của tham số key trong URL bằng khoá API của riêng bạn (đó là khoá API mà bạn vừa lấy).

    <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>
    
  9. Lưu tệp này bằng tên kết thúc bằng .html, chẳng hạn như index.html.

  10. Tải tệp HTML vào trình duyệt web bằng cách kéo tệp từ máy tính vào trình duyệt của bạn. Ngoài ra, bạn có thể nhấp đúp vào tệp trên hầu hết các hệ điều hành.

Mẹo và cách 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ểuvẽ 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 tra 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 đây để 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 để nhận 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 toạ độ.
    3. Chọn Đây là gì trong trình đơn theo bối cảnh vừa 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 độ ở hàng cuối cùng của thẻ.
  • Bạn có thể chuyển đổi một đị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 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ý.