Tổng quan
Google Maps Platform có sẵn cho web (JS, TS), Android và iOS, đồng thời cũng cung cấp các API dịch vụ web để nhận thông tin về địa điểm, chỉ đường và khoảng cách. Các mẫu trong hướng dẫn này được viết cho một nền tảng, nhưng các đường liên kết đến tài liệu cũng được cung cấp để triển khai trên các nền tảng khác.
Khi xem sản phẩm của bạn trên mạng, người dùng sẽ muốn tìm cách tốt nhất và thuận tiện nhất để nhận hàng. Hướng dẫn triển khai Công cụ định vị sản phẩm và các mẹo tuỳ chỉnh mà chúng tôi cung cấp trong chủ đề này là sự kết hợp tối ưu giữa các API trên Nền tảng Google Maps để tạo trải nghiệm người dùng tuyệt vời cho công cụ định vị sản phẩm.
Khi làm theo hướng dẫn triển khai này, bạn có thể giúp khách hàng xem thông tin chi tiết cần thiết để tìm sản phẩm của bạn, đồng thời chỉ đường cho họ đến cửa hàng có mặt hàng đó, cho dù họ đang lái xe, đi xe đạp, đi bộ hay sử dụng phương tiện công cộng.
Bật API
Để triển khai Công cụ định vị sản phẩm, bạn phải bật các API sau trong Google Cloud Console. Các siêu liên kết sau sẽ đưa bạn đến Google Cloud Console để bật từng API cho dự án bạn đã chọn:
Để biết thêm thông tin về cách thiết lập, hãy xem bài viết Bắt đầu sử dụng Nền tảng Google Maps.
Các phần trong hướng dẫn triển khai
Sau đây là các cách triển khai và tuỳ chỉnh mà chúng tôi sẽ đề cập trong chủ đề này.
- Biểu tượng dấu kiểm là một bước triển khai cốt lõi.
- Biểu tượng dấu sao là không bắt buộc nhưng bạn nên tuỳ chỉnh để nâng cao giải pháp.
| Liên kết vị trí cửa hàng với các địa điểm trên Nền tảng Google Maps | So khớp vị trí cửa hàng với một địa điểm trong Nền tảng Google Maps. | |
| Xác định vị trí của người dùng | Thêm chức năng nhập dữ liệu theo nhu cầu để cải thiện trải nghiệm người dùng trên tất cả nền tảng và cải thiện độ chính xác của địa chỉ chỉ với thao tác nhấn phím tối thiểu. | |
| Xác định cửa hàng gần nhất | Tính toán khoảng cách và thời gian di chuyển cho nhiều điểm xuất phát và điểm đến, có thể chọn chỉ định nhiều hình thức di chuyển như đi bộ, lái xe, phương tiện công cộng hoặc đi xe đạp. | |
| Hiển thị thông tin cửa hàng | Hiển thị thông tin phong phú về dữ liệu trên cửa hàng của bạn để người dùng có thể di chuyển đến cửa hàng dễ dàng hơn. | |
| Cung cấp thông tin đường đi | Xem dữ liệu về đường đi từ điểm khởi hành đến điểm đến bằng nhiều hình thức phương tiện giao thông như đi bộ, lái xe, đi xe đạp và phương tiện công cộng. | |
| Gửi đường đi đến thiết bị di động | Ngoài việc hiển thị thông tin đường đi trên trang web, bạn cũng có thể gửi thông tin đường đi đến điện thoại của người dùng để đi theo chỉ dẫn bằng Google Maps khi di chuyển. | |
| Hiển thị vị trí của bạn trên bản đồ tương tác | Tạo điểm đánh dấu bản đồ tùy chỉnh để giúp vị trí của bạn nổi bật và tạo kiểu cho bản đồ để phù hợp với màu sắc thương hiệu của bạn. Hiển thị (hoặc ẩn) các địa điểm yêu thích (POI) cụ thể trên bản đồ của bạn để giúp người dùng tự định hướng tốt hơn và kiểm soát mật độ POI để tránh tình trạng bản đồ lộn xộn. | |
| Kết hợp dữ liệu vị trí tuỳ chỉnh với Thông tin chi tiết về địa điểm | Kết hợp thông tin vị trí tuỳ chỉnh của riêng bạn với Thông tin chi tiết về địa điểm nhằm cung cấp cho người dùng một tập dữ liệu phong phú để đưa ra quyết định. |
Liên kết vị trí cửa hàng với địa điểm trên Nền tảng Google Maps
Đang tải mã địa điểm
| Ví dụ này sử dụng: API Địa điểm | Cũng có sẵn: JavaScript |
Bạn có thể có một cơ sở dữ liệu về cửa hàng của mình với các thông tin cơ bản như tên
vị trí, địa chỉ và số điện thoại của cửa hàng, đồng thời bạn muốn liên kết
cơ sở dữ liệu đó với một địa điểm trong Nền tảng Google Maps làm tập hợp các điểm đến cuối cùng
mà người dùng có thể đến lấy sản phẩm. Để tìm nạp thông tin mà Nền tảng Google Maps có về địa điểm đó, bao gồm cả toạ độ địa lý và thông tin do người dùng đóng góp, hãy tìm mã địa điểm tương ứng với từng cửa hàng trong cơ sở dữ liệu của bạn.
Bạn có thể thực hiện lệnh gọi đến
điểm cuối Tìm địa điểm trong Tìm kiếm địa điểm của API địa điểm và chỉ yêu cầu trường place_id.
Sau đây là ví dụ về cách yêu cầu mã địa điểm cho văn phòng của Google London:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
Bạn có thể lưu trữ mã địa điểm này trong cơ sở dữ liệu cùng với phần dữ liệu còn lại của cửa hàng, đồng thời sử dụng mã này như một cách hiệu quả để yêu cầu thông tin về cửa hàng. Sau đây là hướng dẫn sử dụng mã địa điểm để mã hoá địa lý, truy xuất Thông tin chi tiết về địa điểm và yêu cầu chỉ đường đến địa điểm đó.
Mã hoá địa lý vị trí của bạn
| Ví dụ này sử dụng: API mã hóa địa lý | Cũng có sẵn: JavaScript |
Nếu cơ sở dữ liệu về cửa hàng của bạn có địa chỉ đường phố nhưng không có toạ độ địa lý, hãy sử dụng API Mã hoá địa lý để lấy vĩ độ và kinh độ của địa chỉ đó nhằm tính toán xem cửa hàng nào gần khách hàng của bạn nhất. Bạn có thể mã hoá địa lý cửa hàng ở phía máy chủ, lưu trữ vĩ độ và kinh độ trong cơ sở dữ liệu và làm mới ít nhất 30 ngày một lần.
Dưới đây là ví dụ về cách sử dụng API mã hoá địa lý để lấy vĩ độ và kinh độ của mã địa điểm đã được trả về cho văn phòng của Google London:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
Nhận dạng vị trí của người dùng
| Ví dụ này sử dụng: Thư viện tự động hoàn thành địa điểm trong API JavaScript của Maps | Cũng áp dụng: Android | iOS |
Một thành phần chính trong Công cụ định vị sản phẩm là xác định vị trí bắt đầu của người dùng. Bạn có thể cung cấp hai lựa chọn để người dùng chỉ định vị trí bắt đầu của họ: nhập nguồn gốc nội dung tìm kiếm hoặc cấp quyền truy cập vào thông tin định vị vị trí của trình duyệt web hoặc dịch vụ vị trí trên thiết bị di động.
Xử lý các mục nhập đã nhập bằng tính năng tự động hoàn thành
Người dùng ngày nay đã quen với chức năng tự động hoàn thành nhập ở trước trên phiên bản Google Maps dành cho người tiêu dùng. Bạn có thể tích hợp chức năng này vào bất kỳ ứng dụng nào bằng cách sử dụng thư viện Địa điểm trong Nền tảng Google Maps trên thiết bị di động và trên web. Khi người dùng nhập một địa chỉ, tính năng tự động hoàn thành sẽ điền các phần còn lại thông qua việc sử dụng tiện ích. Bạn cũng có thể cung cấp chức năng tự động hoàn thành của riêng mình bằng cách sử dụng trực tiếp thư viện Địa điểm.
Trong ví dụ sau, hãy thêm thư viện Tự động hoàn thành địa điểm vào trang web của bạn bằng cách thêm tham số libraries=places vào URL của tập lệnh JavaScript API của Maps.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>Tiếp theo, hãy thêm một hộp văn bản vào trang của bạn để người dùng nhập thông tin:
<input id="autocomplete" placeholder="Enter
starting address, city, or zip code" type="text"></input>Cuối cùng, bạn cần khởi chạy dịch vụ Tự động hoàn thành và liên kết dịch vụ đó với hộp văn bản đã đặt tên. Việc giới hạn tính năng Dự đoán tự động hoàn thành về địa điểm theo các loại mã địa lý sẽ định cấu hình trường nhập dữ liệu để chấp nhận địa chỉ đường phố, khu vực lân cận, thành phố và mã bưu chính. Nhờ đó, người dùng có thể nhập mọi mức độ cụ thể để mô tả nguồn gốc. Hãy nhớ yêu cầu trường geometry để phản hồi có vĩ độ và kinh độ tại điểm khởi hành của người dùng. Bạn sẽ sử dụng các toạ độ bản đồ này để biểu thị mối quan hệ của các vị trí của bạn với điểm khởi hành.
// Create the autocomplete object, restricting the search predictions to
// geographical location types.
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("autocomplete"),
{ types: ["geocode"],
componentRestrictions: {'country': ['gb']},
fields: ['place_id', 'geometry', 'formatted_address'] }
);
// When the user selects an address from the drop-down
// zoom to the select location and add a marker.
autocomplete.addListener("place_changed", searchFromOrigin);
}
Trong ví dụ này, sau khi người dùng chọn địa chỉ, hàm searchFromOrigin() sẽ bắt đầu. Thao tác này sẽ lấy hình học của kết quả được so khớp là vị trí của người dùng, sau đó tìm kiếm các vị trí gần nhất dựa trên các toạ độ đó làm điểm gốc, như được thảo luận trong phần Xác định cửa hàng gần nhất.
Hãy mở rộng phần này để xem hướng dẫn từng bước bằng video về cách thêm tính năng Tự động hoàn thành địa điểm vào ứng dụng:
Trang web
Ứng dụng Android
Ứng dụng iOS
Sử dụng vị trí địa lý của trình duyệt
Để yêu cầu và xử lý vị trí địa lý của trình duyệt HTML5, hãy xem cách bật cửa sổ Sử dụng vị trí của tôi:
Xác định cửa hàng gần nhất
| Ví dụ này sử dụng: Dịch vụ ma trận khoảng cách, API Maps JavaScript | Cũng có: API Ma trận khoảng cách |
Sau khi biết vị trí của người dùng, bạn có thể so sánh vị trí này với vị trí cửa hàng của mình. Thực hiện việc này bằng Dịch vụ ma trận khoảng cách, API Maps JavaScript giúp người dùng chọn vị trí thuận tiện nhất cho họ theo thời gian lái xe hoặc khoảng cách đường đi.
Cách tiêu chuẩn để sắp xếp danh sách các vị trí là sắp xếp chúng theo khoảng cách. Thông thường, khoảng cách này được tính đơn giản bằng cách sử dụng đường thẳng từ người dùng đến vị trí, nhưng điều này có thể gây hiểu lầm. Đường thẳng có thể nằm phía trên một con sông không thể vượt qua hoặc qua những con đường đông đúc vào thời điểm một vị trí khác có thể thuận tiện hơn. Điều này rất quan trọng khi bạn có nhiều địa điểm cách nhau vài km.
Dịch vụ ma trận khoảng cách, API Maps JavaScript hoạt động bằng cách lấy danh sách vị trí điểm khởi hành và điểm đến, đồng thời trả về không chỉ khoảng cách di chuyển mà còn thời gian giữa các vị trí đó. Trong trường hợp của người dùng, điểm gốc sẽ là nơi họ hiện đang ở hoặc điểm xuất phát mong muốn, và điểm đến sẽ là của các vị trí đó. Điểm xuất phát và điểm đến có thể được chỉ định thành cặp toạ độ hoặc dưới dạng địa chỉ. Khi bạn gọi dịch vụ, dịch vụ sẽ khớp với các địa chỉ. Bạn có thể sử dụng Dịch vụ ma trận khoảng cách, API Maps JavaScript với các tham số bổ sung để hiển thị kết quả dựa trên thời gian lái xe hiện tại hoặc trong tương lai.
Ví dụ sau đây gọi Dịch vụ ma trận khoảng cách, API Maps JavaScript, chỉ định điểm xuất phát của người dùng và 25 vị trí cửa hàng cùng một lúc.
function getDistances(place) {
let distanceMatrixService = new google.maps.DistanceMatrixService();
const origins = [place];
return new Promise((resolve, reject) => {
const callback = (response, status) => {
if (status === google.maps.DistanceMatrixStatus.OK && response) {
resolve(response);
} else {
reject(status);
}
};
distanceMatrixService.getDistanceMatrix(
{
origins,
destinations: stores.slice(0, 25).map((store) => store.location),
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
},
callback
);
});
}
function update(location) {
if (!location) {
return;
}
// ...
// sort by spherical distance
stores.sort((a, b) => {
return (
google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(a.location),
location
) -
google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(b.location),
location
)
);
});
// display travel distance and time
getDistances(location)
.then((response) => {
for (let i = 0; i < response.rows[0].elements.length; i++) {
stores[i].address = response.destinationAddresses[i];
stores[i].travelDistance = response.rows[0].elements[i].distance.value;
stores[i].travelDistanceText =
response.rows[0].elements[i].distance.text;
stores[i].travelDuration = response.rows[0].elements[i].duration.value;
stores[i].travelDurationText =
response.rows[0].elements[i].duration.text;
}
})
.finally(() => {
renderCards(stores);
autocompleteInput.disabled = false;
isUpdateInProgress = false;
});
}
Đối với mỗi địa điểm lân cận, bạn có thể cho biết tình trạng còn hàng của sản phẩm dựa trên cơ sở dữ liệu kho hàng.
Đang đăng thông tin cửa hàng
| Ví dụ này sử dụng: Thư viện địa điểm, API JavaScript cho Maps | Cũng có sẵn: SDK Địa điểm dành cho Android | SDK Địa điểm dành cho iOS | API Địa điểm |
Bạn có thể chia sẻ Thông tin chi tiết phong phú về địa điểm như thông tin liên hệ, giờ làm việc và trạng thái mở cửa hiện tại để giúp khách hàng chọn vị trí họ ưa thích hoặc hoàn tất đơn đặt hàng.
Sau khi thực hiện lệnh gọi đến Maps JavaScript API để lấy thông tin về địa điểm, bạn có thể lọc và kết xuất phản hồi.
Để yêu cầu Thông tin chi tiết về địa điểm, bạn cần có mã địa điểm của từng vị trí. Xem phần Lấy mã địa điểm để truy xuất mã địa điểm của vị trí.
Yêu cầu Chi tiết địa điểm sau đây sẽ trả về địa chỉ, toạ độ, trang web, số điện thoại, điểm xếp hạng và giờ mở cửa cho mã địa điểm trên Google London:
var request = {
placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
}
Công cụ định vị sản phẩm nâng cao
Tuỳ thuộc vào doanh nghiệp hoặc nhu cầu của người dùng, bạn có thể nâng cao trải nghiệm của người dùng hơn nữa.
Cung cấp thông tin đường đi
| Ví dụ này sử dụng: Dịch vụ chỉ đường API Maps JavaScript | Cũng cung cấp: Dịch vụ web Chỉ đường để sử dụng trên Android và iOS, trực tiếp từ ứng dụng hoặc từ xa thông qua proxy máy chủ |
Khi bạn hiển thị chỉ đường cho người dùng từ bên trong trang web hoặc ứng dụng của bạn, người dùng không cần phải rời khỏi trang web của bạn và bị phân tâm với các trang khác hoặc nhìn thấy các đối thủ cạnh tranh trên bản đồ. Thậm chí, bạn có thể cho thấy lượng khí thải cacbon của phương tiện đi lại cụ thể và cho thấy tác động của bất kỳ hành trình cụ thể nào bằng cách sử dụng tập dữ liệu cacbon mà bạn có thể sở hữu.
Dịch vụ chỉ đường cũng có các hàm cho phép bạn xử lý và hiển thị kết quả dễ dàng trên bản đồ.
Sau đây là ví dụ về cách hiển thị một bảng điều hướng. Để biết thêm thông tin về mẫu này, hãy xem phần Hiển thị hướng văn bản.
Đang gửi chỉ đường đến thiết bị di động
Để giúp người dùng dễ dàng đến một vị trí hơn nữa, bạn có thể gửi cho họ đường liên kết chỉ đường qua tin nhắn hoặc email. Khi người dùng nhấp vào nút này, ứng dụng Google Maps sẽ khởi chạy trên điện thoại nếu được cài đặt, hoặc maps.google.com sẽ tải trong trình duyệt web của thiết bị. Cả hai trải nghiệm này đều cung cấp cho người dùng lựa chọn sử dụng tính năng chỉ đường từng chặng, bao gồm cả hướng dẫn bằng giọng nói, để đến điểm đến.
Sử dụng
URL của Maps để soạn một URL đường đi như sau, trong đó tên địa điểm được mã hoá URL là tham số destination và mã địa điểm là tham số destination_place_id. Bạn không mất phí để soạn hoặc sử dụng URL của Maps, vì vậy, bạn không cần thêm khoá API vào URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Bạn có thể tuỳ ý cung cấp tham số truy vấn origin bằng cách sử dụng cùng định dạng địa chỉ với đích đến. Tuy nhiên, nếu bỏ qua thuộc tính này, thông tin chỉ đường sẽ bắt đầu từ vị trí hiện tại của người dùng (có thể khác với vị trí họ đang dùng ứng dụng Product Locator của bạn). URL của Maps cung cấp thêm các lựa chọn tham số truy vấn, chẳng hạn như travelmode và dir_action=navigate để mở đường đi khi đã bật tính năng điều hướng.
Đường liên kết có thể nhấp vào này (mở rộng URL ví dụ ở trên) đặt origin làm sân vận động bóng đá London và sử dụng travelmode=transit để cung cấp thông tin đường đi bằng phương tiện công cộng tới điểm đến.
Để gửi văn bản hoặc email chứa URL này, bạn nên sử dụng một ứng dụng của bên thứ ba như twilio. Nếu đang sử dụng App Engine, bạn có thể dùng các công ty bên thứ ba để gửi tin nhắn SMS hoặc email. Để biết thêm thông tin, hãy xem phần Gửi tin nhắn bằng dịch vụ bên thứ ba.
Hiển thị vị trí của bạn trên bản đồ tương tác
Sử dụng bản đồ động
| Ví dụ này sử dụng: API JavaScript cho Maps | Cũng áp dụng: Android | iOS |
Công cụ định vị là một phần quan trọng trong trải nghiệm người dùng. Tuy nhiên, một số trang web thậm chí có thể thiếu một bản đồ đơn giản, yêu cầu người dùng rời khỏi trang web hoặc ứng dụng để tìm một vị trí lân cận. Như vậy, những người dùng phải di chuyển giữa các trang để nhận được thông tin họ cần sẽ mang lại trải nghiệm dưới mức tối ưu. Thay vào đó, bạn có thể nâng cao trải nghiệm này bằng cách nhúng và tuỳ chỉnh bản đồ vào ứng dụng của mình.
Bạn có thể thêm bản đồ động vào trang (tức là bản đồ mà người dùng có thể di chuyển xung quanh, phóng to, thu nhỏ và xem thông tin chi tiết về nhiều vị trí và địa điểm yêu thích khác nhau) bằng một vài dòng mã.
Trước tiên, bạn cần đưa API JavaScript của Maps vào trang. Bạn có thể thực hiện việc này thông qua việc liên kết tập lệnh sau trong trang HTML.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>URL này tham chiếu hàm initMap của JavaScript sẽ chạy khi trang tải. Trong URL, bạn cũng có thể xác định ngôn ngữ hoặc khu vực trên bản đồ của mình để đảm bảo bản đồ được định dạng theo đúng cách cho quốc gia cụ thể mà bạn đang nhắm mục tiêu. Việc thiết lập khu vực cũng đảm bảo hành vi của các ứng dụng được dùng bên ngoài Hoa Kỳ có xu hướng thiên về khu vực bạn đã đặt. Hãy xem Thông tin chi tiết về mức độ phù hợp của Nền tảng Google Maps để biết danh sách đầy đủ các ngôn ngữ và khu vực được hỗ trợ, đồng thời tìm hiểu thêm về cách sử dụng tham số region.
Tiếp theo, bạn cần có HTML div để đặt bản đồ của mình trên trang.
Đây là nơi bản đồ sẽ được hiển thị.
<div id="map"></div>Bước tiếp theo là thiết lập chức năng cơ bản cho bản đồ của bạn. Bạn có thể thực hiện việc này trong hàm tập lệnh initMap được chỉ định trong URL của tập lệnh. Trong tập lệnh này, như minh hoạ trong ví dụ sau, bạn có thể đặt vị trí ban đầu, loại bản đồ và chế độ điều khiển nào sẽ xuất hiện trên bản đồ cho người dùng. Lưu ý rằng
getElementById() tham chiếu đến mã nhận dạng div "map" ở trên.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
zoomControl: false
});
}
Đối với một công cụ định vị, bạn thường quan tâm đến việc đặt vị trí ban đầu, điểm giữa hoặc giới hạn và mức thu phóng (mức độ phóng to bản đồ đến vị trí đó). Hầu hết các phần tử khác, chẳng hạn như tinh chỉnh các thành phần điều khiển, là không bắt buộc khi bạn xác định mức độ tương tác với bản đồ.
Tuỳ chỉnh bản đồ của bạn
Bạn có thể thay đổi giao diện và thông tin chi tiết của bản đồ theo một số cách. Ví dụ: bạn có thể:
- Tạo điểm đánh dấu tùy chỉnh của riêng bạn để thay thế các ghim bản đồ mặc định.
- Thay đổi màu sắc của các đối tượng trên bản đồ để phản ánh thương hiệu của bạn.
- Kiểm soát những địa điểm yêu thích mà bạn đăng (điểm thu hút, món ăn, chỗ ở, v.v.) và mật độ điểm ảnh, cho phép bạn tập trung sự chú ý của người dùng vào các vị trí của bạn, đồng thời đánh dấu các địa danh giúp người dùng đến vị trí gần nhất.
Tạo điểm đánh dấu bản đồ tùy chỉnh
Bạn có thể tuỳ chỉnh điểm đánh dấu bằng cách thay đổi màu mặc định (có thể cho biết vị trí hiện có đang mở cửa hay không) hoặc thay thế điểm đánh dấu bằng hình ảnh tuỳ chỉnh, chẳng hạn như biểu trưng của thương hiệu. Cửa sổ thông tin hoặc cửa sổ bật lên có thể cung cấp thêm thông tin cho người dùng, chẳng hạn như giờ mở cửa, số điện thoại hoặc thậm chí là ảnh. Bạn cũng có thể tạo các điểm đánh dấu tuỳ chỉnh dưới dạng đường quét, vectơ, kéo được và thậm chí là dạng ảnh động.
Sau đây là bản đồ mẫu sử dụng điểm đánh dấu tuỳ chỉnh. (Xem mã nguồn trong chủ đề điểm đánh dấu tuỳ chỉnh của API Maps JavaScript.)
Để biết thông tin chi tiết, hãy xem tài liệu về điểm đánh dấu cho JavaScript (web), Android và iOS.
Tạo kiểu bản đồ
Nền tảng Google Maps cho phép bạn tạo kiểu cho bản đồ của mình theo cách giúp người dùng tìm thấy vị trí gần nhất, đến đó nhanh nhất có thể, đồng thời giúp bạn củng cố thương hiệu của mình. Ví dụ: bạn có thể thay đổi màu bản đồ để phù hợp với thương hiệu và giảm sự phân tâm trên bản đồ bằng cách kiểm soát các địa điểm yêu thích mà người dùng nhìn thấy. Nền tảng Google Maps cũng cung cấp một số mẫu bản đồ dành cho người mới bắt đầu, một số mẫu trong số đó được tối ưu hoá cho các ngành khác nhau, chẳng hạn như du lịch, kho vận, bất động sản và bán lẻ.
Bạn có thể tạo hoặc sửa đổi kiểu bản đồ trên trang Kiểu bản đồ của Google Cloud Console trong dự án của mình.
Mở rộng để xem ảnh động về quá trình tạo và định kiểu bản đồ trong Cloud Console:
Kiểu bản đồ ngành
Ảnh động này cho thấy các kiểu bản đồ được xác định sẵn theo ngành mà bạn có thể sử dụng. Các kiểu này cung cấp điểm bắt đầu tối ưu cho từng loại ngành. Ví dụ: kiểu bản đồ Bán lẻ giảm bớt các địa điểm yêu thích trên bản đồ, cho phép người dùng tập trung vào vị trí của bạn, cũng như các địa danh để giúp họ đến vị trí gần nhất một cách nhanh chóng và tự tin nhất có thể.
Kiểm soát địa điểm yêu thích
Ảnh động này đặt màu đánh dấu cho các địa điểm yêu thích và tăng mật độ POI trên kiểu bản đồ. Mật độ càng cao, càng có nhiều điểm đánh dấu POI xuất hiện trên bản đồ.
Mỗi kiểu bản đồ có mã nhận dạng riêng. Sau khi phát hành một kiểu trong Cloud Console, bạn sẽ tham chiếu đến mã bản đồ đó trong mã của mình. Điều này có nghĩa là bạn có thể cập nhật kiểu bản đồ theo thời gian thực mà không cần tái cấu trúc ứng dụng. Giao diện mới sẽ tự động xuất hiện trong ứng dụng hiện có và được dùng trên nhiều nền tảng. Các ví dụ sau đây minh hoạ cách thêm mã bản đồ vào một trang web bằng API Maps JavaScript.
Bằng cách đưa một hoặc nhiều map_ids vào URL của tập lệnh, API JavaScript của Maps sẽ tự động cung cấp các kiểu đó để kết xuất bản đồ nhanh hơn khi bạn gọi các kiểu đó trong mã của mình.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>
Mã sau đây sẽ hiển thị một bản đồ đã được tạo kiểu trên trang web. (Không hiển thị là phần tử <div id="map"></div> HTML mà bản đồ sẽ xuất hiện trên trang.)
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});
Tìm hiểu thêm về cách kết hợp kiểu bản đồ dựa trên đám mây trong JavaScript (web), Android và iOS.
Kết hợp dữ liệu vị trí tùy chỉnh với Thông tin chi tiết về địa điểm
Trong phần Hiển thị vị trí của bạn trên bản đồ tương tác trước đó, chúng tôi đã đề cập đến việc sử dụng Thông tin chi tiết về địa điểm để cung cấp cho người dùng nhiều thông tin về địa điểm của bạn, chẳng hạn như giờ mở cửa, ảnh và bài đánh giá.
Bạn nên tìm hiểu chi phí của các trường dữ liệu trong Thông tin chi tiết về địa điểm. Các trường này được phân loại là Cơ bản, Dữ liệu liên hệ và Dữ liệu về bầu không khí. Để quản lý chi phí của bạn, một chiến lược là kết hợp thông tin bạn đã có về các vị trí của mình với thông tin mới (thường là Cơ bản và Dữ liệu liên hệ) từ Google Maps, chẳng hạn như đóng cửa tạm thời, giờ hoạt động trong ngày lễ và điểm xếp hạng của người dùng, ảnh và bài đánh giá. Nếu đã có thông tin liên hệ của cửa hàng, bạn sẽ không cần yêu cầu các trường đó qua Thông tin chi tiết về địa điểm và có thể ràng buộc yêu cầu chỉ tìm nạp các trường Dữ liệu cơ bản hoặc Dữ liệu khí quyển, tuỳ thuộc vào nội dung bạn muốn trưng bày.
Bạn có thể có dữ liệu địa điểm của riêng mình để bổ sung hoặc sử dụng thay vì Chi tiết địa điểm. Lớp học lập trình cho trình định vị toàn ngăn xếp cung cấp một ví dụ về cách sử dụng GeoJSON với cơ sở dữ liệu để lưu trữ và truy xuất thông tin vị trí của riêng bạn.