Nhúng bản đồ

Hướng dẫn này trình bày cách nhúng bản đồ tương tác vào trang web của bạn.

Tạo URL API Nhúng của Maps

Sau đây là một URL mẫu tải API Nhúng của Maps:

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

Thay thế:

  • MAP_MODE bằng chế độ bản đồ của bạn.
  • YOUR_API_KEY bằng khoá API của bạn. Để biết thêm thông tin, hãy xem phần Lấy khoá API.
  • PARAMETERS với các thông số bắt buộc và không bắt buộc cho bản đồ của bạn .

Thêm URL vào iframe

Để sử dụng API Nhúng Maps trên trang web, hãy đặt URL bạn đã tạo làm giá trị của thuộc tính src của iframe. Kiểm soát kích thước của bản đồ bằng các thuộc tính height và width của iframe, ví dụ:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

Mẫu iframe ở trên sử dụng các thuộc tính bổ sung:

  • Thuộc tính allowfullscreen để cho phép một số phần nhất định trên bản đồ hiển thị toàn màn hình.
  • Các thuộc tính frameborder="0" và style="border:0" để xoá đường viền khung hiển thị nội dung chuẩn xung quanh bản đồ.
  • Thuộc tính referrerpolicy="no-referrer-when-downgrade" cho phép trình duyệt gửi URL đầy đủ dưới dạng tiêu đề Referer cùng với yêu cầu để các hạn chế về khoá API có thể hoạt động đúng cách.

Bạn có thể đổi kích thước iframe cho phù hợp với cấu trúc và thiết kế của trang web của riêng mình, nhưng chúng tôi thấy rằng khách tham quan thường thấy dễ dàng tương tác với bản đồ lớn hơn. Xin lưu ý rằng bản đồ được nhúng không được hỗ trợ dưới kích thước 200 px theo bất kỳ kích thước nào.

Hạn chế đối với khoá API

Nếu trang web lưu trữ có thẻ meta referrer được đặt thành no-referrer hoặc same-origin, thì trình duyệt sẽ không gửi tiêu đề Referer đến Google. Điều này có thể khiến quy tắc hạn chế đối với khoá API từ chối các yêu cầu. Để quy định hạn chế này hoạt động đúng cách, hãy thêm thuộc tính referrerpolicy vào iframe, như trong ví dụ ở trên, để cho phép gửi tiêu đề Referer đến Google một cách rõ ràng.

Quảng cáo trên bản đồ

API Nhúng của Maps có thể bao gồm quảng cáo trên bản đồ. Định dạng quảng cáo và nhóm quảng cáo hiển thị trên bất kỳ bản đồ nào có thể thay đổi mà không cần thông báo.

Chọn chế độ bản đồ

Bạn có thể chỉ định một trong các chế độ bản đồ sau đây để sử dụng trong URL yêu cầu:

  • place: hiển thị ghim trên bản đồ tại một địa điểm hoặc địa chỉ cụ thể, chẳng hạn như mốc, doanh nghiệp, đối tượng địa lý hoặc thị trấn.
  • view: trả về một bản đồ không có điểm đánh dấu hoặc chỉ dẫn.
  • directions: hiển thị đường dẫn giữa hai hoặc nhiều điểm được chỉ định trên bản đồ, cũng như khoảng cách và thời gian di chuyển.
  • streetview: hiển thị chế độ xem toàn cảnh tương tác từ các vị trí được chỉ định.
  • search: hiển thị kết quả cho một nội dung tìm kiếm trên bản đồ hiển thị .

Chế độ place

URL sau đây sử dụng chế độ bản đồ place để hiển thị điểm đánh dấu trên bản đồ tại Tháp Eiffel:

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

Bạn có thể sử dụng các tham số sau:

Thông số Loại Mô tả Giá trị được chấp nhận
q Bắt buộc Xác định vị trí điểm đánh dấu trên bản đồ. Tên địa điểm, địa chỉ, plus code hoặc mã địa điểm được chuyển đổi URL. API nhúng Maps hỗ trợ cả + và %20 khi thoát khỏi khoảng trắng. Ví dụ: chuyển đổi "Hội trường thành phố, New York, NY" đến City+Hall,New+York,NY hoặc mã cộng "849VCWC8+R9" đến 849VCWC8%2BR9.
center Không bắt buộc Xác định tâm của chế độ xem bản đồ. Chấp nhận giá trị kinh độ và vĩ độ được phân tách bằng dấu phẩy; ví dụ: 37.4218,-122.0840.
zoom Không bắt buộc Đặt mức thu phóng ban đầu của bản đồ. Giá trị dao động từ 0 (toàn thế giới) đến 21 (tòa nhà riêng lẻ). Giới hạn trên có thể thay đổi tuỳ thuộc vào dữ liệu bản đồ có sẵn tại vị trí đã chọn.
maptype Không bắt buộc Xác định loại thẻ thông tin bản đồ cần tải. roadmap (mặc định) hoặc satellite
language Không bắt buộc Xác định ngôn ngữ để sử dụng cho các thành phần trên giao diện người dùng và để hiển thị nhãn trên thẻ thông tin trên bản đồ. Theo mặc định, khách truy cập sẽ nhìn thấy bản đồ của riêng họ ngôn ngữ. Tham số này chỉ được hỗ trợ cho một số ô quốc gia; nếu ngôn ngữ cụ thể đã yêu cầu không được hỗ trợ cho nhóm ô, thì ngôn ngữ mặc định cho nhóm ô đó sẽ được sử dụng.
region Không bắt buộc Xác định đường viền và nhãn phù hợp để hiển thị, dựa trên mức độ nhạy cảm về địa chính trị. Chấp nhận mã vùng được chỉ định dưới dạng hai ký tự (không phải số) ánh xạ thẻ phụ khu vực Unicode đến ccTLD (miền cấp cao nhất) quen thuộc 2 ký tự. Xem Thông tin chi tiết về phạm vi của Nền tảng Google Maps để biết các khu vực được hỗ trợ.

Chế độ view

Ví dụ sau đây sử dụng chế độ view và tham số maptype không bắt buộc để hiển thị chế độ xem vệ tinh của bản đồ:

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Bạn có thể sử dụng các tham số sau:

Thông số Loại Mô tả Giá trị được chấp nhận
center Bắt buộc Xác định tâm của chế độ xem bản đồ. Chấp nhận giá trị kinh độ và vĩ độ được phân tách bằng dấu phẩy; ví dụ: 37.4218,-122.0840.
zoom Không bắt buộc Đặt mức thu phóng ban đầu của bản đồ. Giá trị dao động từ 0 (toàn thế giới) đến 21 (tòa nhà riêng lẻ). Giới hạn trên có thể thay đổi tuỳ thuộc vào dữ liệu bản đồ có sẵn tại vị trí đã chọn.
maptype Không bắt buộc Xác định loại thẻ thông tin bản đồ cần tải. roadmap (mặc định) hoặc satellite
language Không bắt buộc Xác định ngôn ngữ để sử dụng cho các thành phần trên giao diện người dùng và để hiển thị nhãn trên thẻ thông tin trên bản đồ. Theo mặc định, khách truy cập sẽ nhìn thấy bản đồ của riêng họ ngôn ngữ. Tham số này chỉ được hỗ trợ cho một số ô quốc gia; nếu ngôn ngữ cụ thể đã yêu cầu không được hỗ trợ cho nhóm ô, thì ngôn ngữ mặc định cho nhóm ô đó sẽ được sử dụng.
region Không bắt buộc Xác định đường viền và nhãn phù hợp để hiển thị, dựa trên mức độ nhạy cảm về địa chính trị. Chấp nhận mã khu vực được chỉ định dưới dạng thẻ con khu vực unicode gồm hai ký tự (không phải số) liên kết với các giá trị gồm hai ký tự ccTLD ("miền cấp cao nhất") quen thuộc. Xem Thông tin chi tiết về phạm vi của Nền tảng Google Maps để biết các khu vực được hỗ trợ.

Chế độ directions

Ví dụ sau đây sử dụng chế độ directions để hiển thị đường dẫn giữa Oslow và Telemark, Na Uy, khoảng cách và thời gian đi lại tránh trạm thu phí và đường cao tốc.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

Bạn có thể sử dụng các tham số sau:

Thông số Loại Mô tả Giá trị được chấp nhận
origin Bắt buộc Xác định điểm xuất phát mà từ đó hiển thị chỉ đường. Tên, địa chỉ, mã địa điểm, vĩ độ/kinh độ được thoát khỏi URL toạ độ hoặc mã địa điểm. API nhúng Maps hỗ trợ cả + và %20 khi thoát khỏi khoảng trắng. Ví dụ: chuyển đổi "City Hall, New York, NY" thành City+Hall,New+York,NY hoặc mã địa lý "849VCWC8+R9" thành 849VCWC8%2BR9.
destination Bắt buộc Xác định điểm cuối của chỉ đường. Tên địa điểm, địa chỉ, mã plus, tọa độ vĩ độ/kinh độ hoặc mã địa điểm được chuyển đổi URL. API nhúng Maps hỗ trợ cả + và %20 khi thoát khỏi khoảng trắng. Ví dụ: chuyển đổi "City Hall, New York, NY" thành City+Hall,New+York,NY hoặc mã địa lý "849VCWC8+R9" thành 849VCWC8%2BR9.
waypoints Không bắt buộc Chỉ định một hoặc nhiều địa điểm trung gian để định tuyến đường đi giữa điểm xuất phát và điểm đến. Tên địa điểm, địa chỉ hoặc mã địa điểm. Bạn có thể chỉ định nhiều điểm tham chiếu bằng cách sử dụng dấu gạch đứng (|) để riêng biệt (ví dụ: Berlin,Germany|Paris,France). Bạn có thể chỉ định tối đa 20 điểm tham chiếu.
mode Không bắt buộc Xác định phương thức di chuyển. Nếu không có chế độ nào được chỉ định API Nhúng của Maps sẽ hiển thị một hoặc nhiều chế độ phù hợp nhất cho tuyến đường cụ thể. driving, walking (ưu tiên người đi bộ các lối đi và vỉa hè, nếu có), bicycling ( các tuyến đường thông qua đường dành cho xe đạp và tuyến đường ưu tiên (nếu có), transit hoặc flying.
avoid Không bắt buộc Chỉ định các tính năng cần tránh trong chỉ đường. Xin lưu ý rằng điều này không loại trừ các tuyến đường có (các) tính năng bị hạn chế; mà chỉ làm sai lệch kết quả để ưu tiên các tuyến đường có lợi hơn. tolls, ferries và/hoặc highways. Phân tách nhiều giá trị bằng ký tự dấu gạch đứng (ví dụ: avoid=tolls|highways).
units Không bắt buộc Chỉ định phương pháp đo lường, hệ mét hoặc hệ đo lường khi hiển thị khoảng cách trong kết quả. Nếu bạn không chỉ định units, giá trị origin quốc gia của truy vấn xác định đơn vị sẽ sử dụng. metric hoặc imperial
center Không bắt buộc Xác định tâm của chế độ xem bản đồ. Chấp nhận giá trị kinh độ và vĩ độ được phân tách bằng dấu phẩy; ví dụ: 37.4218,-122.0840.
zoom Không bắt buộc Đặt mức thu phóng ban đầu của bản đồ. Giá trị dao động từ 0 (toàn thế giới) đến 21 (tòa nhà riêng lẻ). Giới hạn trên có thể thay đổi tuỳ thuộc vào dữ liệu bản đồ có sẵn tại vị trí đã chọn.
maptype Không bắt buộc Xác định loại thẻ thông tin bản đồ cần tải. roadmap (mặc định) hoặc satellite
language Không bắt buộc Xác định ngôn ngữ để sử dụng cho các thành phần trên giao diện người dùng và để hiển thị nhãn trên thẻ thông tin trên bản đồ. Theo mặc định, khách truy cập sẽ nhìn thấy bản đồ của riêng họ ngôn ngữ. Tham số này chỉ được hỗ trợ cho một số ô quốc gia; nếu ngôn ngữ cụ thể đã yêu cầu không được hỗ trợ cho nhóm ô, thì ngôn ngữ mặc định cho nhóm ô đó sẽ được sử dụng.
region Không bắt buộc Xác định đường viền và nhãn phù hợp để hiển thị, dựa trên mức độ nhạy cảm về địa chính trị. Chấp nhận mã vùng được chỉ định dưới dạng hai ký tự (không phải số) ánh xạ thẻ phụ khu vực Unicode đến ccTLD (miền cấp cao nhất) quen thuộc 2 ký tự. Xem Nền tảng Google Maps Thông tin về phạm vi phủ sóng cho những khu vực được hỗ trợ.

Chế độ streetview

API nhúng Maps cho phép bạn hiển thị hình ảnh Chế độ xem đường phố dưới dạng ảnh toàn cảnh tương tác từ các vị trí được chỉ định trong khu vực có dữ liệu. Người dùng ảnh toàn cảnh 360 độ được đóng góp và Bộ sưu tập đặc biệt của Chế độ xem đường phố tại đây cũng có sẵn.

Mỗi ảnh toàn cảnh trong Chế độ xem đường phố cung cấp chế độ xem 360 độ đầy đủ từ một thiết bị vị trí. Hình ảnh chứa chế độ xem ngang 360 độ (bao phủ toàn bộ) và chế độ xem dọc 180 độ (từ trên xuống dưới). Chế độ streetview cung cấp một trình xem hiển thị hình ảnh toàn cảnh thu được dưới dạng một hình cầu có máy ảnh ở giữa. Bạn có thể thao tác với máy ảnh để điều khiển chế độ thu phóng và hướng của máy ảnh.

Xem ảnh toàn cảnh ở chế độ streetview sau:

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

Bạn bắt buộc phải có một trong các tham số URL sau:

  • location chấp nhận vĩ độ và kinh độ dưới dạng các giá trị được phân tách bằng dấu phẩy (46.414382,10.013988). API sẽ hiển thị ảnh toàn cảnh được chụp gần nhất với vị trí này. Vì hình ảnh trong Chế độ xem đường phố được làm mới định kỳ và mỗi lần chụp ảnh có thể ở vị trí hơi khác nhau, nên vị trí của bạn có thể chuyển sang một ảnh toàn cảnh khác khi hình ảnh được cập nhật.

  • pano là mã nhận dạng ảnh toàn cảnh cụ thể. Nếu chỉ định pano, bạn cũng có thể chỉ định location. Chiến lược phát hành đĩa đơn location sẽ chỉ được sử dụng nếu API không tìm thấy ảnh toàn cảnh Mã nhận dạng.

Các tham số URL sau đây là không bắt buộc:

Thông số Loại Mô tả Giá trị được chấp nhận
heading Không bắt buộc Cho biết hướng la bàn của máy ảnh theo độ theo chiều kim đồng hồ từ Bắc. Giá trị theo độ từ -180° đến 360°
pitch Không bắt buộc xác định góc, hướng lên hoặc xuống của camera. Giá trị dương sẽ hướng máy ảnh lên trên, trong khi giá trị âm sẽ hướng máy ảnh xuống dưới. Độ dốc mặc định là 0° được đặt dựa trên vị trí của máy ảnh khi chụp hình. Do đó, độ dốc 0° thường là theo chiều ngang, nhưng không phải lúc nào cũng vậy. Ví dụ: một hình ảnh được chụp trên một ngọn đồi sẽ có khả năng thể hiện cao độ mặc định không phải là chiều ngang. Giá trị theo độ từ -90° đến 90°
fov Không bắt buộc xác định trường nhìn ngang của hình ảnh. Giá trị mặc định là 90°. Khi xử lý khung nhìn có kích thước cố định, trường chế độ xem có thể được coi là mức thu phóng, với các số nhỏ hơn cho biết mức thu phóng cao hơn. Giá trị tính bằng độ, trong khoảng từ 10° đến 100°
center Không bắt buộc Xác định tâm của chế độ xem bản đồ. Chấp nhận giá trị kinh độ và vĩ độ được phân tách bằng dấu phẩy; ví dụ: 37.4218,-122.0840.
zoom Không bắt buộc Đặt mức thu phóng ban đầu của bản đồ. Giá trị dao động từ 0 (toàn thế giới) đến 21 (tòa nhà riêng lẻ). Giới hạn trên có thể thay đổi tuỳ thuộc vào dữ liệu bản đồ có sẵn tại vị trí đã chọn.
maptype Không bắt buộc Xác định loại thẻ thông tin bản đồ cần tải. roadmap (mặc định) hoặc satellite
language Không bắt buộc Xác định ngôn ngữ để sử dụng cho các thành phần trên giao diện người dùng và để hiển thị nhãn trên thẻ thông tin trên bản đồ. Theo mặc định, khách truy cập sẽ nhìn thấy bản đồ của riêng họ ngôn ngữ. Tham số này chỉ được hỗ trợ cho một số ô quốc gia; nếu ngôn ngữ cụ thể đã yêu cầu không được hỗ trợ cho nhóm ô, thì ngôn ngữ mặc định cho nhóm ô đó sẽ được sử dụng.
region Không bắt buộc Xác định đường viền và nhãn phù hợp để hiển thị, dựa trên mức độ nhạy cảm về địa chính trị. Chấp nhận mã vùng được chỉ định dưới dạng hai ký tự (không phải số) ánh xạ thẻ phụ khu vực Unicode đến ccTLD (miền cấp cao nhất) quen thuộc 2 ký tự. Xem Thông tin chi tiết về phạm vi của Nền tảng Google Maps để biết các khu vực được hỗ trợ.

Chế độ search

Chế độ Search hiển thị kết quả cho một nội dung tìm kiếm trên khu vực nhìn thấy được trên bản đồ. Bạn nên xác định vị trí cho tìm kiếm bằng cách bao gồm vị trí trong cụm từ tìm kiếm (record+stores+in+Seattle) hoặc bằng cách thêm tham số center và zoom để liên kết lệnh tìm kiếm.

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

Bạn có thể sử dụng các tham số sau:

Thông số Loại Mô tả Giá trị được chấp nhận
q Bắt buộc Xác định cụm từ tìm kiếm. Biến này có thể bao gồm một quy tắc hạn chế về địa lý, chẳng hạn như in+Seattle hoặc near+98033.
center Không bắt buộc Xác định tâm của chế độ xem bản đồ. Chấp nhận giá trị kinh độ và vĩ độ được phân tách bằng dấu phẩy; ví dụ: 37.4218,-122.0840.
zoom Không bắt buộc Đặt mức thu phóng ban đầu của bản đồ. Giá trị dao động từ 0 (toàn thế giới) đến 21 (tòa nhà riêng lẻ). Giới hạn trên có thể thay đổi tuỳ thuộc vào dữ liệu bản đồ có sẵn tại vị trí đã chọn.
maptype Không bắt buộc Xác định loại thẻ thông tin bản đồ cần tải. roadmap (mặc định) hoặc satellite
language Không bắt buộc Xác định ngôn ngữ để sử dụng cho các thành phần trên giao diện người dùng và để hiển thị nhãn trên thẻ thông tin trên bản đồ. Theo mặc định, khách truy cập sẽ nhìn thấy bản đồ của riêng họ ngôn ngữ. Tham số này chỉ được hỗ trợ cho một số ô quốc gia; nếu ngôn ngữ cụ thể đã yêu cầu không được hỗ trợ cho nhóm ô, thì ngôn ngữ mặc định cho nhóm ô đó sẽ được sử dụng.
region Không bắt buộc Xác định đường viền và nhãn phù hợp để hiển thị, dựa trên mức độ nhạy cảm về địa chính trị. Chấp nhận mã vùng được chỉ định dưới dạng hai ký tự (không phải số) ánh xạ thẻ phụ khu vực Unicode đến ccTLD (miền cấp cao nhất) quen thuộc 2 ký tự. Xem Nền tảng Google Maps Thông tin về phạm vi phủ sóng cho những khu vực được hỗ trợ.

Thông số mã địa điểm

API nhúng Maps hỗ trợ việc sử dụng mã địa điểm thay vì cung cấp tên hoặc địa chỉ của địa điểm. Mã địa điểm là cách ổn định để xác định duy nhất một địa điểm. Để biết thêm thông tin, hãy xem tài liệu về API Google Địa điểm.

API Nhúng của Maps chấp nhận mã địa điểm cho URL sau đây tham số:

  • q
  • origin
  • destination
  • waypoints

Để sử dụng mã địa điểm, trước tiên, bạn phải thêm tiền tố place_id:. Chiến lược phát hành đĩa đơn đoạn mã sau đây chỉ định Toà thị chính New York là điểm khởi hành của một đường đi yêu cầu: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius đặt bán kính (được chỉ định theo mét) để tìm kiếm ảnh toàn cảnh, căn giữa vào vĩ độ và kinh độ cho trước. Giá trị hợp lệ là số nguyên không âm. Giá trị mặc định là 50.

  • source giới hạn nội dung tìm kiếm trên Chế độ xem đường phố ở một số nguồn đã chọn. Các giá trị hợp lệ là:

    • default sử dụng các nguồn mặc định cho Chế độ xem đường phố; tìm kiếm chứ không chỉ những nguồn cụ thể.
    • outdoor giới hạn nội dung tìm kiếm ở các bộ sưu tập ngoài trời. Các bộ sưu tập trong nhà không được đưa vào kết quả tìm kiếm. Lưu ý rằng ảnh toàn cảnh ngoài trời có thể không tồn tại cho vị trí được chỉ định. Ngoài ra, hãy lưu ý rằng tính năng tìm kiếm chỉ trả về những bức ảnh toàn cảnh mà bạn có thể xác định được là trong nhà hay ngoài trời. Ví dụ: Ảnh toàn cảnh 360 độ không được trả về vì không xác định được ảnh đó được chụp trong nhà hay ngoài trời.