Sử dụng JavaScript để thêm Bản đồ trên Google có Điểm đánh dấu

Giới thiệu

Hướng dẫn này chỉ cho bạn cách thêm một bản đồ Google đơn giản có điểm đánh dấu vào 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 hướng dẫn này. Điểm đánh dấu được đặt ở Uluru (còn được gọi là Ayers Rock) ở Vườn quốc gia Uluru-Kata Tjuta.

Bắt đầu

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

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

Bạn cần có một trình duyệt web. Chọn một ứng dụng phổ biến như Google Chrome (khuyến nghị), Firefox, Safari hoặc Edge, dựa trên 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 API JavaScript của Maps sử dụng khoá API của riêng bạn.

Hãy làm theo các bước sau để nhận khoá API:

  1. Chuyển đến Bảng điều khiển Google Cloud.

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

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

  6. Bật tính năng thanh toán. Xem Mức sử dụng và thanh toán để biết thêm thông tin.

  7. 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 trình tải khởi động để bạn tự sử dụng .

    <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

Dưới đây là mã cho 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

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

Tìm hiểu mã nguồn

Ở 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 dùng nội dung khai báo !DOCTYPE html.
  • Đã tạo phần tử div có tên "map" để giữ bản đồ.
  • Đã tải API JavaScript cho Maps bằng trình tải khởi động.

Khai báo ứng dụng của bạn dưới dạng HTML5

Bạn nên khai báo DOCTYPE thực trong ứng dụng web. Trong các ví dụ ở đây, chúng ta đã khai báo ứng dụng dưới dạng HTML5 bằng cách sử dụng HTML5 đơn giản DOCTYPE như được hiển thị dưới đây:

<!DOCTYPE html>

Hầu hết 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" có nghĩa là ứng dụng của bạn nên tương thích trên nhiều trình duyệt. DOCTYPE cũng được thiết kế để xuống cấp nhẹ; các trình duyệt không hiểu API sẽ bỏ qua và sử dụng "chế độ tương thích ngược" đến hiển thị nội dung của họ.

Lưu ý rằng một số CSS hoạt động trong chế độ tương thích ngược sẽ không hợp lệ trong chế độ chuẩn. Cụ thể, tất cả các kích thước dựa trên tỷ lệ phần trăm phải kế thừa từ các phần tử khối mẹ và nếu có bất kỳ đối tượng cấp trên nào không chỉ định kích thước, chúng được giả định là có kích thước là 0 x 0 pixel. Cho lý do đó, chúng tôi bao gồm nội dung khai báo style sau:

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

Tạo phần tử div

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

Mã dưới đây xác định một vùng trên 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 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 đồ. 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. Thiết lập div chiều rộng và chiều cao thành lớn hơn 0 px để bản đồ có thể nhìn thấy được. Trong phần này chữ hoa chữ thường, div được đặt thành chiều cao là 400 pixel và chiều rộng là 100% để hiển thị theo chiều rộng của trang web. Lưu ý rằng div thường lấy chiều rộng từ phần tử chứa chúng và div trống thường có chiều cao bằng 0. Để làm việc 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 cho 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 nhận khoá API của riêng bạn.

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

Phần này trình bày cho 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 để 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();
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, thư viện Map và AdvancedMarkerView được tải khi hàm initMap() sẽ được gọi.

Tìm hiểu mã nguồn

Ở giai đoạn này của hướng dẫn, chúng tôi đã:

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

Thêm bản đồ

Đ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ả tâm và mức thu phóng. Hãy xem tài liệu dành cho tài sản 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',
  }
);
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

Có hai tùy chọn bắt buộc cho mỗi bản đồ: center và zoom. Trong phần trên thì new Map() sẽ tạo một đối tượng Google Maps mới. Thuộc tính center cho biết API nơi 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 thấp nhất thu phóng và hiển thị toàn bộ Earth. Đặt giá trị thu phóng cao hơn để phóng to vào Earth ở độ phân giải cao hơn.

Cung cấp bản đồ của toàn bộ Trái đất dưới dạng một hình ảnh duy nhất sẽ đòi hỏi bản đồ rộng lớn hoặc bản đồ nhỏ với độ phân giải rất thấp. Do đó, hình ảnh bản đồ trong Google Maps và API JavaScript của Maps được chia nhỏ thành các "ô" bản đồ và "mức độ thu phóng". Ở mức thu phóng thấp, một tập hợp nhỏ các ô bản đồ bao phủ diện tích; ở mức thu phóng cao hơn, hình xếp có độ phân giải cao hơn và che phủ vùng nhỏ hơn. Danh sách sau đây trình bày mức độ chi tiết gần đúng mà bạn có thể mong muốn thấy ở mỗi mức thu phóng:

  • 1: Thế giới
  • 5: Vùng đất hoặc lục địa
  • 10: Thành phố
  • 15: Đường phố
  • 20: Toà nhà

Ba hình ảnh sau đây phản ánh cùng một vị trí của Tokyo ở mức thu phóng bằ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 thiết lập 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

Đoạn mã mẫu hoàn chỉnh

Xem mã ví dụ đầy đủ 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

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

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

  • Tìm hiểu thêm về xem vĩ độ/kinh độ toạ độ hoặc chuyển đổi địa chỉ thành toạ độ địa lý.
  • Bạn có thể chỉnh sửa các tuỳ chọn như kiểu và thuộc tính để tuỳ chỉnh bản đồ. Cho để biết thêm thông tin về cách tùy chỉnh bản đồ, hãy đọc hướng dẫn để tạo kiểu và bản 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 của bạn để kiểm tra và chạy đọc báo cáo lỗi và giải quyết vấn đề với mã của bạn.
  • 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 dưới đây để biết 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 yêu cầu toạ độ.
    3. Chọn Đây là gì từ trình đơn theo bối cảnh xuất hiện. Bản đồ hiển thị một thẻ ở cuối màn hình. Tìm vĩ độ và kinh độ của bạn trong hàng cuối cùng của thẻ.

  • Bạn có thể chuyển đổi địa chỉ thành toạ độ theo vĩ độ và kinh độ bằng cách sử dụng Dịch vụ mã hóa địa lý. Hướng dẫn cho nhà phát triển cung cấp thông tin chi tiết về bắt đầu với dịch vụ Mã hóa địa lý.