Tổng quan
Google Maps Platform có sẵn cho web (JS, TS), Android và iOS, đồng thời cũng cung cấp API dịch vụ web để lấy 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 chúng tôi cũng cung cấp đường liên kết đến tài liệu để triển khai trên các nền tảng khác.
Khi người dùng nhìn thấy các sản phẩm của bạn trên mạng, họ muốn tìm cách tốt nhất và thuận tiện nhất để đặt hàng. Hướng dẫn triển khai Trình định vị sản phẩm và mẹo tùy chỉnh mà chúng tôi cung cấp trong chủ đề này là những gì chúng tôi khuyên bạn nên làm khi kết hợp các API Nền tảng Google Maps tối ưu để tạo ra trải nghiệm người dùng công cụ định vị sản phẩm tuyệt vời.
Thực hiện 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 mà họ cần để tìm sản phẩm và cung cấp cho họ thông tin chỉ đường đến cửa hàng có mặt hàng của họ, cho dù họ đang lái xe, đi xe đạp, đi bộ hoặc sử dụng phương tiện công cộng.
Bật API
Để triển khai Trình đị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 đây sẽ gửi bạn đến Google Cloud Console để bật từng API cho dự án đã chọn của bạn:
Để biết thêm thông tin về cách thiết lập, hãy xem phần Bắt đầu với Google Maps Platform.
Các phần 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 ngôi sao là phần tuỳ chỉnh nhưng không bắt buộc để nâng cao giải pháp.
| Kết hợp vị trí cửa hàng với các địa điểm trên Google Maps Platform | Khớp một 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 khi bạn di chuyển để cải thiện trải nghiệm người dùng trên tất cả các nền tảng và cải thiện độ chính xác của địa chỉ bằng 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 di chuyển và thời gian đi lại cho nhiều điểm xuất phát và điểm đến, đồng thời tuỳ ý chỉ định nhiều hình thức vận chuyển, chẳng hạn như đi bộ, lái xe, dùng phương tiện công cộng hoặc đạp xe. | |
| Hiển thị thông tin cửa hàng | Hiển thị thông tin nhiều dữ liệu về các cửa hàng của bạn để người dùng có thể dễ dàng đi đến cửa hàng. | |
| Chỉ đường đi theo chỉ dẫn | Nhận dữ liệu chỉ đường từ điểm khởi hành đến điểm đến bằng các hình thức vận tải khác nhau 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ị chỉ đường trên trang web của bạn, bạn cũng có thể gửi chỉ đường đến điện thoại của người dùng để điều hướng bằng cách sử dụng Google Maps khi đang 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 các 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ự xác định hướng tốt hơn và kiểm soát mật độ địa điểm yêu thích để tránh tình trạng lộn xộn trên bản đồ. | |
| 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 | Kết hợp chi tiết vị trí tùy chỉnh của bạn với Chi tiết địa điểm để cung cấp cho người dùng bộ dữ liệu phong phú nhằm đưa ra quyết định. |
Liên kết vị trí cửa hàng với các địa điểm trên Google Maps Platform
Đang tải ID địa điểm
| Ví dụ này sử dụng: API Địa điểm | Có thêm: JavaScript |
Bạn có thể có một cơ sở dữ liệu về các cửa hàng với thông tin cơ bản như tên địa điểm, địa chỉ và số điện thoại. Bạn muốn liên kết cơ sở dữ liệu đó với một địa điểm trong Google Maps Platform dưới dạng một tập hợp điểm đến cuối cùng mà người dùng có thể lấy sản phẩm. Để tìm nạp thông tin mà Google Maps Platform có về địa điểm đó, bao gồm cả tọa độ đị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 mỗi 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ính năng 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 với phần còn lại của dữ liệu cửa hàng và 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ã hóa đị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ã hóa địa lý cho vị trí của bạn
| Ví dụ này sử dụng: API mã hóa địa lý | Có thêm: JavaScript |
Nếu cơ sở dữ liệu cửa hàng của bạn có địa chỉ đường phố nhưng không có tọa độ địa lý, hãy sử dụng API mã hoá địa lý để lấy vĩ độ và kinh độ của địa chỉ đó nhằm mục đích tính cửa hàng nào gần khách hàng 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 của mình 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ã hóa địa lý để lấy vĩ độ và kinh độ của ID địa điểm đã được trả lại cho văn phòng Google London:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
Xác định vị trí của người dùng
| Ví dụ này sử dụng: Thư viện địa điểm tự động hoàn thành trong API JavaScript của Maps | Cũng có: Android | iOS |
Một thành phần chính trong Công cụ định vị sản phẩm là việc xác định vị trí bắt đầu của người dùng. Bạn có thể cung cấp hai tuỳ chọn để người dùng chỉ định vị trí bắt đầu của họ: nhập mã nguồn của tìm kiếm của họ hoặc cấp quyền truy cập vị trí trên 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 loại bỏ cụm từ tự động hoàn thành trên phiên bản Google Maps dành cho người tiêu dùng. Chức năng này có thể được tích hợp vào bất kỳ ứng dụng nào sử dụng thư viện Địa điểm của Nền tảng Google Maps trên thiết bị di động và 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 phần còn lại thông qua việc sử dụng các 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 tập lệnh API JavaScript 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, thêm hộp văn bản vào trang của bạn để người dùng nhập:
<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. Giới hạn Dự đoán của tính năng Tự động hoàn thành địa điểm cho các loại mã địa lý sẽ định cấu hình trường nhập dữ liệu của bạn để chấp nhận địa chỉ đường phố, vùng lân cận, thành phố và mã bưu chính. Nhờ đó, người dùng có thể nhập bất kỳ mức độ cụ thể nào để mô tả nguồn gốc của chúng. Hãy nhớ yêu cầu trường geometry để phản hồi chứa vĩ độ và kinh độ gốc của người dùng. Bạn sẽ sử dụng các toạ độ bản đồ này để cho biết mối quan hệ giữa các vị trí với điểm gốc.
// 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 dạng của kết quả phù hợp là vị trí 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 gố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 video hướng dẫn cách thêm tính năng Tự động hoàn thành địa điểm vào ứng dụng của bạn:
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 có 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 bạn. Thực hiện điều này với Dịch vụ ma trận khoảng cách, API JavaScript của Maps giúp người dùng của bạn chọn vị trí thuận tiện nhất cho họ bằng cách lái xe hoặc chạy quãng đường.
Cách chuẩn để sắp xếp danh sách vị trí là sắp xếp 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 trên một con sông không thể đi qua hoặc qua những con đường đông đúc vào thời điểm 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 các bạn có nhiều vị trí cách nhau vài kilômét.
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 không chỉ cung cấp khoảng cách di chuyển mà còn trả về khoảng thời gian giữa chúng. Trong trường hợp của người dùng, điểm khởi hành sẽ là nơi họ đang ở hoặc điểm xuất phát mong muốn và điểm đến sẽ là vị trí. Điểm xuất phát và điểm đến có thể được chỉ định là các cặp tọa độ 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 JavaScript của Maps 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 gọi Dịch vụ ma trận khoảng cách, API JavaScript của Maps, chỉ định nguồn gốc 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 vị trí lân cận, bạn có thể hiển thị trạng thái còn hàng của sản phẩm dựa trên cơ sở dữ liệu kho hàng của mình.
Đang hiển thị 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ẻ nhiều thông tin chi tiết 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í ưa thích hoặc hoàn tất đơn đặt hàng.
Sau khi thực hiện lệnh gọi đến API JavaScript của Maps để lấy Thông tin chi tiết về địa điểm, bạn có thể lọc và kết xuất phản hồi.
Để yêu cầu Chi tiết địa điểm, bạn cần có ID địa điểm của từng vị trí của mình. Xem bài viết 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 trả lại địa chỉ, tọa độ, trang web, số điện thoại, xếp hạng và giờ cho ID đị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ải tiến bộ định vị sản phẩm
Tùy 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 hơn nữa trải nghiệm của người dùng.
Cung cấp chỉ đường điều hướng
| Ví dụ này sử dụng: Dịch vụ chỉ đường API JavaScript cho Maps | Cũng có: Dịch vụ chỉ đường dịch vụ web để sử dụng trên Android và iOS, trực tiếp từ ứng dụng hoặc từ xa qua proxy máy chủ |
Khi bạn hiển thị cho người dùng thông tin chỉ đường từ trong trang web hoặc ứng dụng của mình, người dùng sẽ không cần phải rời khỏi trang web 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 đồ. Bạn thậm chí có thể hiển thị 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 các-bon mà bạn có thể sở hữu.
Dịch vụ chỉ đường cũng có các chức năng cho phép bạn xử lý kết quả và hiển thị chúng dễ dàng trên bản đồ.
Sau đây là ví dụ về cách hiển thị bảng điều khiển chỉ đường. Để biết thêm thông tin về mẫu, hãy xem phần Hiện hướng dẫn văn bản.
Gửi chỉ đường đến thiết bị di động
Để giúp người dùng dễ dàng hơn nữa khi đến một địa điểm, bạn có thể nhắn tin hoặc gửi email cho họ đường liên kết chỉ đường. Khi họ nhấp vào ứng dụng, Google Maps sẽ khởi chạy trên điện thoại của họ nếu ứng dụng đã đượ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 tuỳ chọn sử dụng chức năng điều hướng từng chặng, bao gồm cả hướng dẫn bằng giọng nói, để đến đích.
Sử dụng
URL Maps để soạn một URL chỉ đường như sau, với tên địa điểm được mã hoá URL là tham số destination và ID địa điểm dưới dạng tham số destination_place_id. Bạn không mất phí để soạn hoặc sử dụng URL Maps, vì vậy, bạn không cần đưa 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 một tham số truy vấn origin bằng cách sử dụng cùng định dạng địa chỉ với đích đến. Nhưng nếu bạn bỏ qua việc này, thông tin đường đi sẽ bắt đầu từ vị trí hiện tại của người dùng. Vị trí này có thể khác với vị trí họ đang dùng ứng dụng Định vị sản phẩm. URL Maps cung cấp các tuỳ chọn tham số truy vấn bổ sung, chẳng hạn như travelmode và dir_action=navigate để khởi chạy thông tin đường đi khi đã bật tính năng chỉ đường.
Đường liên kết có thể nhấp này (mở rộng URL ví dụ ở trên) sẽ đặ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 đến điểm đến.
Để gửi tin nhắn hoặc email có 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ể sử 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 thông báo 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 Maps JavaScript | Cũng có: 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 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. Điều này có nghĩa là trải nghiệm dưới mức tối ưu cho những người dùng phải di chuyển giữa các trang để có được thông tin mà họ yêu cầ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 đồ trong các ứng dụng.
Thêm bản đồ động vào trang của bạn—tức là bản đồ mà người dùng có thể di chuyển xung quanh, phóng to thu nhỏ và nhận thông tin chi tiết về các vị trí và điểm yêu thích khác nhau—có thể được thực hiện với một vài dòng mã.
Trước tiên, bạn cần đưa API JavaScript của Maps vào trang. Việc này được thực hiện thông qua liên kết tập lệnh sau trong trang HTML của bạn.
<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 tham chiếu đến hàm initMap JavaScript 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 của bản đồ để đảm bảo rằng 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 đặt một khu vực cũng đảm bảo rằng hành vi của các ứng dụng dùng bên ngoài Hoa Kỳ có xu hướng là 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 thông số
region.
Tiếp theo, bạn cần một HTML div để đặt bản đồ của bạn 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 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 tập lệnh. Trong tập lệnh này,
như trong ví dụ sau, bạn có thể đặt vị trí ban đầu,
loại bản đồ và
các tùy chọn kiểm soát nào sẽ có sẵn trên bản đồ cho người dùng. Xin lưu ý rằng
getElementById() tham chiếu đến mã nhận dạng div "bản đồ" ở 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 công cụ định vị, bạn thường quan tâm đến việc đặt vị trí ban đầu, điểm hoặc ranh giới trung tâm và mức thu phóng (mức độ thu phóng của bản đồ vào vị trí đó). Hầu hết các thành phần khác, chẳng hạn như tinh chỉnh các thành phần điều khiển, đều là không bắt buộc khi bạn xác định mức độ tương tác với bản đồ.
Tùy chỉnh bản đồ của bạn
Bạn có thể thay đổi giao diện và chi tiết của bản đồ bằng nhiều 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ế ghim bản đồ mặc định.
- Thay đổi màu sắc của các đối tượng địa lý trên bản đồ để phản ánh thương hiệu của bạn.
- Kiểm soát các địa điểm yêu thích mà bạn hiển thị (điểm du lịch, ẩm thực, nhà nghỉ, v.v.) và mật độ mật độ 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 làm nổi bật các địa danh giúp người dùng đến được vị trí gần nhất.
Tạo điểm đánh dấu bản đồ tùy chỉnh
Bạn có thể tùy chỉnh điểm đánh dấu bằng cách thay đổi màu mặc định (có thể là vị trí hiện đang mở cửa) hoặc thay thế điểm đánh dấu bằng một hình ảnh tùy 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 là đường quét, vectơ, có thể kéo và thậm chí là ảnh động.
Sau đây là bản đồ mẫu sử dụng điểm đánh dấu tùy chỉnh. (Xem mã nguồn trong chủ đề điểm đánh dấu tùy chỉnh cho API JavaScript của Maps.)
Để 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 cho bản đồ của bạn
Google Maps Platform cho phép bạn tạo kiểu cho bản đồ 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ể và 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à bạn có thể giảm thiểu sự phân tâm trên bản đồ bằng cách kiểm soát các địa điểm ưa thích hiển thị cho người dùng. Google Maps Platform cũng cung cấp một số mẫu bản đồ cho người mới bắt đầu, một số mẫu được tối ưu hóa cho các ngành khác nhau, chẳng hạn như du lịch, hậu cầ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ề việc tạo kiểu và tạo 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 đồ dành riêng cho từng ngành mà bạn có thể sử dụng. Các kiểu này cung cấp một điểm khởi đầu tối ưu cho từng loại ngành. Ví dụ: kiểu bản đồ Bán lẻ giảm các địa điểm ưa thích trên bản đồ, cho phép người dùng tập trung vào các vị trí của bạn, cũng như các mốc để giúp họ đến vị trí gần nhất một cách nhanh chóng và chắc chắn nhất có thể.
Kiểm soát địa điểm ưa thích
Ảnh động này đặt màu cho điểm đánh dấu địa điểm yêu thích và tăng mật độ địa điểm ưa thích trên kiểu bản đồ. Mật độ càng cao thì 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ột ID riêng. Sau khi phát hành một kiểu trong Cloud Console, bạn tham chiếu mã bản đồ đó trong mã của mình – tức 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 tại và được sử dụng trên các nền tảng. Các ví dụ sau đây cho thấy cách thêm mã bản đồ vào một trang web bằng API JavaScript của Maps.
Bằng cách bao gồm một hoặc nhiều map_ids trong URL tập lệnh, API JavaScript của Maps sẽ tự động làm cho các kiểu đó có sẵn để kết xuất bản đồ nhanh hơn khi bạn gọi các kiểu đó trong mã.
<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 hiển thị một bản đồ đã được tạo kiểu trên trang web. (Không được hiển thị là phần tử HTML <div id="map"></div> 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 Chi tiết đị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 Chi tiết địa điểm để cung cấp cho người dùng nhiều thông tin về vị trí của bạn, chẳng hạn như giờ mở cửa, ảnh và bài đánh giá.
Bạn nên nắm được chi phí của nhiều trường dữ liệu trong Thông tin chi tiết về địa điểm. Những trường này được phân loại là Dữ liệu cơ bản, Thông tin liên hệ và Khí quyển. Để 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ề vị trí của mình với thông tin mới (thường là Dữ liệu cơ bản và liên hệ) từ Google Maps, chẳng hạn như đóng cửa tạm thời, giờ nghỉ lễ và 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ệ cho cửa hàng của mình, bạn sẽ không cần yêu cầu các trường đó từ Thông tin chi tiết về địa điểm và có thể giới hạn yêu cầu chỉ tìm nạp các trường Dữ liệu cơ bản hoặc Khí quyển tùy thuộc vào nội dung bạn muốn hiển thị.
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 về công cụ định vị ngăn xếp đầy đủ cung cấp 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.