Công cụ định vị sản phẩm – hướng dẫn triển khai

Tổng quan

web iOS API

Google Maps Platform có sẵn cho web (JS, TS), Android và iOS, đồng thời cung cấp 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 chúng tôi cung cấp các đường liên kết đến tài liệu để 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 muốn tìm sản phẩm tốt nhất và hữu ích nhất thuận tiện để 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à những gì chúng tôi đề xuất sự kết hợp tối ưu giữa các API của Nền tảng Google Maps để tạo ra sản phẩm tuyệt vời trải nghiệm người dùng của công cụ định vị.

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 họ cần để tìm sản phẩm của bạn và chỉ dẫn họ đế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ộ hay đang đi phương tiện công cộng.

Sơ đồ kiến trúc
Sơ đồ kiến trúc (nhấp để phóng to)

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 Bảng điều khiển Google Cloud. Các siêu liên kết sau đây sẽ chuyển 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 phần Cách thực hiện bắt đầu với 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 để cải thiện 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 khi di chuyển để 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ỉ 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 khoảng cách và thời gian đi lại cho nhiều điểm xuất phát và điểm đến, tuỳ ý chỉ định các hình thức vận tải khác nhau như đi bộ, lái xe, đi phương tiện công cộng hoặc đi xe đạp.
Hiển thị thông tin cửa hàng Đăng thông tin chứa nhiều dữ liệu về cửa hàng của bạn để người dùng có thể tìm đường đến dễ dàng hơn.
Cung cấp thông tin đường đi Xem dữ liệu chỉ đường từ điểm khởi hành đến điểm đến bằng cách sử dụng nhiều dạng 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 chỉ đường trên trang web của mình, bạn cũng có thể gửi đường đi đến điện thoại của người dùng để tìm đường bằ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 vị trí của bạn nổi bật và mang đậm phong cách 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 điểm cụ thể địa điểm yêu thích (POI) trên bản đồ của mình để 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 địa điểm để cung cấp 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: Places API Cũng có: JavaScript

Bạn có thể có một cơ sở dữ liệu về các cửa hàng của mình với thông tin cơ bản như tên về vị trí đó, địa chỉ và số điện thoại của vị trí đó và bạn muốn liên kết với một vị trí trong Nền tảng Google Maps dưới dạng một tập hợp các điểm đến cuối cùng của bạn 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ả thông tin địa lý toạ độ 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ể gọi điện đến Tìm điểm cuối đị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 Google London văn phòng:

    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 dữ liệu còn lại của cửa hàng, đồng thời sử dụng dữ liệu đó 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 Chi tiết đị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ã hoá địa lý Cũng có: 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ý, sử dụng API mã hóa địa lý để lấy vĩ độ và kinh độ của khu vực đó để tính toán xem những cửa hàng nào gần bạn nhất khách hàng. 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 bạn và làm mới ít nhất mỗi 30 ngày một lần.

Dưới đây là ví dụ về việc sử dụng API mã hóa địa lý để có được vĩ độ và kinh độ của mã địa điểm được trả về cho Google London văn phòng:

    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 Maps JavaScript API Cũng có: Android | iOS

Một thành phần chính trong Công cụ định vị sản phẩm là xác định nơi người dùng bắt đầu vị trí. Bạn có thể đưa ra hai lựa chọn để người dùng chỉ định thời điểm bắt đầu vị trí: nhập nguồn gốc tìm kiếm hoặc cấp quyền cho trang web vị trí địa lý của trình duyệt 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 dành cho người dùng thông thường của Google Maps. Bạn có thể tích hợp tính năng này vào bất kỳ 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à 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 vào 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 tính năng tự động hoàn thành của riêng mình bằng cách trực tiếp sử dụng thư viện Địa điểm.

Chức năng tự động hoàn thành địa chỉ
Chức năng tự động hoàn thành địa chỉ (nhấp để phóng to)

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 thông 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, 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 được đặt tên. Giới hạn cụm từ gợi ý tự động hoàn thành về địa điểm thành các loại mã địa lý đị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ã zip để người dùng có thể nhập bất kỳ mức độ cụ thể nào nhằm mô tả máy chủ gốc. Hãy nhớ yêu cầu trường geometry để phản hồi chứa 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 bản đồ này toạ độ để cho biết mối quan hệ của các vị trí của bạn với nguồn 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() bắt đầu. Công 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, rồi tìm kiếm thông tin vị trí gần nhất vị trí dựa trên các toạ độ đó làm điểm gốc, được thảo luận trong Mục Xác định cửa hàng gần nhất.

Đang hiển thị các lựa chọn vị trí
Hiển thị các lựa chọn về vị trí (nhấp để phóng to)

Mở rộng phần này để xem hướng dẫn từng bước bằng video về cách thêm địa điểm Tự động hoàn thành cho ứ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:

Quyền truy cập thông tin vị trí của người dùng trên trình duyệt
Yêu cầu cấp quyền cho trình duyệt web (nhấp để phóng to)

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 bạn vị trí. Thực hiện việc này bằng Dịch vụ ma trận khoảng cách, Maps JavaScript API giúp người dùng của bạn 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 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 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ể ở 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 vị trí có thể thuận tiện hơn. Điều này rất quan trọng khi bạn có nhiều vị trí trong phạm vi cách nhau vài km.

Dịch vụ ma trận khoảng cách, Maps JavaScript API hoạt động bằng cách lấy danh sách điểm đi và điểm đến, cũng như không chỉ trả lại hành trình khoảng cách và thời gian giữa chúng. Trong trường hợp của người dùng, nguồn gốc sẽ là vị trí hiện tại của họ hoặc điểm xuất phát mong muốn của họ và điểm đến là vị trí đó. Có thể chỉ định điểm khởi hành và đích đến là cặp toạ độ hoặc dưới dạng địa chỉ; khi bạn gọi dịch vụ, dịch vụ khớp với địa chỉ. Bạn có thể sử dụng Dịch vụ ma trận khoảng cách, API Maps JavaScript kèm theo thông số để 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 phương thức Dịch vụ ma trận khoảng cách, API Maps JavaScript, chỉ định thông tin điểm khởi hành 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ị 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 của bạn.

Đ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ó: 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ọ muốn hoặc hoàn tất đơn đặt hàng.

Sau khi gọi đến API JavaScript của Maps để nhận Thông tin chi tiết về địa điểm, bạn có thể lọc và hiển thị phản hồi.

Đang hiển thị các lựa chọn về cửa hàng
Hiển thị các lựa chọn về cửa hàng (nhấp để phóng to)

Để 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 trả về địa chỉ, toạ độ, trang web số điện thoại, xếp hạng và giờ cho ID địa điểm ở 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 , bạn có thể nâng cao hơn nữa trải nghiệm người dùng của bạn.

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 có: API 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 thông qua một 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 của bạn không cần phải điều hướng khỏi trang web của bạn và bị sao lãng trang hoặc xem đố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 biết 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 carbon 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à dễ dàng hiển thị chúng trên bản đồ.

Sau đây là ví dụ về cách hiển thị một bảng điều hướng. Thông tin khác trên mẫu, hãy xem 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 đến một vị trí dễ dàng hơn nữa, bạn có thể nhắn tin hoặc gửi email cho họ một đường liên kết chỉ đường. 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 của họ nếu đã được cài đặt, hoặc maps.google.com sẽ tải trong trình duyệt web. Cả hai trải nghiệm này đều cho phép người dùng lựa chọn sử dụng điều hướng từng chặng, bao gồm cả hướng dẫn bằng giọng nói, để đi đến điểm đến.

Sử dụng URL của Maps để soạn URL chỉ đường như sau, với tên địa điểm được mã hoá URL dưới dạng tham số destination và địa điểm Mã nhận dạng cho tham số destination_place_id. Không mất phí có thể soạn hoặc sử dụng URL của Maps, nên bạn không cần thêm khoá API trong 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 một làm đích đến. Nhưng 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 sử dụng ứng dụng Công cụ định vị sản phẩm của bạn. URL của Maps cung cấp các tuỳ chọn tham số truy vấn bổ sung, chẳng hạn như travelmodedir_action=navigate để khởi chạy chỉ đường khi đã bật điều hướng .

Đường liên kết có thể nhấp này, giúp mở rộng URL mẫu ở trên, giúp đặt giá trị origin làm sân bóng đá London và sử dụng travelmode=transit để cung cấp chỉ đường phương tiện công cộng đến đích.

Hiện tại, để gửi tin nhắn hoặc email chứa URL này, bạn nên sử dụng ứng dụng của bên thứ ba như twilio. Nếu bạn đang sử dụng App Engine, bạn có thể sử dụng các công ty bên thứ ba để gửi SMS tin nhắn hoặc email. Để biết thêm thông tin, hãy xem 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 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ể thậm chí không có một bản đồ đơn giản, buộc người dùng phải rời khỏi trang web hoặc ứng dụng để tìm 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 đối với những người dùng phải điều hướng giữa các trang để có được thông tin chúng 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 đồ vào .

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à xem thông tin chi tiết về các vị trí khác nhau địa điểm yêu thích—có thể được thực hiện 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. Hàm này sẽ chạy khi trang sẽ 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 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 đến. Việc thiết lập khu vực cũng đảm bảo rằng hành vi của các ứng dụng được sử dụng bên ngoài Hoa Kỳ có xu hướng thiên về khu vực mà bạn đã đặt. Xem thông tin chi tiết về phạm vi áp dụng của Nền tảng Google Maps để xem 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ề 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. Việc này được thực hiện 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ư trong ví dụ sau, bạn có thể đặt vị trí ban đầu, loại bản đồ và chế độ kiểm soát nào sẽ xuất hiện trên bản đồ cho người dùng của bạn. Lưu ý rằng getElementById() tham chiếu đến "bản đồ" Mã div ở 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 giữa hoặc ranh giới và mức thu phóng (mức phóng to bản đồ vị trí). Hầu hết các thành phần khác, chẳng hạn như cách điều chỉnh các nút điều khiển, đều không bắt buộc nếu 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. Cho ví dụ như 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 (địa điểm, món ăn, chỗ ở, v.v.) và ở mật độ nào, cho phép bạn tập trung sự chú ý của người dùng vào vị trí của bạn trong khi đá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 của mình bằng cách thay đổi màu mặc định (có thể là hiển thị cho dù một vị trí hiện đang mở cửa) hay thay thế điểm đánh dấu bằng một vị trí hình ả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à cả ả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à hoạt ảnh.

Sau đây là bản đồ mẫu sử dụng điểm đánh dấu tuỳ chỉnh. (Xem mã nguồn trong chủ đề về điểm đánh dấu tuỳ chỉnh cho 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), AndroidiOS.

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 dễ dàng tìm thấy địa điểm gần nhất, đến đó nhanh nhất có thể và giúp bạn củng cố thương hiệu của bạn. Ví dụ: bạn có thể thay đổi màu sắc của bản đồ để phù hợp với cách xây dựng thương hiệu và bạn có thể giảm bớt các yếu tố gây sao lãng 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 của các mẫu bản đồ khởi đầu, một số mẫu trong số đó được tối ưu hoá cho các ngành khác nhau, 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 đồ trong Google Cloud Console trang Kiểu bản đồ trong dự án.

Mở rộng để xem các hoạt ảnh về việc tạo kiểu bản đồ và tạo kiểu trong Cloud Console:

Kiểu bản đồ ngành

Ảnh động này thể hiện 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 mỗi loại ngành. Ví dụ: kiểu bản đồ Bán lẻ giảm 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ư địa danh để giúp họ đến vị trí gần nhất một cách nhanh chóng và một cách tự tin nhất có thể.

Trên trang Kiểu bản đồ, nhấp chuột vào Tạo kiểu bản đồ mới. Trên
                Trang Kiểu bản đồ mới, nhấp chuột vào nút chọn bên cạnh mỗi
                các phong cách được tối ưu hoá cho ngành sau: Du lịch, Kho vận, Bất động sản và
                Bán lẻ. Khi mỗi nút được nhấp vào, mô tả kiểu bản đồ và biểu đồ
                bản xem trước các thay đổi.

Kiểm soát địa điểm yêu thích

Hoạt ảnh này đặt màu đánh dấu cho địa điểm ưa thích và làm tăng mật độ POI trên kiểu bản đồ. Mật độ càng cao, nhiều điểm đánh dấu POI khác xuất hiện trên bản đồ.

Trên trang Kiểu bản đồ, nhấp chuột vào Tạo kiểu bản đồ mới. Trên
              Trang Kiểu bản đồ mới, trong phần Tạo kiểu cho riêng bạn, nút chọn của Google Maps
              được chọn. Nhấp chuột vào nút chọn Atlas để thay đổi kiểu Atlas,
              sau đó nhấp vào Mở trong Trình chỉnh sửa kiểu. Trong Trình chỉnh sửa kiểu, thao tác nhấp chuột
              tính năng Địa điểm ưa thích, sau đó nhấp vào phần tử Biểu tượng, đặt
              sang màu đỏ. Sau đó, chuột chọn hộp đánh dấu Mật độ địa điểm yêu thích và trang trình bày
              điều khiển mật độ ở bên phải để có mật độ tối đa. Ngày càng nhiều màu đỏ
              điểm đánh dấu sẽ xuất hiện trên bản xem trước của bản đồ khi mật độ tăng. Sau đó, chuột di chuyển
              vào nút Lưu.

Mỗi kiểu bản đồ có mã nhận dạng riêng. Sau khi bạn xuất bản một kiểu trong Cloud Console, bạn tham chiếu đến ID bản đồ đó trong mã của mình—mà 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 của mình. Chiến lược phát hành đĩa đơn 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 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 thông qua API JavaScript của Maps.

Bằng cách bao gồm một hoặc nhiều map_ids trong URL của tập lệnh, API JavaScript của Maps 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à HTML Phần tử <div id="map"></div> nơi 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 định 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 bằng cách sử dụng Chi tiết địa điểm để cung cấp cho người dùng mức độ phong phú 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á.

Sẽ rất hữu ích nếu bạn hiểu rõ chi phí của các trường dữ liệu khác nhau trong Thông tin chi tiết về địa điểm, được phân loại là Cơ bản, Dữ liệu liên hệ 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à Dữ liệu cơ bản và Dữ liệu liên hệ) từ Google Maps chẳng hạn như trạng thái đóng cửa tạm thời, giờ hoạt động vào ngày lễ, cũng như điểm xếp hạng của người dùng, ảnh và bài đánh giá. Nếu bạn đã 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 đó từ Thông tin chi tiết về địa điểm và có thể ràng buộc yêu cầu của bạn chỉ tìm nạp Cơ bản hoặc Bầu không khí Trường dữ liệu tuỳ 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ì Thông tin chi tiết về địa điểm. Chiến lược phát hành đĩa đơn 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.