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 của Maps trên trang web của bạn, hãy đặt URL mà bạn đã
tạo dưới dạng giá trị 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"
cần xoá tiêu chuẩn đường viền iframe từ xung quanh bản đồ. - Thuộc tính
referrerpolicy="no-referrer-when-downgrade"
để cho phép để gửi URL đầy đủ dưới dạng tiêu đềReferer
kèm theo yêu cầu để Các hạn chế đối với khoá API có thể hoạt động bình thường.
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. Lưu ý rằng bản đồ đã nhúng không được hỗ trợ dưới kích thước 200 px ở .
Các 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
, trình duyệt sẽ không gửi tiêu đề Referer
đến Google. Chiến dịch này
có thể khiến khoá API bị hạn chế
để từ chối yêu cầu. Để quy định hạn chế này hoạt động đúng cách, hãy thêm một
referrerpolicy
vào iframe, như trong ví dụ trên, để
cho phép gửi tiêu đề Referer
tới Google.
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 được hiển thị trong bất kỳ bản đồ nhất định 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 của mình:
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ỉ đường.directions
: hiển thị đường dẫn giữa hai hoặc nhiều các điểm cụ thể 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ị một điểm đánh dấu 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 bản đồ. | Tên địa điểm, địa chỉ, mã địa điểm hoặc mã địa điểm được thoát khỏi URL.
API Nhúng của Maps hỗ trợ cả + và %20
khi thoát khỏi không gian. 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ị vĩ độ và kinh độ đượ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 tùy 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 ô 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ữ dùng cho các thành phần trên giao diện người dùng và để hiển thị 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 biên giới và nhãn thích hợp để hiển thị, dựa trên tính 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ế độ 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
¢er=-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ị vĩ độ và kinh độ đượ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 tùy 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 ô 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ữ dùng cho các thành phần trên giao diện người dùng và để hiển thị 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 biên giới và nhãn thích hợp để hiển thị, dựa trên tính 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ế độ 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 của Maps hỗ trợ cả + và %20
khi thoát khỏi không gian. 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 . |
destination |
Bắt buộc | Xác định điểm cuối của 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 của Maps hỗ trợ cả + và %20
khi thoát khỏi không gian. 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 . |
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 khởi hành 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ế độ có liên quan nhất cho tuyến đường đã chỉ định. | 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 bỏ các tuyến đường có(các) đối tượng bị hạn chế; nó thiên về dẫn đến nhiều lộ trình thuận 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ị vĩ độ và kinh độ đượ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 tùy 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 ô 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ữ dùng cho các thành phần trên giao diện người dùng và để hiển thị 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 biên giới và nhãn thích hợp để hiển thị, dựa trên tính 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 của Maps cho phép bạn hiển thị hình ảnh trong 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 toàn bộ khuôn viên khu vực bao phủ. 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 có chế độ xem ngang 360 độ (bao quanh toàn bộ)
và 180 độ chế độ xem dọc (từ thẳng lên đến thẳng xuống). Chiến lược phát hành đĩa đơn
Chế độ streetview
cung cấp trình xem để kết xuất
ảnh toàn cảnh dưới dạng hình cầu với máy ảnh ở giữa. Bạn có thể điều khiển máy ảnh
để kiểm soát mức thu phóng và hướng của máy ảnh.
Xem ảnh toàn cảnh sau ở chế độ streetview
:
https://www.google.com/maps/embed/v1/streetview
?key=YOUR_API_KEY
&location=46.414382,10.013988
&heading=210
&pitch=10
&fov=35
Bắt buộc phải có một trong các tham số URL sau:
location
chấp nhận vĩ độ và kinh độ được phân tách bằng dấu phẩy giá trị (46.414382,10.013988
). API sẽ hiển thị ảnh toàn cảnh được chụp gần vị trí này nhất. Vì hình ảnh trong Chế độ xem đường phố được làm mới định kỳ và ảnh có thể được chụp từ vị trí của bạn mỗi lần, có thể vị trí của bạn có thể trùng với ảnh toàn cảnh khi hình ảnh được cập nhật.pano
là một mã nhận dạng ảnh toàn cảnh cụ thể. Nếu bạn chỉ định mộtpano
, bạn cũng có thể chỉ địnhlocation
. Chiến lược phát hành đĩa đơnlocation
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. Các giá trị dương sẽ hợp góc camera hướng lên trên, trong khi giá trị âm sẽ khiến camera hướng xuống dưới. Chiến lược phát hành đĩa đơn cao độ mặc định là 0° được đặt dựa trên vị trí của máy ảnh khi hình ảnh đã được chụp. Do đó, cao độ 0° thường là, nhưng không phải lúc nào cũng vậy, theo chiều ngang. Ví dụ: một hình ảnh được chụp trên một ngọn đồi có thể biểu diễ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 theo chiều ngang của hình ảnh. Nó mặc định là 90°. Khi xử lý khung nhìn có kích thước cố định, trường có thể được coi là mức thu phóng, với số nhỏ hơn biểu thị mức thu phóng cao hơn. | Giá trị tính bằng độ, trong phạm vi 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ị vĩ độ và kinh độ đượ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 tùy 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 ô 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ữ dùng cho các thành phần trên giao diện người dùng và để hiển thị 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 biên giới và nhãn thích hợp để hiển thị, dựa trên tính 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ế độ 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. | Thông báo này có thể bao gồm giới hạn 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ị vĩ độ và kinh độ đượ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 tùy 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 ô 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ữ dùng cho các thành phần trên giao diện người dùng và để hiển thị 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 biên giới và nhãn thích hợp để hiển thị, dựa trên tính 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 của 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 này. Mã địa điểm là cách ổn định để xác định 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 thông 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ệ đều là số nguyên không âm. Giá trị mặc định là 50.source
giới hạn các tìm kiếm trong Chế độ xem đường phố ở các nguồn được 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 việc tìm kiếm ở các bộ sưu tập ngoài trời. Trong nhà bộ sưu tập 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, xin lưu ý rằng chỉ trả về ảnh toàn cảnh để có thể xác định xem chúng có ở trong nhà hay không hoặc ngoài trời. Ví dụ: PhotoSpheres không được trả về vì không xác định dù chúng ở trong nhà hay ngoài trời.