Mendapatkan rute

Developer Wilayah Ekonomi Eropa (EEA)

Jika alamat penagihan Anda berada di Wilayah Ekonomi Eropa, mulai 8 Juli 2025, Persyaratan Layanan Google Maps Platform EEA akan berlaku untuk penggunaan Layanan oleh Anda. Fungsi bervariasi menurut wilayah. Pelajari lebih lanjut.

Rute adalah jalur yang dapat dilalui antara lokasi awal, atau tempat asal, dan lokasi akhir, atau tujuan. Anda dapat memilih untuk mendapatkan rute untuk berbagai moda transportasi, seperti berjalan kaki, bersepeda, atau berbagai jenis kendaraan. Anda juga dapat meminta detail rute seperti jarak, perkiraan waktu untuk menavigasi rute, perkiraan tarif tol, dan petunjuk langkah demi langkah untuk menavigasi rute.

Lihat contoh kode sumber yang lengkap

Contoh kode berikut menunjukkan cara mendapatkan rute mobil di antara dua lokasi.

TypeScript

// Initialize and add the map.
let map: google.maps.Map;
let mapPolylines: google.maps.Polyline[] = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function init(): Promise<void> {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('routes'),
    ]);

    map = new Map(document.getElementById('map')!, {
        zoom: 12,
        center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };
    console.log({ requestWithAddressStrings });

    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });

    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });

    const requestWithPlaceIds: google.maps.routes.ComputeRoutesRequest = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    console.log({ requestWithPlaceIds });

    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

    // Define a computeRoutes request.
    const requestWithLatLngs: google.maps.routes.ComputeRoutesRequest = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    console.log({ requestWithLatLngs });

    // Use Plus Codes in a directions request.
    const requestWithPlusCodes: google.maps.routes.ComputeRoutesRequest = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };
    console.log({ requestWithPlusCodes });

    // Define a routes request.
    const request: google.maps.routes.ComputeRoutesRequest = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Call computeRoutes to get the directions.
    const { routes } = await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    if (!routes) {
        console.warn('No routes found.');
        return;
    }
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => {
        polyline.setMap(map);
    });

    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => {
        marker.map = map;
    });

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);

    // Fit the map to the path.
    void fitMapToPath(routes[0].path!);
}

// Helper function to fit the map to the path.
async function fitMapToPath(path: google.maps.LatLngLiteral[]) {
    const { LatLngBounds } = await google.maps.importLibrary('core');
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}

void init();
index.ts

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

// Initialize and add the map.
let map;
let mapPolylines = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('routes'),
    ]);

    map = new Map(document.getElementById('map'), {
        zoom: 12,
        center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };
    console.log({ requestWithAddressStrings });

    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });

    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });

    const requestWithPlaceIds = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    console.log({ requestWithPlaceIds });

    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

    // Define a computeRoutes request.
    const requestWithLatLngs = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    console.log({ requestWithLatLngs });

    // Use Plus Codes in a directions request.
    const requestWithPlusCodes = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };
    console.log({ requestWithPlusCodes });

    // Define a routes request.
    const request = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Call computeRoutes to get the directions.
    const { routes } = await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    if (!routes) {
        console.warn('No routes found.');
        return;
    }
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => {
        polyline.setMap(map);
    });

    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => {
        marker.map = map;
    });

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);

    // Fit the map to the path.
    void fitMapToPath(routes[0].path);
}

// Helper function to fit the map to the path.
async function fitMapToPath(path) {
    const { LatLngBounds } = await google.maps.importLibrary('core');
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}

void init();
index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    height: 100%;
}

/*
   * Optional: Makes the sample page fill the window.
   */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Get directions</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>
index.html

Panggil metode computeRoutes() untuk meminta rute antara dua lokasi. Contoh berikut menunjukkan cara menentukan permintaan, lalu memanggil computeRoutes() untuk mendapatkan rute. computeRoutes() adalah metode statis dari class Route, jadi panggil Route.computeRoutes(request) secara langsung. Permintaan juga harus menetapkan properti fields ke mask kolom respons.

  // Import the Routes library.
  const { Route } = await google.maps.importLibrary('routes');

  // Define a computeRoutes request.
  const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    fields: ['path'], // Required: response field mask.
  };

  // Call the computeRoutes() method to get routes.
  const {routes} = await Route.computeRoutes(request);
    

Untuk menggambar rute di peta, panggil createPolylines() pada rute yang Anda minta dengan kolom path. Lihat Menampilkan polyline di peta.

Memilih kolom yang akan ditampilkan

Saat meminta rute, Anda harus menggunakan mask kolom untuk menentukan informasi yang harus ditampilkan dalam respons. Anda dapat menentukan nama properti class rute di mask kolom.

Penggunaan mask kolom juga memastikan Anda tidak meminta data yang tidak diperlukan, yang pada akhirnya membantu latensi respons dan menghindari pengembalian informasi yang tidak diperlukan sistem Anda.

Tentukan daftar kolom yang Anda perlukan dengan menetapkan properti ComputeRoutesRequest.fields, seperti yang ditunjukkan dalam cuplikan berikut:

TypeScript

// Define a routes request.
const request: google.maps.routes.ComputeRoutesRequest = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};
index.ts

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};
index.js

Menentukan lokasi untuk rute

Untuk menghitung rute, Anda harus menentukan minimal lokasi asal rute dan tujuan rute, serta masker kolom. Anda juga dapat menentukan titik jalan perantara di sepanjang rute, dan menggunakan titik jalan untuk melakukan hal lain seperti menambahkan perhentian atau titik lintas di sepanjang rute.

Di ComputeRoutesRequest, Anda dapat menentukan lokasi dengan salah satu cara berikut:

• Place (pilihan)
• Koordinat lintang/bujur
• String alamat ("Chicago, IL" atau "Darwin, NT, Australia")
• Plus Codes

Anda dapat menentukan lokasi untuk semua titik jalan dalam permintaan dengan cara yang sama, atau Anda dapat menggabungkannya. Misalnya, Anda dapat menggunakan koordinat lintang/bujur untuk titik jalan asal dan menggunakan objek Place untuk titik jalan tujuan.

Untuk efisiensi dan akurasi, gunakan objek Place, bukan koordinat lintang/bujur atau string alamat. ID Tempat bersifat unik dan eksplisit serta memberikan manfaat geocoding untuk pemilihan rute, seperti titik akses dan variabel lalu lintas. Praktik terbaik ini membantu menghindari situasi berikut yang dapat terjadi akibat cara lain dalam menentukan lokasi:

• Menggunakan koordinat lintang/bujur dapat menyebabkan lokasi diposisikan ke jalan terdekat dengan koordinat tersebut - yang mungkin bukan titik akses ke properti, atau bahkan jalan yang mengarah ke tujuan dengan cepat atau aman.
• String alamat harus di-geocoding terlebih dahulu oleh Routes API untuk mengonversinya menjadi koordinat lintang/bujur sebelum dapat menghitung rute. Konversi ini dapat memengaruhi performa.

Menentukan lokasi sebagai objek Place (lebih disarankan)

Untuk menentukan lokasi menggunakan Tempat, buat instance Place baru. Cuplikan berikut menunjukkan pembuatan instance Place baru untuk origin dan destination, lalu menggunakannya dalam ComputeRoutesRequest:

TypeScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});

const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});

const requestWithPlaceIds: google.maps.routes.ComputeRoutesRequest = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};
index.ts

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});

const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});

const requestWithPlaceIds = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};
index.js

Koordinat lintang/bujur

Untuk menentukan lokasi sebagai koordinat lintang/bujur, buat instance google.maps.LatLngLiteral, google.maps.LatLngAltitude, atau google.maps.LatLngAltitudeLiteral baru. Cuplikan berikut menunjukkan pembuatan instance google.maps.LatLngLiteral baru untuk origin dan destination, lalu menggunakannya dalam computeRoutesRequest:

TypeScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

// Define a computeRoutes request.
const requestWithLatLngs: google.maps.routes.ComputeRoutesRequest = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};
index.ts

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

// Define a computeRoutes request.
const requestWithLatLngs = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};
index.js

String alamat

String alamat adalah alamat literal yang diwakili oleh string (seperti "1600 Amphitheatre Parkway, Mountain View, CA"). Geocoding adalah proses mengonversi string alamat menjadi koordinat lintang dan bujur (seperti lintang 37.423021 dan bujur -122.083739).

Saat Anda meneruskan string alamat sebagai lokasi titik jalan, library Routes akan melakukan geocoding pada string tersebut secara internal untuk mengonversinya menjadi koordinat lintang dan bujur.

Cuplikan berikut menunjukkan pembuatan ComputeRoutesRequest dengan string alamat untuk origin dan destination:

TypeScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};
index.ts

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};
index.js

Menetapkan region untuk alamat

Jika Anda meneruskan string alamat yang tidak lengkap sebagai lokasi titik jalan, API mungkin menggunakan koordinat lintang/bujur yang salah yang di-geocoding. Misalnya, Anda membuat permintaan yang menentukan "Toledo" sebagai tempat asal dan "Madrid" sebagai tujuan untuk rute mobil:

// Define a request with an incomplete address string.
const request = {
  origin: 'Toledo',
  destination: 'Madrid',
};
    

Dalam contoh ini, "Toledo" ditafsirkan sebagai kota di negara bagian Ohio di Amerika Serikat, bukan di Spanyol. Oleh karena itu, permintaan akan menampilkan array kosong, yang berarti tidak ada rute.

Anda dapat mengonfigurasi API untuk menampilkan hasil yang dibiaskan ke wilayah tertentu dengan menyertakan parameter regionCode. Parameter ini menentukan kode wilayah sebagai nilai dua karakter ccTLD ("domain level teratas"). Sebagian besar kode ccTLD identik dengan kode ISO 3166-1, dengan beberapa pengecualian. Misalnya, ccTLD Inggris Raya adalah "uk" (.co.uk) sedangkan kode ISO 3166-1-nya adalah "gb" (secara teknis untuk entitas "The United Kingdom of Great Britain and Northern Ireland").

Permintaan rute untuk "Toledo" ke "Madrid" yang menyertakan parameter regionCode akan menampilkan hasil yang sesuai karena "Toledo" ditafsirkan sebagai kota di Spanyol:

const request = {
  origin: 'Toledo',
  destination: 'Madrid',
  region: 'es', // Specify the region code for Spain.
};
    

Plus Codes

Banyak orang tidak memiliki alamat yang tepat, sehingga mereka mungkin kesulitan menerima pengiriman. Atau, orang yang memiliki alamat mungkin lebih suka menerima pengiriman di lokasi yang lebih spesifik, seperti pintu masuk belakang atau dok pemuatan.

Plus Codes seperti alamat jalan untuk orang atau tempat yang tidak memiliki alamat sebenarnya. Alih-alih alamat dengan nama dan nomor jalan, Plus Codes didasarkan pada koordinat lintang/bujur, dan ditampilkan sebagai angka dan huruf.

Google mengembangkan Plus Codes untuk memberikan manfaat alamat kepada semua orang dan segala hal. Plus Code adalah referensi lokasi yang dienkode, yang berasal dari koordinat lintang/bujur, yang mewakili area: 1/8000 derajat x 1/8000 derajat (sekitar 14 m x 14 m di khatulistiwa) atau lebih kecil. Anda dapat menggunakan Plus Codes sebagai pengganti alamat di tempat tanpa alamat jelas atau jika bangunan tidak diberi nomor atau jalan tidak diberi nama.

Plus Codes harus diformat sebagai kode global atau kode gabungan:

• kode global terdiri dari kode area berisi 4 karakter dan kode lokal berisi 6 karakter atau lebih. Misalnya, untuk alamat "1600 Amphitheatre Parkway, Mountain View, CA", kode globalnya adalah "849V" dan kode lokalnya adalah "CWC8+R9". Kemudian, Anda menggunakan seluruh Plus Code 10 karakter untuk menentukan nilai lokasi sebagai "849VCWC8+R9".
• kode gabungan terdiri dari kode lokal berisi 6 karakter atau lebih yang digabungkan dengan lokasi yang eksplisit. Misalnya, alamat "450 Serra Mall, Stanford, CA 94305, USA" memiliki kode lokal "CRHJ+C3". Untuk alamat gabungan, gabungkan kode plus dengan bagian kota, negara bagian, kode pos, dan negara dari alamat dalam bentuk "CRHJ+C3 Stanford, CA 94305, USA".

Cuplikan berikut menunjukkan penghitungan rute dengan menentukan titik jalan untuk tempat asal dan tujuan rute menggunakan Plus Codes:

TypeScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes: google.maps.routes.ComputeRoutesRequest = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};
index.ts

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};
index.js