Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mapa de como chegar, dois pontos fixos google maps

24-03-2015 22:49

O google maps permite ter um mapa de direção onde o usuário pode ver qual o caminho deve seguir baseado em dois pontos fixos.

Veja o exemplo abaixo

<!DOCTYPE html> <html>   <head>     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">     <meta charset="utf-8">     <title>Directions service (complex)</title>     <style>       html, body, #map-canvas {         height: 100%;         margin: 0px;         padding: 0px       }       #panel {         position: absolute;         top: 5px;         left: 50%;         margin-left: -180px;         z-index: 5;         background-color: #fff;         padding: 5px;         border: 1px solid #999;       }     </style>     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>     <script> var map; var directionsDisplay; var directionsService; var stepDisplay; var markerArray = [];   function initialize() {   // Instantiate a directions service.   directionsService = new google.maps.DirectionsService();     // Create a map and center it on Manhattan.   var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);   var mapOptions = {     zoom: 13,     center: manhattan   }   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);     // Create a renderer for directions and bind it to the map.   var rendererOptions = {     map: map   }   directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)     // Instantiate an info window to hold step text.   stepDisplay = new google.maps.InfoWindow(); }   function calcRoute() {     // First, remove any existing markers from the map.   for (var i = 0; i < markerArray.length; i++) {    markerArray[i].setMap(null);  }    // Now, clear the array itself.  markerArray = [];    // Retrieve the start and end locations and create  // a DirectionsRequest using WALKING directions.  var start = document.getElementById('start').value;  var end = document.getElementById('end').value;  var request = {      origin: start,      destination: end,      travelMode: google.maps.TravelMode.WALKING  };    // Route the directions and pass the response to a  // function to create markers for each step.  directionsService.route(request, function(response, status) {    if (status == google.maps.DirectionsStatus.OK) {      var warnings = document.getElementById('warnings_panel');      warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';       directionsDisplay.setDirections(response);       showSteps(response);     }   }); }   function showSteps(directionResult) {   // For each step, place a marker, and add the text to the marker's   // info window. Also attach the marker to an array so we   // can keep track of it and remove it when calculating new   // routes.   var myRoute = directionResult.routes[0].legs[0];     for (var i = 0; i < myRoute.steps.length; i++) {    var marker = new google.maps.Marker({      position: myRoute.steps[i].start_location,      map: map    });    attachInstructionText(marker, myRoute.steps[i].instructions);    markerArray[i] = marker;  } }   function attachInstructionText(marker, text) {  google.maps.event.addListener(marker, 'click', function() {    // Open an info window when the marker is clicked on,    // containing the text of the step.    stepDisplay.setContent(text);    stepDisplay.open(map, marker);  }); }   google.maps.event.addDomListener(window, 'load', initialize);      </script>   </head>   <body>     <div id="panel">     <b>Start: </b>     <select id="start">     <option></option>       <option value="Avenida Rio Rranco, RJ">Av. Rio Branco</option>     </select>     <b>End: </b>     <select id="end" onchange="calcRoute();">     <option></option>       <option value="Avenida Presidente Vargas, RJ">Av. Presidente Vargas</option>     </select>     </div>     <div id="map-canvas"></div>     &nbsp;     <div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>   </body> </html>

Fonte https://developers.google.com/maps/docu ... ns-complex
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado