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 dinavigasi antara lokasi awal, atau 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 untuk petunjuk arah mengemudi 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.

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

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

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 gilirannya membantu dengan latensi respons dan menghindari menampilkan informasi yang tidak diperlukan sistem Anda.

Tentukan daftar kolom yang Anda butuhkan 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 setidaknya lokasi asal rute dan tujuan rute, serta mask kolom. Anda juga dapat menentukan titik jalan perantara di sepanjang rute, dan menggunakan titik jalan untuk melakukan hal lain seperti menambahkan perhentian atau titik passthrough di sepanjang rute.

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

• Tempat (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 mencampurnya. 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 secara unik eksplisit dan memberikan manfaat geocoding untuk perutean seperti titik akses dan variabel lalu lintas. ID Tempat membantu menghindari situasi berikut yang dapat terjadi akibat cara lain untuk menentukan lokasi:

• Penggunaan koordinat lintang/bujur dapat menyebabkan lokasi di-snap 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 (pilihan)

Untuk menentukan lokasi menggunakan Place, buat instance Place baru. Cuplikan berikut menunjukkan cara membuat instance Place baru untuk origin dan destination, lalu menggunakannya di 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 baru google.maps.LatLngLiteral, google.maps.LatLngAltitude, atau google.maps.LatLngAltitudeLiteral. Cuplikan berikut menunjukkan cara membuat instance google.maps.LatLngLiteral baru untuk origin dan destination, lalu menggunakannya di 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 konversi 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 Rute melakukan geocoding string secara internal untuk mengonversinya menjadi koordinat lintang dan bujur.

Cuplikan berikut menunjukkan cara membuat 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 wilayah untuk alamat

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

// 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 ccTLD ("domain level teratas") nilai dua karakter. 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 akurat, sehingga mereka kesulitan menerima pengiriman. Atau, orang yang memiliki alamat mungkin lebih suka menerima pengiriman di lokasi yang lebih spesifik, seperti pintu belakang atau dermaga bongkar muat.

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

Google mengembangkan Plus Codes untuk memberikan manfaat alamat kepada semua orang dan segala hal. Plus Codes 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. kode. Misalnya, untuk alamat "1600 Amphitheatre Parkway, Mountain View, CA", kode globalnya adalah "849V" dan kode lokalnya adalah "CWC8+R9". Kemudian, Anda menggunakan seluruh Plus Codes 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 lokal dengan bagian kota, negara bagian, kode pos, dan negara dari alamat dalam bentuk "CRHJ+C3 Stanford, CA 94305, USA".

Cuplikan berikut menunjukkan cara menghitung rute dengan menentukan titik jalan untuk asal rute dan tujuan 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