Como mostrar a rota no google maps?

Ariston Santos · November 22, 2014

Olá.

Pretendo criar uma função na qual eu passe um array com vários endereços e seja aberta uma página do google maps indicando a rota e um pontinho em cada endereço.

Já tenho uma que mostra a rota para dois endereços (origem e destino) mas não serve para vários endereços.

Alguém já fez algo parecido que possa compartilhar aqui?

Desde já, agradeço.

Jmsilva · November 23, 2014

Dê uma olhada no link, não testei...mas parece que resolve, o segredo está no vetor criado em javascript que usa o parâmetro waypoints:

http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html

Jmsilva · November 24, 2014

var directionsService, directionsRenderer;
var enderDe, enderAte;

directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);

/* Endereço de origem e o de destino. */
enderDe = 'ALAMEDA SANTOS, 1000, SÃO PAULO - SP, 01418-9028';
enderAte =
'AVENIDA NAÇÕES UNIDAS, 17-17, BAURU - SP, 17013-035';

/* Locais intermediários por onde a rota deve passar. */
var local1, local, local3;
local1 = {location:'AV. 11 DE JUNHO, 52, SÃO PAULO - SP'};
local2 = {location:'RUA CEL. MURSA, 10, SÃO PAULO - SP'};
local3 = {location:'RUA CAMPOS SALLES, 214, BOTUCATU - SP'};

var request = {
origin:endDe,
destination:endPara,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
waypoints: new Array (local1, local2, local3)
};

Jmsilva · November 24, 2014

api completa:

<!DOCTYPE html>

<html>

<head>

<title>Rota com multiplos pontos</title>

<style>

html, body, #map-canvas {

height: 100%;

margin: 0px;

padding: 0px

}

#panel {

position: absolute;

top: 5px;

left: 50%;

;

z-index: 5;

background-color: #fff;

padding: 5px;

border: 1px solid #999;

}

</style>

var directionsDisplay;

var directionsService = new google.maps.DirectionsService();

var map;

function load() {

directionsDisplay = new google.maps.DirectionsRenderer();

var caragua = new google.maps.LatLng(-23.257209,-45.946624);

var mapOptions = {

zoom: 10,

center: caragua

}

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

directionsDisplay.setMap(map);

}

function calcRoute() {

var start = document.getElementById('start').value;

var end = document.getElementById('end').value;

var waypts = [];

var checkboxArray = document.getElementById('waypoints');

for (var i = 0; i < checkboxArray.length; i++) {

if (checkboxArray.options.selected == true) {

waypts.push({

location:checkboxArray.value,

stopover:true});

}

var request = {

origin: start,

destination: end,

waypoints: waypts,

optimizeWaypoints: true,

travelMode: google.maps.TravelMode.DRIVING

};

directionsService.route(request, function(response, status) {

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response);

var route = response.routes[0];

var summaryPanel = document.getElementById('directions_panel');

summaryPanel.innerHTML = '';

for (var i = 0; i < route.legs.length; i++) {

var routeSegment = i + 1;

summaryPanel.innerHTML += '<b>Rota - Trecho: ' + routeSegment + '</b><br> de: ';

summaryPanel.innerHTML += route.legs.start_address + ' ate ';

summaryPanel.innerHTML += route.legs.end_address + '<br>';

summaryPanel.innerHTML += route.legs.distance.text + '<br><br>';

}

});

}

google.maps.event.addDomListener(window, 'load', load);

</script>

</head>

<body>

<div id="map-canvas" style="float:left;width:70%;height:100%;"></div>

<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">

<div style="margin:20px;border-width:2px;">

<b>Inicio:</b>

<select id="start">

<option value="caraguatatuba, sp">Caragua</option>

</select>

<br>

<b>demais pontos - Waypoints:</b> <br>

<i>(Ctrl-Click para multiplas selecao)</i> <br>

<select multiple id="waypoints">

<option value="ubatuba, sp">Ubatuba, sp</option>

<option value="taubate, sp">Taubate</option>

<option value="santos, sp">Santos</option>

<option value="sao sebastiao, sp">Sseb</option>

</select>

<br>

<b>Fim:</b>

<select id="end">

<option value="sao paulo, sp">SP</option>

</select>

<br>

<input type="submit" onclick="calcRoute();">

</div>

<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>

</div>

</body>

</html>

kapiaba · November 24, 2014

Veja se ajuda:

http://forums.fivetechsupport.com/viewtopic.php?f=6&t=9565&p=45986&hilit=new+google.maps.Map#p45986

http://forums.fivetechsupport.com/viewtopic.php?f=3&t=9183&p=156413&hilit=maps.DirectionsService#p156413

http://www.xharbour.com/xhc/index.asp?page=xhc_download_detail.asp&type=dl&id=146&action=download&show_i=7&show_sub=1

http://forums.fivetechsupport.com/viewtopic.php?f=3&t=9183&hilit=maps+directionsservice&start=75

abs.

Ariston Santos · November 26, 2014

Resolveu. Muito obrigado.

marcioe · November 26, 2014

posta pra galera como voce fez

Ariston Santos · November 30, 2014

Desculpem pela demora na resposta.

Usei o exemplo postado acima pelo

Jmsilva

Apenas substitui os endereços pelos que preciso e acrescentei mais.

kapiaba · December 1, 2014

Desculpem pela demora na resposta.

Usei o exemplo postado acima pelo
Jmsilva
Apenas substitui os endereços pelos que preciso e acrescentei mais.

Ariston, agora quem não ententeu fui eu, como ficaria isso em fivewin? Pode mostrar via código? Obg. abs.

Theotokos · March 25, 2017

Meu caro @Ariston Santos vc pode compartilhar conosco a rotina em FiveWin? o @wanderso está precisando tmb... Vlw Muito Obgdão!!! Fkem com Deus...

Ariston Santos · March 25, 2017

* Atualmente está assim a minha função para mostrar a rota entre dois endereços.

STATIC FUNCTION Show_Way(End_Clie, Nmr_Clie, Cid_Clie, Est_Clie)
   If !IsInternet()
      Msgalert("não conectado a internet.", "Aviso!") ; Return nil
   Endif
   cOrigem := Alltrim(mEnd)+", "+Alltrim(mNmr)+", "+Alltrim(c_Emun)+", "+Alltrim(c_EUF)
   cDestino := Alltrim(End_Clie)+", "+Alltrim(Nmr_Clie)+", "+Alltrim(Cid_Clie)+", "+ALLTRIM(Est_Clie)
   Ferase(CurDrive()+":\"+CurDir()+"\tempgmapdist.html") // uRegPath:= "c:\test"
   cHtml := MemoRead(CurDrive()+":\"+CurDir()+"\modelos\rotanet.html")
   cHtml := StrTran( cHtml, "<<ORIGEM>>", cOrigem)
   cHtml := StrTran( cHtml, "<<DESTINO>>", cDestino)
   IF FileWrite(CurDrive()+":\"+CurDir()+"\tempgmapdist.html", cHtml )
      WAITRUN( GetEnv( "ComSpec" )+" /C START "+CurDrive()+":\"+CurDir()+"\tempgmapdist.html", 0 )
   ENDIF
RETURN NIL

Conteúdo do HTML

<html><head><title>Mapa com rota</title>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=pt-BR'></script>

<script type='text/javascript'>
var map, geocoder;
var mapDisplay, directionsService;
function initialize() {
   var myOptions = {zoom: 15,mapTypeId: google.maps.MapTypeId.ROADMAP};
   map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
   geocoder = new google.maps.Geocoder();
   var enderDe = "ORIGEM";
   var enderAte = "DESTINO";
   geocoder.geocode( { 'address': enderAte, 'region' : 'BR'},trataLocs);
   initializeDirections ();
   calcRota (enderDe, enderAte);
}

function initializeDirections () {
   directionsService = new google.maps.DirectionsService();
   mapDisplay = new google.maps.DirectionsRenderer();
   mapDisplay.setMap(map);
   mapDisplay.setPanel(document.getElementById("panel"))
}

function calcRota(endDe, endPara) {
   var request = {
      origin:endDe,
      destination:endPara,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
   };
   directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
      mapDisplay.setDirections(response) }
   })
}

function trataLocs (results, status) {
   var elem = document.getElementById('msg');
   if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location });
      if (results.length > 1) {
         var i, txt = '<select style="font-family:Verdana;font-size:8pt;width=550px;" onchange="mostraEnd(this.options[this.selectedIndex].text);">';
         elem.innerHTML = 'O endereço exato não foi localizado - há ' + results.length.toString() + ' resultados aproximados.<br />';
         for (i = 0; i < results.length; i++) {
            txt = txt + '<option value="' + i.toString() + '"';
            if (i == 0) {
               txt = txt + ' selected="selected"';
               txt = txt + '>' + results[i].formatted_address + '</option>'; }
         }
         txt = txt + '</select>'
         elem.innerHTML = elem.innerHTML + txt;
      }
   } else
   elem.innerHTML = 'Erro no tratamento do endereço :<br /><b>' + status + '</b>';
}
</script>

</head>
<body onload='initialize();' style='font-family:Verdana;font-size:8pt;margin:5px 0 5px 0;'>
<center>
<div id='map_canvas' style='width:800px;height:450px'></div>
<div id='panel' style='width:550px;height:450px'></div>
</center>
</html>

Não tenho outra, apenas esta.

Theotokos · March 25, 2017

Ah Sim! Vlw!!! Essa é que eu tenho tmb... Obgdao!

PJINFO · April 11, 2017

Desta forma eu uso e funciona bem

local msearch := alltrim(upper(ENDERECO))+" "+ALLTRIM(NUMERO)+" "+
       alltrim(upper(CIDADE))+" "+;
       alltrim(upper(UF))

WebEXE3("https://www.google.com.br/maps/place/" + MSEARCH) //CARREGA A PAGINA USANDO O CHROME

*----------------------------------------------------
Function WebExe3(cLink) // visualiza e navega na pagina
*----------------------------------------------------
default cLink:="http://www.google.com"
clink:=GetEnv( "ComSpec" )+" /C START "+STRTRAN(cLink," ","+")
WAITRUN(cLink, 0 )
RETURN

Como mostrar a rota no google maps?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation