Last Mile Fleet Solution is currently available only to select customers. Contact sales to learn more.

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 langsung untuk entity google.maps.Map dan komponen data standar agar terhubung dengan Fleet Engine. Dengan Library JavaScript Shipment Tracking, Anda dapat memberikan pengalaman pelacakan pengiriman animasi yang dapat disesuaikan dari aplikasi web Anda.

Komponen

Library Pelacakan Pengiriman JavaScript menyediakan komponen untuk visualisasi kendaraan dan perhentian, serta feed data mentah untuk PWT pengemudi atau jarak yang tersisa untuk berkendara.

Tampilan peta Pelacakan Pengiriman

Komponen tampilan peta memvisualisasikan lokasi kendaraan dan perhentian. 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 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 perhentian dan kendaraan.

Lokasi asal

Lokasi asal adalah lokasi tempat perjalanan dimulai. Lokasi asal tidak digunakan untuk Solusi Armada Mil Terakhir Google Maps Platform.

Lokasi tujuan

Lokasi tujuan adalah lokasi akhir perjalanan. Untuk pelacakan pengiriman, lokasi ini adalah lokasi pengambilan untuk pelacakan mil pertama dan lokasi pengiriman untuk pelacakan mil terakhir.

Perhentian kendaraan

Perhentian kendaraan adalah lokasi di sepanjang rute perjalanan yang dipantau. Misalnya, lokasi tempat kendaraan berhenti untuk satu atau beberapa tugas pengiriman adalah perhentian kendaraan.

Lokasi kendaraan

Lokasi kendaraan adalah lokasi kendaraan yang dilacak. Secara opsional, informasi 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

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

Mengontrol visibilitas lokasi yang dilacak

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

Kendaraan

Kendaraan terlihat dalam Library Pelacakan Pengiriman saat tugas terkait telah ditetapkan ke kendaraan dan kendaraan berada dalam jarak lima perhentian dari 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 mengisi bahan bakar).

Semua penanda lokasi lainnya

Semua penanda lokasi lainnya untuk tempat asal, tujuan, dan perhentian kendaraan selalu ditampilkan pada peta. Misalnya, lokasi pengiriman selalu ditampilkan di peta, terlepas dari status pengiriman.

Memulai Library Berbagi Perjalanan JavaScript

Sebelum menggunakan Library Berbagi Perjalanan JavaScript, pastikan Anda sudah familier dengan 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 trackingid kunci. Tetapkan nilainya ke ID pelacakan pengiriman.

Contoh berikut menunjukkan cara membuat token untuk melacak 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 menggunakan sertifikat akun layanan untuk project Anda. Penting untuk hanya membuat token di server dan tidak pernah membagikan sertifikat Anda 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
  };
}

TypeType

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 menerapkan 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 berlaku (dalam 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 mengeksekusi fungsi initMap setelah API dimuat. Atribut defer memungkinkan browser terus merender sisa halaman Anda saat API dimuat. Perhatikan bahwa parameter v=beta harus ditetapkan.

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

Setelah 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 sebelumnya penyedia lokasi untuk Fleet Engine Deliveries API. Gunakan project ID Anda dan referensi ke factory token Anda untuk membuat instance.

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',
});

TypeType

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, lakukan 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);

TypeType

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, tugas pengambilan dan 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 hanya ada satu tugas pengambilan terbuka, tugas akan ditampilkan. Error akan terjadi jika ada beberapa tugas pengambilan terbuka.
  2. Jika ada satu tugas pengiriman terbuka, tugas 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 akan ditampilkan.
    • Jika ada beberapa tugas pengiriman tertutup, tugas dengan waktu keluar terbaru akan ditampilkan.
    • Jika ada beberapa tugas pengiriman tertutup, yang tidak ada satu pun yang memiliki waktu hasil, error akan dibuat.
  4. Jika ada tugas pengambilan tertutup:
    • Jika hanya ada satu tugas pengambilan tertutup, tugas akan ditampilkan.
    • Jika ada beberapa tugas pengambilan tertutup, tugas dengan waktu keluar terbaru akan ditampilkan.
    • Jika ada beberapa tugas pengambilan tertutup, tidak ada yang memiliki waktu hasil, error akan dibuat.
  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 penghenti 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);
});

TypeType

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

TypeType

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 serta objek lokasi yang dilacak

Untuk menyesuaikan tampilan dan nuansa komponen peta, gaya peta Anda menggunakan alat berbasis cloud atau deklamasi gaya JSON. Anda juga dapat menyesuaikan tampilan dan nuansa objek lokasi yang dilacak seperti rute, kendaraan, dan perhentian.

Menggunakan penataan gaya peta berbasis cloud

Penataan gaya peta berbasis cloud memungkinkan Anda membuat dan mengedit gaya peta untuk semua aplikasi yang menggunakan Google Maps dari Google Cloud Console, tanpa memerlukan perubahan pada kode Anda. Gaya peta disimpan sebagai ID peta di project Cloud Anda. Untuk menerapkan gaya ke peta Pelacakan Pengiriman JavaScript, tentukan mapId dan mapOptions lainnya saat Anda membuat JourneySharingMapView. Kolom mapId tidak dapat diubah atau ditambahkan setelah instance JourneySharingMapView dibuat. 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.
});

TypeType

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

}

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 visual dan visibilitas rute yang diharapkan. 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,
};

TypeType

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

Mengubah gaya dan ikon penanda kendaraan

Gunakan penyedia gaya kustom untuk mengonfigurasi gaya dan ikon yang digunakan untuk mewakili kendaraan. Contoh berikut menunjukkan cara mengonfigurasi gaya dan ikon penanda kendaraan.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function vehicleMarkerSetup({defaultMarkerOptions}) {
  // If this function is not specified, the 
  // MarkerOptions object contained in 
  // defaultMarkerOptions will be used to render the
  // vehicle marker. Modify this object and pass it
  // back to customize the style of the map.
  defaultMarkerOptions.opacity = 0.5;
  defaultMarkerOptions.icon = MY_ICON;
  return {markerOptions: defaultMarkerOptions};
}

// As an alternative, set a static MarkerOptions to use
// for the vehicle marker:
const vehicleMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

TypeType

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function vehicleMarkerSetup(options: {
  defaultMarkerOptions: google.maps.MarkerOptions,
}): {markerOptions: google.maps.MarkerOptions} {
  // If this function is not specified, the 
  // MarkerOptions object contained in 
  // defaultMarkerOptions will be used to render the
  // vehicle marker. Modify this object and pass it
  // back to customize the style of the map.
  options.defaultMarkerOptions.opacity = 0.5;
  options.defaultMarkerOptions.icon = MY_ICON;
  return {
    markerOptions: options.defaultMarkerOptions,
  };
}

// As an alternative, set a static MarkerOptions to use
// for the vehicle marker:
vehicleMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

Mengubah ikon asal, tujuan, dan perhentian kendaraan

Anda dapat menggunakan opsi gaya kustom untuk mengonfigurasi ikon yang digunakan untuk mewakili tempat asal, perhentian kendaraan, atau lokasi tujuan. Opsi gaya ditentukan dan dilampirkan ke tampilan peta dengan cara yang sama seperti mengubah ikon penanda kendaraan.

Contoh berikut menunjukkan cara mengonfigurasi ikon penanda asal. Untuk mengonfigurasi ikon bagi ikon perhentian tujuan atau kendaraan, gunakan destinationMarkerSetup atau waypointMarkerSetup, bukan originMarkerSetup.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function originMarkerSetup({defaultMarkerOptions}) {
  // If this function is not specified, the 
  // MarkerOptions object contained in
  // defaultMarkerOptions is used to render the
  // origin marker. Modify this object and pass it
  // back to customize the style of the map.
  defaultMarkerOptions.opacity = 0.5;
  defaultMarkerOptions.icon = MY_ICON;
  return {markerOptions: defaultMarkerOptions};
}

// As an alternative, set a static MarkerOptions to use
// for the origin marker:
const originMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

TypeType

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function originMarkerSetup(options: {
  defaultMarkerOptions: google.maps.MarkerOptions,
}): {markerOptions: google.maps.MarkerOptions} {
  // If this function is not specified, the 
  // MarkerOptions object contained in 
  // defaultMarkerOptions is used to render the
  // origin marker. Modify this object and pass it
  // back to customize the style of the map.
  options.defaultMarkerOptions.opacity = 0.5;
  options.defaultMarkerOptions.icon = MY_ICON;
  return {
    markerOptions: options.defaultMarkerOptions,
  };
}

// As an alternative, set a static MarkerOptions to use
// for the origin marker:
originMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

Menampilkan InfoWindow untuk kendaraan atau penanda 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();

Nonaktifkan pemasangan otomatis

Anda dapat menghentikan peta agar tidak secara otomatis menyesuaikan area pandang ke kendaraan dan rute yang diharapkan dengan menonaktifkan pencocokan otomatis. Contoh berikut menunjukkan cara menonaktifkan pemasangan 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,
  ...
});

TypeType

// 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 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, 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. Tambahkan 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, sekarang paket akan dirender pada peta.