Thêm Google Maps vào trang web

Bạn có thể thêm bản đồ Google vào một trang web bằng mã HTML, CSS và JavaScript. Trang này cho biết cách thêm bản đồ vào một trang web, sau đó truy cập vào phiên bản bản đồ theo phương thức lập trình.

Tổng quan

Để tải bản đồ, trang web của bạn phải thực hiện những điều sau:

  • Tải API JavaScript của Maps bằng trình tải khởi động. Đây là nơi khoá API của bạn được truyền. Bạn có thể thêm mã này vào tệp nguồn HTML hoặc JavaScript.
  • Thêm bản đồ vào trang HTML và thêm các kiểu CSS cần thiết.
  • Tải thư viện maps và khởi tạo bản đồ.

Thêm bản đồ bằng phần tử gmp-map

Phần tử gmp-map là cách được ưu tiên để thêm bản đồ Google vào trang web. Đây là một thành phần HTML tùy chỉnh được tạo bằng các thành phần web. Để thêm bản đồ vào trang web bằng phần tử gmp-map, hãy làm theo các bước sau.

  1. Thêm phần tử script chứa bootstrap vào trang HTML hoặc thêm vào tệp nguồn JavaScript hoặc TypeScript mà không có phần tử script. Cấu hình bootstrap bằng khóa API và bất kỳ tùy chọn nào khác. Bạn có thể chọn nhập thư viện động hoặc tải tập lệnh trực tiếp. Ví dụ này cho thấy cách thêm quy trình khởi động tải tập lệnh trực tiếp vào một trang HTML:

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

    Tìm hiểu thêm về cách tải API JavaScript của Google Maps

  2. Trên trang HTML, hãy thêm một phần tử gmp-map. Chỉ định tọa độ vĩ độ và kinh độ cho center (bắt buộc), giá trị thu phóng cho zoom (bắt buộc) và map-id nếu cần (bắt buộc đối với một số tính năng như Advanced Markers). Thuộc tính CSS height là bắt buộc để bản đồ có thể hiển thị. Nó có thể được chỉ định trong HTML hoặc CSS. Trong ví dụ này, thuộc tính kiểu height được chỉ định trong HTML để đơn giản hóa.

    <gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
></gmp-map>
    index.html

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

<html>
  <head>
    <title>Add a Map using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></gmp-map>
   <!-- 
      The `defer` attribute causes the script 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. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Thêm bản đồ bằng phần tử div (phiên bản cũ) và JavaScript

Để thêm bản đồ vào trang web bằng phần tử div, hãy thực hiện theo các bước sau.

  1. Thêm phần tử script chứa bootstrap vào trang HTML hoặc thêm vào tệp nguồn JavaScript hoặc TypeScript mà không có phần tử script. Cấu hình bootstrap bằng khóa API và bất kỳ tùy chọn nào khác. Bạn có thể chọn nhập thư viện động hoặc tải tập lệnh trực tiếp. Ví dụ này cho thấy cách thêm bootstrap động vào trang HTML:

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

    Tìm hiểu thêm về cách tải API JavaScript của Google Maps

  2. Trên trang HTML, thêm phần tử div để chứa bản đồ.

    <div id="map"></div>

  3. Trong CSS, hãy đặt chiều cao bản đồ thành 100%. Thuộc tính CSS height là bắt buộc để bản đồ có thể hiển thị.

    #map {
  height: 100%;
}

  4. Trong tệp JavaScript, hãy tạo một hàm để tải thư viện maps và khởi chạy bản đồ. Chỉ định tọa độ vĩ độ và kinh độ cho center và mức thu phóng sẽ sử dụng cho zoom. Nếu cần, hãy thêm mã bản đồ bằng cách sử dụng thuộc tính map-id.

    let map;
async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
initMap();
    index.js

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

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

JavaScript

let map;
async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
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>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

Dùng thử mẫu

Đặt và nhận các thuộc tính trên thực thể bản đồ

Để tương tác với thực thể bản đồ, hãy chọn phần tử chứa. Mã để thực hiện việc này sẽ khác nhau, tuỳ thuộc vào việc bạn đã sử dụng phần tử gmp-map hay phần tử div.

Nhận một thực thể bản đồ từ phần tử gmp-map

Để lấy thực thể bản đồ khi dùng phần tử gmp-map, hãy dùng document.querySelector để truy xuất một thực thể mapElement, như minh hoạ ở đây.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

Sau đó, hãy đặt các thuộc tính trên thực thể mapElement:

mapElement.zoom = 8;

Lớp MapElement sử dụng lớp Map nội bộ; truy cập vào lớp Map bằng cách sử dụng thuộc tính MapElement.innerMap, như minh hoạ ở đây:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

Nhận một thực thể bản đồ từ phần tử div

Khi sử dụng phần tử div, hãy lấy thực thể bản đồ và đặt các lựa chọn tại thời điểm khởi tạo:

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeControl: false,
});

Sau khi khởi tạo, hãy đặt các lựa chọn trên thực thể map như minh hoạ ở đây:

map.setOptions({
    zoom: 8,
});