Solusi Armada Terakhir saat ini hanya tersedia untuk pelanggan tertentu. Hubungi bagian penjualan untuk mempelajari lebih lanjut.

Melacak pengiriman dengan Library Pelacakan Pengiriman JavaScript

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Library Pelacakan Pengiriman JavaScript memungkinkan Anda memvisualisasikan lokasi kendaraan dan lokasi minat yang dilacak di Fleet Engine. Library ini berisi komponen peta JavaScript yang merupakan pengganti drop-in untuk entity google.maps.Map standar dan komponen data untuk terhubung dengan Fleet Engine. Dengan Library Pelacakan Pengiriman JavaScript, Anda dapat memberikan pengalaman pelacakan pengiriman animasi yang dapat disesuaikan dari aplikasi web.

Komponen

Library Pelacakan Pengiriman JavaScript menyediakan komponen untuk visualisasi kendaraan dan rute saat sedang berjalan di tujuan, serta feed data mentah untuk PWT pengemudi atau jarak yang tersisa untuk berkendara.

Tampilan peta Pelacakan Pengiriman

Komponen tampilan peta memvisualisasikan lokasi kendaraan dan tujuan. Jika rute untuk kendaraan diketahui, komponen tampilan peta akan menganimasikan kendaraan tersebut saat bergerak di sepanjang jalur yang diprediksi.

Penyedia lokasi pengiriman

Penyedia lokasi pengiriman memberikan informasi lokasi untuk objek yang dilacak ke dalam peta pelacakan pengiriman untuk pelacakan pengiriman mil pertama dan terakhir.

Anda dapat menggunakan penyedia lokasi pengiriman untuk melacak:

  • Lokasi pengambilan atau pengiriman.
  • Lokasi dan rute kendaraan pengiriman.

Objek lokasi yang dilacak

Penyedia lokasi melacak lokasi objek seperti kendaraan dan tujuan.

Lokasi tujuan

Lokasi tujuan adalah lokasi akhir perjalanan. Untuk pelacakan pengiriman, parameter ini adalah lokasi tugas yang direncanakan.

Lokasi kendaraan

Lokasi kendaraan adalah lokasi yang dilacak dari kendaraan. Secara opsional, jalur ini dapat menyertakan rute untuk kendaraan.

Pengambil token autentikasi

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

Opsi gaya visual

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

Mengontrol visibilitas lokasi yang dilacak

Bagian ini menjelaskan aturan visibilitas untuk objek lokasi yang dilacak pada peta untuk penyedia lokasi yang telah ditentukan Fleet Engine. Penyedia lokasi kustom atau turunan dapat mengubah aturan visibilitas.

Kendaraan

Kendaraan terlihat dalam Library Pelacakan Pengiriman saat tugas terkait telah diberikan ke kendaraan dan kendaraan berada dalam jarak lima tugas. Visibilitas kendaraan berakhir saat tugas selesai atau dibatalkan.

Kendaraan tidak terlihat selama tugas yang tidak tersedia (misalnya, jika pengemudi sedang istirahat atau kendaraan sedang diisi bahan bakar).

Semua penanda lokasi lainnya

Semua penanda lokasi lainnya untuk asal, tujuan, dan perhentian kendaraan selalu ditampilkan di peta. Misalnya, lokasi pengiriman akan selalu ditampilkan di peta, apa pun status pengirimannya.

Memulai Library Berbagi Perjalanan JavaScript

Sebelum menggunakan JavaScript Journey Sharing Library, pastikan Anda sudah memahami Fleet Engine dan mendapatkan kunci API.

Untuk melacak pengiriman, pertama-tama buat klaim ID pelacakan.

Membuat klaim ID pelacakan

Untuk melacak pengiriman menggunakan penyedia lokasi pengiriman, buat Token Web JSON (JWT) dengan klaim ID pelacakan.

Untuk membuat payload JWT, tambahkan klaim tambahan di bagian otorisasi dengan kunci trackingid. Tetapkan nilainya ke ID pelacakan pengiriman.

Contoh berikut menunjukkan cara membuat token untuk pelacakan dengan ID pelacakan:

{
  "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": {
     "trackingid": "tid_54321",
   }
}

Membuat pengambilan token autentikasi

Anda dapat membuat pengambilan token autentikasi untuk mengambil token yang dibuat dengan klaim yang sesuai di server Anda menggunakan sertifikat akun layanan untuk project Anda. Penting untuk hanya membuat token di server dan tidak pernah membagikan sertifikat pada klien mana pun. Jika tidak, Anda akan membahayakan keamanan sistem.

Contoh berikut menunjukkan cara membuat pengambilan token autentikasi:

JavaScript

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
  };
}

TypeScript

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.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

Saat mengimplementasikan endpoint sisi server untuk membuat token, perhatikan hal-hal berikut:

  • Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh di atas, endpoint diberikan sebagai data.ExpiresInSeconds.
  • Pengambil token autentikasi harus meneruskan waktu habis masa berlakunya (dalam hitungan detik, dari waktu penerbitan) ke library, seperti yang ditunjukkan dalam contoh.

Memuat peta dari HTML

Contoh berikut menunjukkan cara memuat Library Pelacakan Pengiriman JavaScript dari URL yang ditentukan. Parameter callback menjalankan fungsi initMap setelah API dimuat. Atribut defer memungkinkan browser melanjutkan rendering halaman Anda lainnya saat API dimuat. Perhatikan bahwa parameter v=beta harus ditentukan.

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

Ikuti pengiriman

Bagian ini menunjukkan cara menggunakan Library Pelacakan Pengiriman JavaScript untuk mengikuti pengambilan atau pengiriman pengiriman. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode.

Membuat instance penyedia lokasi pengiriman

Library Pelacakan Pengiriman JavaScript menentukan penyedia lokasi untuk Fleet Engine Deliveries API. Gunakan project ID Anda dan referensi ke factory token untuk membuat instance-nya.

JavaScript

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

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

TypeScript

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

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

Melakukan inisialisasi tampilan peta

Setelah memuat library JavaScript Journey Sharing, inisialisasi tampilan peta dan tambahkan ke halaman HTML. Halaman Anda harus berisi elemen <div> yang menyimpan tampilan peta. Pada contoh berikut, elemen <div> diberi nama map_canvas.

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

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProvider: locationProvider,
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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);

TypeScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProvider: locationProvider,
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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);

ID Pelacakan

ID pelacakan yang diberikan ke penyedia lokasi dapat sesuai dengan beberapa tugas; misalnya, pengambilan dan tugas pengiriman untuk paket yang sama, atau beberapa upaya pengiriman yang gagal. Satu tugas dipilih untuk ditampilkan di peta pelacakan pengiriman. Tugas yang akan ditampilkan ditentukan sebagai berikut:

  1. Jika ada tepat satu tugas pengambilan yang terbuka, tugas akan ditampilkan. Error akan muncul jika ada beberapa tugas pengambilan terbuka.
  2. Jika ada tepat satu tugas pengiriman terbuka, tugas tersebut akan ditampilkan. Error akan muncul jika ada beberapa tugas pengiriman terbuka.
  3. Jika ada tugas pengiriman yang ditutup:
    • Jika ada tepat satu tugas pengiriman tertutup, tugas tersebut akan ditampilkan.
    • Jika ada beberapa tugas pengiriman tertutup, tugas dengan waktu hasil terbaru akan ditampilkan.
    • Jika ada beberapa tugas pengiriman tertutup, yang tidak ada yang memiliki waktu hasil, error akan muncul.
  4. Jika ada tugas pengambilan yang ditutup:
    • Jika ada tepat satu tugas pengambilan yang tertutup, tugas tersebut akan ditampilkan.
    • Jika ada beberapa tugas pengambilan tertutup, tugas dengan waktu keluar terbaru akan ditampilkan.
    • Jika ada beberapa tugas pengambilan tertutup, yang tidak ada yang memiliki waktu hasil, error akan muncul.
  5. Jika tidak, tidak ada tugas yang akan ditampilkan.

Memproses peristiwa perubahan

Anda dapat mengambil informasi meta tentang tugas dari objek tugas menggunakan penyedia lokasi. Informasi meta meliputi PWT, jumlah perhentian yang tersisa, dan jarak yang tersisa sebelum pengambilan atau pengantaran. Perubahan pada informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

JavaScript

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

TypeScript

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

Menangani error

Error yang muncul secara asinkron dari permintaan informasi pengiriman akan memicu peristiwa error. Contoh berikut menunjukkan cara memproses peristiwa ini untuk menangani error.

JavaScript

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

TypeScript

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

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

Menyesuaikan tampilan dan nuansa peta dasar

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

Menggunakan penataan gaya peta berbasis cloud

Penataan gaya peta berbasis cloud memungkinkan Anda membuat dan mengedit gaya peta untuk aplikasi apa pun yang menggunakan Google Maps dari Google Cloud Console, tanpa memerlukan perubahan pada kode. Gaya peta disimpan sebagai ID peta di project Cloud Anda. Untuk menerapkan gaya pada peta Pelacakan Pengiriman JavaScript, tentukan mapId saat Anda membuat JourneySharingMapView. Kolom mapId tidak dapat diubah atau ditambahkan setelah JourneySharingMapView dibuat instance-nya. Contoh berikut menunjukkan cara mengaktifkan gaya peta yang dibuat sebelumnya dengan ID peta.

JavaScript

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

TypeScript

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

Menggunakan penataan gaya peta berbasis kode

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

JavaScript

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

TypeScript

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

Mengubah gaya visual dan visibilitas rute

Untuk mengonfigurasi gaya dan visibilitas rute yang diambil dan diantisipasi, gunakan opsi gaya kustom. Untuk informasi selengkapnya, lihat antarmuka PolylineOptions.

Contoh berikut menunjukkan cara mengonfigurasi gaya dan visibilitas rute yang diantisipasi. Untuk mengonfigurasi gaya dan visibilitas rute yang diambil, gunakan takenRoutePolylineSetup, bukan anticipatedRoutePolylineSetup.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup({
    defaultPolylineOptions, defaultVisible}) {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  defaultPolylineOptions.strokeOpacity = 0.5;
  defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set a static PolylineOptions to 
// use for the anticipated route:
const anticipatedRoutePolylineOptionsSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

TypeScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup(options: {
  defaultPolylineOptions: google.maps.PolylineOptions,
  visible: boolean,
}): {
  polylineOptions: google.maps.PolylineOptions,
  visible: boolean,
} {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  options.defaultPolylineOptions.strokeOpacity = 0.5;
  options.defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: options.defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set a static PolylineOptions to 
// use for the anticipated route:
const anticipatedRoutePolylineSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

Menggunakan penyesuaian penanda

Dengan Library Pelacakan Pengiriman JavaScript, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Lakukan hal ini dengan menentukan penyesuaian penanda, yang kemudian diterapkan oleh Library Pelacakan Pengiriman sebelum menambahkan penanda ke peta dan setiap pembaruan penanda.

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

Opsi lanjutannya adalah menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan Anda menata gaya penanda berdasarkan data, serta menambahkan interaktivitas ke penanda, seperti menangani klik. Secara khusus, Pelacakan Pengiriman meneruskan data ke fungsi penyesuaian tentang jenis objek yang diwakili penanda: kendaraan atau tujuan. Ini kemudian memungkinkan gaya visual penanda berubah berdasarkan status elemen penanda saat ini itu sendiri; misalnya, jumlah perhentian yang direncanakan akan tersisa hingga tujuan. Anda bahkan dapat menggabungkan data dari sumber di luar Fleet Engine dan menata gaya penanda berdasarkan informasi tersebut.

Library Pelacakan Pengiriman menyediakan parameter penyesuaian berikut di FleetEngineShipmentLocationProviderOptions:

Ubah gaya penanda menggunakan MarkerOptions

Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan dengan objek MarkerOptions. Ikuti pola ini untuk menyesuaikan gaya penanda apa pun menggunakan penyesuaian penanda apa pun yang tercantum di atas.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Mengubah gaya penanda menggunakan fungsi penyesuaian

Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan. Ikuti pola ini untuk menyesuaikan gaya penanda apa pun menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.

JavaScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.task.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.task.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Menambahkan penanganan klik ke penanda

Contoh berikut menunjukkan cara menambahkan penanganan klik ke penanda kendaraan. Ikuti pola ini untuk menambahkan penanganan klik ke penanda apa pun menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.

JavaScript

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

TypeScript

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

Menampilkan InfoWindow untuk penanda kendaraan atau lokasi

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

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

JavaScript

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

locationProvider.addListener('update', e => {
  const stopsCount =
      e.task.remainingVehicleJourneySegments.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();

Menonaktifkan pas otomatis

Anda dapat menghentikan peta menyesuaikan area pandang secara otomatis ke kendaraan dan rute yang diharapkan dengan menonaktifkan pencocokan otomatis. Contoh berikut menunjukkan cara menonaktifkan pencocokan otomatis saat Anda mengonfigurasi tampilan peta berbagi perjalanan.

JavaScript

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

TypeScript

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.task.remainingVehicleJourneySegments.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();

Mengganti peta yang ada

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

Misalnya, Anda memiliki halaman web dengan entitas google.maps.Map standar yang penandanya 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, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now 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 library JavaScript Journey Sharing:

  1. Menambahkan kode untuk factory token autentikasi.
  2. Lakukan inisialisasi penyedia lokasi dalam fungsi initMap().
  3. Lakukan inisialisasi tampilan peta dalam fungsi initMap(). Tampilan berisi peta.
  4. Pindahkan penyesuaian Anda 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
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.FleetEngineShipmentLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

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

  locationProvider.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now 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 journey sharing library to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=beta&libraries=journeySharing">
    </script>
  </body>
</html>

Jika Anda memiliki paket yang dilacak dengan ID yang ditentukan di dekat Uluru, paket tersebut sekarang akan dirender di peta.