Exibindo a caixa de 'direções' do Google em um mapa

Question

Estou implementando um mapa do Google em um site.

Um requisito é exibir uma caixa de instruções, que contém os mesmos campos que o que o Google Maps usa e que aparece quando o usuário clica em um botão.

Estou ciente de que a API do Google Maps permite desenhar uma linha entre dois locais diferentes.

É possível exibir a própria caixa de instruções usando a API, em vez de codificar a caixa?

Observe: Estou me referindo ao inicial Formulário de instruções - ou seja, o formulário em que você entra nos destinos 'A' e 'B' e clique em 'Get Direções'.

Answer 1

Sim o DirectionsRenderer pode renderizar a "caixa de direções" automaticamente. Simplesmente crie um <div id="dir_box"> em seu html e depois passa para o seu DirectionsRenderer objeto através do setPanel() método:

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dir_box'));

Verificação de saída este exemplo A partir dos tutoriais da API do Google Maps para um exemplo básico: