Memulai Consumer SDK untuk JavaScript

JavaScript SDK memungkinkan Anda memvisualisasikan lokasi kendaraan dan lokasi minat yang dilacak di Fleet Engine. Perpustakaan berisi komponen peta JavaScript yang merupakan pengganti langsung agar entity google.maps.Map standar dan komponen data dapat terhubung dengan Fleet Engine. Dengan menggunakan JavaScript SDK, Anda dapat memberikan pengalaman perjalanan animasi dan progres pesanan yang dapat disesuaikan dari aplikasi web Anda.

Komponen

JavaScript SDK menyediakan komponen untuk visualisasi kendaraan dan titik jalan, serta feed data mentah untuk PWT pengemudi atau jarak tempuh yang tersisa.

Tampilan peta Progres Perjalanan dan Pesanan

Komponen tampilan peta memvisualisasikan lokasi kendaraan dan titik jalan. Jika rute untuk kendaraan diketahui, komponen tampilan peta akan dianimasikan kendaraan itu saat bergerak di sepanjang jalur yang diprediksi.

Penyedia lokasi perjalanan

JavaScript SDK menyertakan lokasi perjalanan penyedia yang memasukkan informasi lokasi untuk objek yang dilacak ke peta perjalanan dan kemajuan pesanan.

Anda dapat menggunakan penyedia lokasi perjalanan untuk melacak:

• Lokasi penjemputan atau pengantaran perjalanan.
• Lokasi dan rute kendaraan yang ditetapkan untuk perjalanan.

Objek lokasi yang dilacak

Penyedia lokasi melacak lokasi objek seperti titik jalan dan kendaraan.

Lokasi asal

Lokasi asal adalah lokasi awal perjalanan. Menandai lokasi penjemputan.

Lokasi tujuan

Lokasi tujuan adalah lokasi tempat perjalanan berakhir. Penanda menandai lokasi pengantaran.

Lokasi titik jalan

Lokasi titik jalan adalah lokasi di sepanjang rute perjalanan yang dilacak. Misalnya, setiap perhentian pada rute bus adalah lokasi titik jalan.

Lokasi kendaraan

Lokasi kendaraan adalah lokasi kendaraan yang dilacak. Ini dapat digunakan termasuk rute untuk kendaraan.

Pengambil token autentikasi

Untuk mengontrol akses ke data lokasi yang disimpan di Fleet Engine, Anda harus menerapkan layanan pembuatan JSON Web Token (JWT) untuk Fleet Engine di server Anda. Kemudian, terapkan pengambil token autentikasi sebagai bagian. aplikasi web Anda, menggunakan JavaScript SDK untuk mengautentikasi akses ke data lokasi.

Opsi gaya visual

Gaya penanda dan polyline menentukan tampilan dan nuansa objek lokasi terlacak pada peta. Anda dapat menggunakan opsi gaya kustom untuk mengubah gaya default agar cocok dengan gaya aplikasi web Anda.

Mengontrol visibilitas lokasi yang dilacak

Bagian ini menjelaskan aturan visibilitas untuk objek lokasi yang dilacak di peta untuk penyedia lokasi standar Fleet Engine. Kustom atau turunan penyedia lokasi dapat mengubah aturan visibilitas.

Kendaraan

Kendaraan transportasi online dapat dilihat sejak ditetapkan ke perjalanan hingga waktu penurunan. Jika perjalanan dibatalkan, kendaraan akan lebih terlihat.

Semua penanda lokasi lainnya

Semua penanda lokasi lainnya untuk tempat asal, tujuan, dan titik jalan selalu ditampilkan di peta. Misalnya, lokasi pengantaran transportasi online atau lokasi pengiriman selalu ditampilkan di peta, terlepas dari status perjalanan atau pengiriman.

Memulai JavaScript SDK

Sebelum menggunakan JavaScript SDK, pastikan Anda sudah memahami Fleet Engine dan dengan mendapatkan kunci API.

Untuk melacak perjalanan transportasi online, buat klaim ID perjalanan terlebih dahulu.

Membuat klaim ID perjalanan

Untuk melacak perjalanan menggunakan penyedia lokasi perjalanan, membuat JSON Web Token (JWT) dengan klaim ID perjalanan.

Untuk membuat payload JWT, tambahkan klaim tambahan di bagian otorisasi dengan kunci tripid dan tetapkan nilainya ke ID perjalanan.

Contoh berikut menunjukkan cara membuat token untuk pelacakan berdasarkan ID perjalanan:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "tripid": "tid_12345",
   }
}

Membuat pengambil token autentikasi

Anda dapat membuat pengambil token autentikasi untuk mengambil token yang dibuat dengan klaim yang sesuai di server Anda menggunakan layanan sertifikat akun untuk proyek Anda. Sebaiknya hanya buat token dengan di server Anda dan jangan pernah membagikan sertifikat Anda ke klien mana pun. Jika tidak, Anda akan membahayakan keamanan sistem Anda.

Pengambil harus menampilkan struktur data dengan dua kolom, yang digabungkan dalam Promise:

• String token.
• Nomor expiresInSeconds. Masa berlaku token berakhir dalam waktu tersebut setelah pengambilan.

JavaScript Consumer SDK meminta token melalui token autentikasi pengambil jika salah satu kondisi berikut terpenuhi:

• Token tidak memiliki token yang valid, seperti saat belum memanggil pengambil di pemuatan halaman baru, atau saat pengambil belum menampilkan token.
• Masa berlaku token yang diambil sebelumnya telah berakhir.
• Masa berlaku token yang diambil sebelumnya akan berakhir dalam waktu satu menit.

Jika tidak, SDK akan menggunakan token yang diterbitkan sebelumnya, masih valid dan tidak memanggil pengambil.

Contoh berikut menunjukkan cara membuat pengambil token autentikasi:

async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

Saat menerapkan endpoint sisi server untuk pembuatan token, pertahankan berikut ini:

• Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh di atas, ini diberikan sebagai data.ExpiresInSeconds.
• Pengambil token autentikasi harus melewati masa berakhir (dalam detik, dari waktu pengambilan) ke library, seperti yang ditunjukkan dalam contoh.
• SERVER_TOKEN_URL bergantung pada implementasi penyedia Anda, berikut adalah URL untuk penyedia contoh:
  • https://SERVER_URL/token/driver/VEHICLEID
  • https://SERVER_URL/token/consumer/TRIPID

Memuat peta dari HTML

Contoh berikut menunjukkan cara memuat JavaScript SDK dari URL tertentu. Parameter callback menjalankan initMap fungsi tersebut setelah API dimuat. Atribut defer memungkinkan browser terus merender sisa halaman Anda selagi API dimuat.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Mengikuti perjalanan

Bagian ini menunjukkan cara menggunakan JavaScript SDK untuk mengikuti {i>ridesharing<i} atau perjalanan pengiriman. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.

Membuat instance penyedia lokasi perjalanan

JavaScript SDK menentukan penyedia lokasi terlebih dahulu untuk Fleet Engine Ridesharing API. Gunakan project ID dan referensi ke factory token Anda untuk membuat instance-nya.

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

Melakukan inisialisasi tampilan peta

Setelah memuat JavaScript SDK, lakukan inisialisasi tampilan peta dan menambahkannya ke laman HTML. Halaman Anda harus berisi elemen &lt;div&gt; yang menyimpan tampilan peta. Elemen &lt;div&gt; bernama map_canvas dalam contoh di bawah ini.

Untuk menghindari kondisi balapan, tetapkan ID perjalanan untuk penyedia lokasi dalam callback yang dipanggil setelah peta diinisialisasi.

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView 
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Memproses peristiwa perubahan

Anda dapat mengambil informasi meta tentang perjalanan dari objek tugas menggunakan penyedia lokasi. Informasi {i>meta<i} mencakup PWT dan jarak yang tersisa sebelum penjemputan atau pengantaran. Perubahan pada informasi meta memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

locationProvider.addListener('update', e => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

Menangani error

Error yang muncul secara asinkron karena pemicu permintaan informasi perjalanan peristiwa error. Contoh berikut menunjukkan cara memproses peristiwa ini untuk menangani error.

locationProvider.addListener('error', e => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

Catatan: Pastikan untuk menggabungkan panggilan library dalam blok try...catch untuk menangani error tak terduga.

Hentikan pelacakan

Agar penyedia lokasi tidak melacak perjalanan, hapus ID perjalanan dari penyedia lokasi.

locationProvider.tripId = '';

locationProvider.tripId = '';

Menghapus penyedia lokasi dari tampilan peta

Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Menyesuaikan tampilan dan nuansa peta dasar

Untuk menyesuaikan tampilan dan nuansa komponen peta, menata gaya peta Anda menggunakan alat berbasis cloud atau dengan menetapkan opsi langsung dalam kode.

Menggunakan gaya visual peta berbasis cloud

Gaya visual peta berbasis Cloud memungkinkan Anda membuat dan mengedit gaya peta untuk aplikasi apa pun yang menggunakan Google Maps dari Konsol Google Cloud, tanpa memerlukan perubahan pada kode Anda. Gaya peta disimpan sebagai ID peta di project Cloud Anda. Kepada menerapkan gaya pada peta JavaScript SDK, menentukan mapId dan mapOptions lainnya saat Anda membuat JourneySharingMapView. Kolom mapId tidak dapat diubah atau ditambahkan setelah JourneySharingMapView dibuat instance-nya. Hal berikut contoh menunjukkan cara mengaktifkan gaya peta yang dibuat sebelumnya dengan ID peta.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and any other styling options.
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and any other styling options.
});

Menggunakan gaya visual peta berbasis kode

Cara lain untuk menyesuaikan gaya visual peta adalah dengan menetapkan mapOptions saat Anda membuat JourneySharingMapView.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Menggunakan penyesuaian penanda

Dengan JavaScript SDK, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke di peta. Anda melakukannya dengan menetapkan penyesuaian penanda, JavaScript SDK kemudian akan diterapkan sebelum menambahkan penanda ke peta dan setiap pembaruan penanda.

Penyesuaian paling sederhana adalah dengan menentukan MarkerOptions yang akan diterapkan ke semua penanda dari jenis yang sama. Perubahan ditentukan dalam objek diterapkan setelah setiap penanda dibuat, menimpa opsi {i>default<i} apa pun.

Opsi lanjutan lainnya adalah menentukan fungsi penyesuaian. Penyesuaian memungkinkan penataan gaya penanda berdasarkan data, serta menambahkan interaktivitas terhadap penanda, seperti penanganan klik. Khususnya, Perjalanan dan Pesanan Progres meneruskan data ke fungsi penyesuaian tentang jenis objek yang penanda mewakili: kendaraan, asal, titik jalan, atau tujuan. Hal ini kemudian memungkinkan gaya visual penanda untuk berubah berdasarkan status elemen penanda saat ini itu sendiri; misalnya, jumlah titik jalan yang tersisa hingga kendaraan selesai selama perjalanan. Anda bahkan dapat bergabung melawan data dari sumber di luar Fleet Engine dan menata gaya penanda berdasarkan informasi tersebut.

JavaScript SDK menyediakan parameter penyesuaian berikut di FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Ubah gaya visual penanda menggunakan MarkerOptions

Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan dengan objek MarkerOptions. Ikuti pola ini untuk menyesuaikan gaya visual penanda menggunakan salah satu penyesuaian penanda yang tercantum sebelumnya.

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Mengubah gaya visual penanda menggunakan fungsi penyesuaian

Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan. Ikuti pola ini untuk menyesuaikan gaya visual penanda menggunakan penanda parameter penyesuaian yang disebutkan sebelumnya.

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

Menambahkan penanganan klik ke penanda

Contoh berikut menunjukkan cara menambahkan penanganan klik ke penanda kendaraan. Ikuti pola ini untuk menambahkan penanganan klik ke penanda menggunakan penanda mana pun parameter penyesuaian yang disebutkan sebelumnya.

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Menggunakan penyesuaian polyline

Dengan JavaScript SDK, Anda juga dapat menyesuaikan tampilan dan nuansa perjalanan rute pada peta. Perpustakaan membuat google.maps.Polyline untuk setiap pasangan koordinat di kendaraan yang aktif atau tersisa jalur tertentu. Anda dapat menata gaya objek Polyline dengan menentukan penyesuaian polyline. Tujuan Google Cloud library kemudian menerapkan penyesuaian ini dalam dua situasi: sebelum menambahkan ke peta, dan kapan data yang digunakan untuk objek telah berubah.

Mirip dengan penyesuaian penanda, Anda bisa menentukan serangkaian PolylineOptions untuk diterapkan ke semua objek Polyline yang cocok saat objek tersebut dibuat atau diperbarui.

Demikian pula, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya individu objek berdasarkan data yang dikirim oleh Fleet Engine. {i>Function<i} ini bisa mengubah gaya visual setiap objek berdasarkan status saat ini kendaraan; misalnya, mewarnai objek Polyline dengan bayangan yang lebih dalam, atau membuatnya lebih tebal saat kendaraan bergerak lebih lambat. Anda bahkan dapat bergabung dengan dari sumber di luar Fleet Engine dan tentukan gaya objek Polyline berdasarkan hal tersebut tidak akurat atau tidak sesuai.

Anda dapat menentukan penyesuaian menggunakan parameter yang disediakan di FleetEngineTripLocationProviderOptions Anda bisa mengatur penyesuaian untuk berbagai status jalur di perjalanan--sudah pernah bepergian, aktif bepergian, atau belum bepergian. Tujuan parameternya adalah sebagai berikut:

• takenPolylineCustomization, untuk jalur yang sudah ditempuh;
• activePolylineCustomization, untuk jalur yang berjalan aktif;
• remainingPolylineCustomization, untuk jalur yang belum dilalui.

Ubah gaya visual objek Polyline menggunakan PolylineOptions

Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk objek Polyline dengan PolylineOptions. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline apa pun menggunakan dari penyesuaian polyline yang disebutkan sebelumnya.

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Ubah gaya visual objek Polyline menggunakan fungsi penyesuaian

Contoh berikut menunjukkan cara mengonfigurasi objek Polyline yang aktif gaya visual. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline apa pun menggunakan salah satu parameter penyesuaian polyline yang tercantum sebelumnya.

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

Mengontrol visibilitas objek Polyline

Secara default, semua objek Polyline terlihat. Untuk membuat objek Polyline tak terlihat, setel visible properti:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Merender objek Polyline berbasis traffic

Fleet Engine menampilkan data kecepatan lalu lintas untuk jalur aktif dan tersisa untuk kendaraan yang digunakan. Anda dapat menggunakan informasi ini untuk mengatur gaya Polyline sesuai dengan kecepatan lalu lintasnya:

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Menampilkan InfoWindow untuk penanda lokasi atau kendaraan

Anda dapat menggunakan InfoWindow untuk menampilkan informasi tambahan tentang penanda lokasi atau kendaraan.

Contoh berikut menunjukkan cara membuat InfoWindow dan melampirkannya ke penanda kendaraan:

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Nonaktifkan penyesuaian otomatis

Anda dapat menghentikan peta agar tidak secara otomatis menyesuaikan area pandang ke kendaraan dan rute yang diantisipasi dengan menonaktifkan pencocokan otomatis. Contoh berikut menunjukkan cara menonaktifkan pencocokan otomatis saat Anda mengonfigurasi perjalanan dan pesanan tampilan peta progres.

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Anda dapat menggunakan JavaScript SDK untuk mengganti peta yang ada yang menyertakan penanda atau penyesuaian lainnya tanpa kehilangan penyesuaian tersebut.

Misalnya, Anda memiliki halaman web dengan google.maps.Map standar entitas tempat penanda ditampilkan:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Untuk menambahkan JavaScript SDK:

1. Tambahkan kode untuk factory token autentikasi.
2. Lakukan inisialisasi penyedia lokasi dalam fungsi initMap().
3. Lakukan inisialisasi tampilan peta dalam fungsi initMap(). Tampilannya berisi peta.
4. Pindahkan penyesuaian ke dalam fungsi callback untuk inisialisasi tampilan peta.
5. Tambahkan library lokasi ke loader API.

Contoh berikut menunjukkan perubahan yang akan dilakukan:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
    projectId: "YOUR_PROVIDER_ID",
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Jika Anda melakukan perjalanan dengan ID yang ditentukan di dekat Uluru, ID tersebut sekarang akan dirender pada peta.