Jump to content

houseofzuera

Members
  • Content count

    1
  • Joined

  • Last visited

Community Reputation

0 Comum

About houseofzuera

  1. houseofzuera

    Rotas Google Maps

    Bom dia a todos. Eu preciso gerar uma rota pela Google Maps. Eu peguei o exemplo do Google Developer e entendi bem o mecanismo, porém preciso fazer algumas alterações; 1 - Preciso fazer com que o "gatilho", da geração da rota seja gerado imediatamente quando o html é aberto na tela. Então eu preciso configurar isso em um evento "onShow" ou em algum equivalente, mas não sei como fazer em Javascript. 2 - Eu vou integrar com o Delphi, então as variáveis virão de lá. Mas pra efeito de testes, eu vou passar umas constantes mesmo. Então, evidentemente não terá o select e o "document.getElementById", terá que funcionar de uma forma fixa. Como fazer isso? Abaixo estou postado o fonte do Google Developer. Alguém pode me dar sugestões de como adaptá-lo para a minha necessidade? <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Directions service</title> <style> /* 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; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } </style> </head> <body> <div id="floating-panel"> <b>Start: </b> <select id="start"> <option value="sorocaba, sp">Sorocaba</option> <option value="itu, sp">Itu</option> <option value="barueri, sp">Barueri</option> <option value="são paulo, sp">São Paulo</option> </select> <b>End: </b> <select id="end"> <option value="sorocaba, sp">Sorocaba</option> <option value="itu, sp">Itu</option> <option value="barueri, sp">Barueri</option> <option value="são paulo, sp">São Paulo</option> </select> </div> <div id="map"></div> <script> function initMap() { var directionsService = new google.maps.DirectionsService; var directionsDisplay = new google.maps.DirectionsRenderer; var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: {lat: 41.85, lng: -87.65} }); directionsDisplay.setMap(map); var onChangeHandler = function() { calculateAndDisplayRoute(directionsService, directionsDisplay); }; document.getElementById('start').addEventListener('change', onChangeHandler); document.getElementById('end').addEventListener('change', onChangeHandler); } function calculateAndDisplayRoute(directionsService, directionsDisplay) { directionsService.route({ origin: document.getElementById('start').value, waypoints: [{location: 'Rodoviária, Campinas'}, {location: 'Moisés Lucarelli, Campinas'}], destination: document.getElementById('end').value, travelMode: 'DRIVING' }, function(response, status) { if (status === 'OK') { directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&callback=initMap"> </script> </body> </html>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.