Migrar para os novos métodos de renderização

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

Este guia mostra como migrar para os novos métodos de renderização da classe Route. No serviço Directions (legado), os métodos de renderização faziam parte da classe DirectionsRenderer. A classe Route (Beta) oferece dois novos métodos de renderização: createPolylines e createWaypointAdvancedMarkers.

Legado DirectionsRenderer

No serviço Directions (legado), os métodos de renderização faziam parte da classe DirectionsRenderer. A classe DirectionsRenderer processa a exibição da polilinha, dos marcadores associados e da exibição textual das etapas. Ela tem os seguintes métodos:

  • setDirections(): renderiza a resposta de rotas fornecida.
  • setMap(): define o mapa em que a resposta de rotas será renderizada.
  • setPanel(): mostra as rotas como uma série de etapas textuais em um painel.

O exemplo a seguir mostra como usar a classe DirectionsRenderer para renderizar rotas em um mapa. 

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  // Set the map on the directions renderer.
  directionsRenderer.setMap(map);
  // Set the panel to display the directions as a series of textual steps.
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  // Call the directions service to get the directions.
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      // Render the polyline and markers on the map.
      directionsRenderer.setDirections(response);
    }
  });
}

Classe Route (Beta)

A classe Route (Beta) oferece os seguintes novos métodos de renderização, que substituem os métodos da classe DirectionsRenderer legada:

  • createPolylines
  • createWaypointAdvancedMarkers

A classe Route não tem um equivalente ao método setPanel() na classe DirectionsRenderer legada. Para mostrar as etapas textuais, é necessário criar manualmente os elementos HTML e inseri-los no DOM. O exemplo a seguir mostra como renderizar rotas em um mapa usando a classe Route e criar manualmente os elementos HTML para mostrar as etapas textuais. 

let map;
let mapPolylines = [];
let markers = [];
let center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function initMap() {
  // Request the needed libraries.
  const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
  const { Route } = await google.maps.importLibrary('routes') as google.maps.Routes;

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

  // Define a simple directions request.
  const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['legs'],
  };

  // Call computeRoutes to get the directions.
  const { routes } = await Route.computeRoutes(request);
  
  // Use createPolylines to create polylines for the route.
  mapPolylines = routes[0].createPolylines();
  // Add polylines to the map.
  mapPolylines.forEach((polyline) => polyline.setMap(map));
  
  fitMapToPath(routes[0].path);

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

  // Render navigation instructions.
  const directionsPanel = document.getElementById("directions-panel");

  if (!routes || routes.length === 0) {
    if (directionsPanel) {
      directionsPanel.textContent = "No routes available.";
    }
  }

  const route = routes[0];
  if (!route.legs || route.legs.length === 0) {
    if (directionsPanel) {
      directionsPanel.textContent = "The route has no legs.";
    }
    return;
  }

  const fragment = document.createDocumentFragment();

  route.legs.forEach((leg, index) => {
    const legContainer = document.createElement("div");
    legContainer.className = "directions-leg";
    legContainer.setAttribute("aria-label", `Leg ${index + 1}`);

    // Leg Title
    const legTitleElement = document.createElement("h3");
    legTitleElement.textContent = `Leg ${index + 1} of ${route.legs.length}`;
    legContainer.appendChild(legTitleElement);

    if (leg.steps && leg.steps.length > 0) {
      // Add steps to an ordered list
      const stepsList = document.createElement("ol");
      stepsList.className = "directions-steps";

      leg.steps.forEach((step, stepIndex) => {
        const stepItem = document.createElement("li");
        stepItem.className = "direction-step";
        stepItem.setAttribute("aria-label", `Step ${stepIndex + 1}`);

        // Maneuver
        if (step.maneuver) {
          const maneuverNode = document.createElement("p");
          maneuverNode.textContent = step.maneuver;
          maneuverNode.className = "maneuver";
          stepItem.appendChild(maneuverNode);
        }

        // Distance and Duration
        if (step.localizedValues) {
          const distanceNode = document.createElement("p");
          distanceNode.textContent = `${step.localizedValues.distance} (${step.localizedValues.staticDuration})`;
          distanceNode.className = "distance";
          stepItem.appendChild(distanceNode);
        }

        // Instructions
        if (step.instructions) {
          const instructionsNode = document.createElement("p");
          instructionsNode.textContent = step.instructions;
          instructionsNode.className = "instruction";
          stepItem.appendChild(instructionsNode);
        }

        stepsList.appendChild(stepItem);
      });
      legContainer.appendChild(stepsList);
    }

    fragment.appendChild(legContainer);
    directionsPanel?.appendChild(fragment);
  });
  
}

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

initMap();