Thư viện

Để tải mã JavaScript cho API JavaScript của Maps, bạn bao gồm tập lệnh trình tải bootstrap trên trang của mình, có dạng như sau:

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

API JavaScript của Maps được tạo thành từ các thư viện không được tải cho đến khi bạn yêu cầu cụ thể chúng. Việc chia nhỏ các thành phần thành thư viện cho phép API tải (và phân tích cú pháp) nhanh chóng. Bạn chỉ phải chịu thêm chi phí tải và phân tích cú pháp thư viện khi cần.

Tải các thư viện bổ sung trong thời gian chạy bằng cách dùng toán tử await để gọi importLibrary() qua một hàm async. Ví dụ:

const { Map } = await google.maps.importLibrary("maps");

Ví dụ về mã sau đây cho thấy việc tải cả thư viện Map và AdvancedMarkerElement:

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

Thư viện Nhập thư viện động

Bạn có thể sử dụng các thư viện sau với tính năng Nhập thư viện động:

Thư viện cho URL bootstrap (cũ)

Bạn có thể sử dụng các thư viện sau với thẻ tập lệnh bootstrap cũ:
  • drawing cung cấp một giao diện đồ hoạ để người dùng vẽ hình đa giác, hình chữ nhật, hình nhiều đường, hình tròn và điểm đánh dấu trên bản đồ. Hãy tham khảo tài liệu về thư viện Vẽ để biết thêm thông tin.
  • geometry bao gồm các hàm hữu ích để tính toán giá trị hình học vô hướng (chẳng hạn như khoảng cách và diện tích) trên bề mặt trái đất. Hãy tham khảo tài liệu về thư viện Hình học để biết thêm thông tin.
  • journeySharing cung cấp dịch vụ hỗ trợ cho các giải pháp Vận tải và hậu cần của Nền tảng Google Maps.
  • localContext hiển thị cho người dùng các địa điểm ưa thích chính gần một vị trí bạn chỉ định. Hãy tham khảo tài liệu về thư viện Ngữ cảnh cục bộ để biết thêm thông tin.
  • marker cho phép bạn thêm Các điểm đánh dấu nâng cao, có thể tùy chỉnh ở mức độ cao vào bản đồ của bạn. Hãy tham khảo tài liệu về Điểm đánh dấu nâng cao để biết thêm thông tin.
  • places cho phép ứng dụng của bạn tìm kiếm các địa điểm như cơ sở, vị trí địa lý hoặc địa điểm ưa thích nổi bật trong một khu vực xác định. Hãy tham khảo tài liệu về Thư viện địa điểm để biết thêm thông tin.
  • visualization cung cấp bản đồ nhiệt để biểu thị dữ liệu bằng hình ảnh. Hãy tham khảo tài liệu về thư viện hình ảnh trực quan để biết thêm thông tin.

Yêu cầu bootstrap sau đây minh hoạ cách thêm yêu cầu về thư viện google.maps.geometry của API Maps JavaScript, vào tập lệnh trình tải bootstrap cũ:

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

Để yêu cầu nhiều thư viện, hãy phân tách các thư viện bằng dấu phẩy:

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