O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Ver trajeto

Desenvolvedores do Espaço Econômico Europeu (EEE)

Um trajeto é um caminho navegável entre um local de partida (origem) e um local de chegada (destino). Você pode receber um trajeto para diferentes meios de transporte, como caminhada, bicicleta ou diferentes tipos de veículos. Também é possível solicitar detalhes do trajeto, como distância, tempo estimado para navegar pelo trajeto, pedágios esperados e instruções detalhadas para navegar pelo trajeto.

Confira o código-fonte de exemplo completo

O exemplo de código a seguir mostra como receber um trajeto para rotas de carro entre dois locais.

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

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

Chame o computeRoutes() método para solicitar um trajeto entre dois locais. O exemplo a seguir mostra como definir uma solicitação e chamar computeRoutes() para receber um trajeto.

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

Escolher campos a serem retornados

Ao solicitar um trajeto, você precisa usar uma máscara de campo para especificar quais informações a resposta deve retornar. É possível especificar os nomes das propriedades da classe Route na máscara de campo.

O uso de uma máscara de campo também garante que você não solicite dados desnecessários, o que ajuda na latência da resposta e evita o retorno de informações que seu sistema não precisa.

Especifique a lista de campos necessários definindo a ComputeRoutesRequest.fields propriedade, conforme mostrado no snippet a seguir:

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

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

Especificar locais para um trajeto

Para calcular um trajeto, é necessário especificar pelo menos os locais de origem e destino do trajeto e uma máscara de campo. Também é possível especificar waypoints intermediários ao longo de um trajeto e usar waypoints para fazer outras coisas, como adicionar paradas ou pontos de passagem ao longo de um trajeto.

No ComputeRoutesRequest, é possível especificar um local de qualquer uma das seguintes maneiras:

Lugar (recomendável)
Coordenadas de latitude/longitude
String de endereço ("Chicago, IL" ou "Darwin, NT, Austrália")
Plus Code

É possível especificar locais para todos os waypoints em uma solicitação da mesma maneira ou misturá-los. Por exemplo, você pode usar coordenadas de latitude/longitude para o waypoint de origem e um objeto Place para o waypoint de destino.

Para eficiência e precisão, use objetos Place em vez de coordenadas de latitude/longitude ou strings de endereço. Os IDs de lugar são exclusivamente explícitos e oferecem benefícios de geocodificação para rotas como pontos de acesso e variáveis de trânsito. Eles ajudam a evitar as seguintes situações que podem resultar de outras maneiras de especificar um local:

O uso de coordenadas de latitude/longitude pode resultar no local sendo ajustado à estrada mais próxima dessas coordenadas, que pode não ser um ponto de acesso à propriedade ou até mesmo uma estrada que leve ao destino de forma rápida ou segura.
As strings de endereço precisam ser geocodificadas pela API Routes para serem convertidas em coordenadas de latitude/longitude antes que um trajeto possa ser calculado. Essa conversão pode afetar performance.

Especificar um local como um objeto Place (recomendável)

Para especificar um local usando um lugar, crie uma nova instância Place. O snippet a seguir mostra a criação de novas instâncias Place para origin e destination e, em seguida, o uso delas em um 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

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

Coordenadas de latitude/longitude

Para especificar um local como coordenadas de latitude/longitude, crie uma nova instância google.maps.LatLngLiteral, google.maps.LatLngAltitude, ou google.maps.LatLngAltitudeLiteral. O snippet a seguir mostra a criação de novas google.maps.LatLngLiteral instâncias para origin e destination, e, em seguida, o uso delas em um 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

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 de endereço

As strings de endereço são endereços literais representados por uma string (como "1600 Amphitheatre Parkway, Mountain View, CA"). A geocodificação é o processo de conversão de uma string de endereço em coordenadas de latitude e longitude (como latitude 37.423021 e longitude -122.083739).

Quando você transmite uma string de endereço como o local de um waypoint, a biblioteca Routes geocodifica internamente a string para convertê-la em coordenadas de latitude e longitude.

O snippet a seguir mostra a criação de um ComputeRoutesRequest com uma string de endereço para origin e 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

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

Definir a região do endereço

Se você transmitir uma string de endereço incompleta como o local de um waypoint, a API poderá usar as coordenadas de latitude/longitude geocodificadas erradas. Por exemplo, você faz uma solicitação especificando "Toledo" como origem e "Madrid" como destino para um trajeto de carro:

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

Neste exemplo, "Toledo" é interpretado como uma cidade no estado de Ohio, nos Estados Unidos, e não na Espanha. Portanto, a solicitação retorna uma matriz vazia, o que significa que não há trajetos.

É possível configurar a API para retornar resultados direcionados a uma região específica incluindo o parâmetro regionCode. Esse parâmetro especifica o código regional como um ccTLD ("domínio de nível superior") valor de dois caracteres. A maioria dos códigos ccTLD é idêntica aos códigos ISO 3166-1, com algumas exceções notáveis exceções notáveis. Por exemplo, o ccTLD do Reino Unido é "uk" (.co.uk), enquanto o código ISO 3166-1 é "gb" (tecnicamente para a entidade do "Reino Unido da Grã-Bretanha e Irlanda do Norte").

Uma solicitação de rotas de "Toledo" para "Madrid" que inclui o parâmetro regionCode retorna resultados adequados porque "Toledo" é interpretado como uma cidade na Espanha:

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

Plus Code

Muitas pessoas não têm um endereço preciso, o que pode dificultar o recebimento de entregas. Ou, pessoas com um endereço podem preferir aceitar entregas em locais mais específicos locations, such as a back entrance or a loading dock.

O Plus Code é como endereço para pessoas ou lugares que não têm um endereço real. Em vez de endereços com nomes de rua e números, os Plus Codes têm como base as coordenadas de latitude/longitude e são exibidos como números e letras.

O Google desenvolveu os Plus Codes para oferecer o benefício dos endereços a todos e tudo. Um Plus Code é uma referência de local codificada derivada de coordenadas de latitude/longitude, que representa uma área: 1/8000 de um grau por 1/8000 de um grau (aproximadamente 14m x 14m na Linha do Equador) ou menor. Os Plus Codes podem ser usados em vez de endereços nos lugares em que não existem, ou seja, quando os imóveis não estão numerados ou as ruas não têm nome.

Os Plus Codes precisam ser formatados como um código global ou um código composto:

O código global é composto por um código de área de quatro caracteres e um código local de seis caracteres ou mais código. Por exemplo, para o endereço "1600 Amphitheatre Parkway, Mountain View, CA", o código global é "849V" e o código local é "CWC8+R9". Em seguida, use o Plus Code de 10 caracteres para especificar o valor do local como "849VCWC8+R9".
O código composto é composto por um código local de seis caracteres ou mais combinado com um local explícito. Por exemplo, o endereço "450 Serra Mall, Stanford, CA 94305, EUA" tem um código local de "CRHJ+C3". Para um endereço composto, combine o código local com a cidade, estado, o CEP e a parte do país do endereço no formato "CRHJ+C3 Stanford, CA 94305, EUA".

O snippet a seguir mostra o cálculo de um trajeto especificando um waypoint para a origem e o destino do trajeto usando 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

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

Ver trajeto Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Confira o código-fonte de exemplo completo

TypeScript

JavaScript

CSS

HTML

Escolher campos a serem retornados

TypeScript

JavaScript

Especificar locais para um trajeto

Especificar um local como um objeto Place (recomendável)

TypeScript

JavaScript

Coordenadas de latitude/longitude

TypeScript

JavaScript

String de endereço

TypeScript

JavaScript

Definir a região do endereço

Plus Code

TypeScript

JavaScript

Ver trajeto