Giới thiệu
Hướng dẫn này trình bày cách thêm một bản đồ Google đơn giản có điểm đánh dấu vào trang web. Kiến thứ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, đồng thời 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 được đặt tại Uluru (còn gọi là Tảng đá Ayers) trong Vườn quốc gia Uluru-Kata Tjuta.
Bắt đầu
Có 3 bước để tạo bản đồ Google có điểm đánh dấu trên trang web:
Bạn cần có 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 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 bằng cách 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:
Truy cập vào 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ụ có liên quan.
Trên trang Thông tin xác thực, hãy lấy khoá API (và đặt các quy tắc hạn chế đối với khoá API). Lưu ý: Nếu có khoá API 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, thì 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 bài viết 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 trình tải 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>
Xin lưu ý rằng đây là một trang rất cơ bản với 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 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 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 API JavaScript cho Maps 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 DOCTYPE thực trong ứng dụng web.
Trong các ví dụ ở đây, chúng tôi đã khai báo ứng dụng của mình là HTML5 bằng cách sử dụng DOCTYPE HTML5 đơn giản như minh hoạ bên dưới:
<!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", nghĩa là ứng dụng của bạn phải 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 linh hoạt; những trình duyệt không hiểu được DOCTYPE sẽ bỏ qua và sử dụng "chế độ kỳ quặc" để hiển thị nội dung của chúng.
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ệ ở 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 phải kế thừa từ các phần tử khối mẹ và nếu bất kỳ đối tượng cấp trên nào trong số đó không chỉ định kích thước được, thì chúng sẽ được giả định là có kích thước ở mức 0 x 0 pixel. Vì lý do đó, chúng ta thê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 trang web, chúng ta phải đặt trước một vị trí cho bản đồ đó. Thông thường, chúng tôi 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 thông tin 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.
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 đồ. Đ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 đồ. Đặ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 là 400 pixel và chiều rộng là 100% để hiển thị toàn bộ 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 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ị sẵn sàng cho việc tải API JavaScript của Maps (sẽ không tải thư viện nào 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 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 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ó đ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();
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 Map và AdvancedMarkerElement được tải khi hàm initMap() được gọi.
Tìm hiểu mã
Ở 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
AdvancedMarkerElementđể thêm một đ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à cấp độ thu phóng. Vui lòng xem tài liệu về 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", });
Có hai tuỳ chọn bắt buộc cho mỗi bản đồ: center và zoom. 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 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 để thu phóng vào Trái Đất ở độ phân giải cao hơn.
Việc cung cấp một bản đồ của toàn bộ Trái đất dưới dạng một hình ảnh duy nhất sẽ cần một bản đồ rộng lớn 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à API JavaScript của Maps được chia thành "thẻ thông tin" bản đồ và "cấp độ thu phóng". Ở mức thu phóng thấp, một nhóm ô bản đồ nhỏ sẽ bao phủ một khu vực rộng; ở 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 ở mỗi cấp độ 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 ở các cấp độ thu phóng 0, 7 và 18.
Thêm một điểm đánh dấu
Mã dưới đây sẽ đặ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", });
Đ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();
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>
<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>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ố
- Tìm hiểu thêm về cách xem 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 tuỳ 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ề cách đị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 của bạn để kiểm thử và chạy mã, đọ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 máy Windows). Hãy 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.
- Mở Google Maps trong trình duyệt.
- 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ạ độ.
- Chọn Nội dung ở đây trong 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 toạ độ vĩ độ và kinh độ ở hàng cuối cùng của thẻ.
Bạn có thể chuyển đổi địa chỉ thành toạ độ 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ý.