ATÉ 30 % OFF para compra e renovaÇÃo!

Autor Tópico: google maps rotas  (Lida 1055 vezes)

Moacir de Oliveira

  • Intermediário
  • ***
  • Mensagens: 164
    • Email
google maps rotas
« Online: Dezembro 02, 2016, 03:37:01 pm »
Ola Pessoal

Tinha que fazer uma rota com 2 endereços e procurei no forum e não achei. procurando na internet e lendo a documentação do google api
consegui fazer um começo, e coloco aqui para se servir para alguem.

Construi um formulario com  2 campos endereços e um botao php.
no codigo do botao coloquei : sc_redir(blank_maps_um.php , param1={end1}; param2={end2};);

Criei uma blank e no onexecute coloquei :

Citar
if (!empty([param1])){
   $end1 = [param1];
}else{
   $end1 = "praça da sé";
   }
if (!empty([param2])){
   $end2 = [param2];
}else{
   $end2 = "praça da sé";
   }

?>   

<!DOCTYPE html"
 
<html  lang="pt-br">
    <head>
        <title>Google Maps - Obter Rota</title>
   
   
    <script
src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=SUA CHAVE"
type="text/javascript"></script>
        <script type="text/javascript">
            var map = null;
            var geocoder = null;
            var from;
            var to;
            var directionsPanel = null;
            var directions = null;
           
            function inicializa() {
                if (GBrowserIsCompatible()) {
                    map = new GMap2(document.getElementById("mapa_base"));
                    map.setCenter(new GLatLng(-18.8800397, -47.05878999999999), 5);
                    geocoder = new GClientGeocoder();
                    map.addControl( new GSmallMapControl() );
                    map.addControl( new GMapTypeControl() );
                    directionsPanel = document.getElementById("route");
                    directions = new GDirections(map, directionsPanel);
                   
                  }
            }
   
            function gerarRota(){
                from = document.getElementById("partida").value;
                to = document.getElementById("destino").value;
                if ( geocoder ) {
                    geocoder.getLatLng(from,
                        function(point){
                            if ( !point ) {
                                alert(from + " não encontrado");
                            }
                        }
                    );
                    geocoder.getLatLng(to,
                        function(point){
                            if ( !point ) {
                                alert(to + " não encontrado");
                            }
                        }
                    );
                   
                    var string = "from: " + from + " to: "+to;
                    directions.clear();
                    directions.load(string);
                    GEvent.addListener(directions, "error", erroGetRoute);
                } else {
                    alert("GeoCoder não identificado");
                }
            }
           
            function erroGetRoute(){
                alert("Não foi possivel traçar a rota de: " + from + " para: " + to );
            }
           
           
    </script>
<style>

#div_form { margin-top: 20px }
h1 { text-align: center; font-size: 18px }

#enviar { padding: 5px 20px; height: 50px; width: 500px; }



</style>


    </head>
    <body id = "site" onload="inicializa()" onunload="GUnload()" >
   <div id="div_form">

        <form id="form_mapa" action="#" method="get">
            <label for="partida">Inicio : <?php echo $end1; ?> </label>
            <input type="hidden" name="partida" id="partida" value="<?php echo $end1; ?>" size="100" />
            <br />
            <label for="destino">Destino : <?php echo $end2; ?></label>
            <input type="hidden" name="destino" id="destino" value="<?php echo $end2; ?>" size="100" />
            <br />
            <input type="button" name="enviar" id="enviar" value="Obter Rota" onclick="gerarRota()"/>
        </form>
   </div>
      <div id="mapa_base" style="width: 500px; height: 500px;"></div>
        <div id="route" style="width: 230px; height: 300px; position: absolute; right: 0; top: 0;"></div></body>
</html>

<?php

Tem que criar a chave do google API
 logado no google https://console.developers.google.com/flows/enableapi?piid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&keyType=CLIENT_SIDE&reusekey=true&hl=pt-br

Espero ajudar alguem que precise igual eu precisava.
Falta melhorar.

At.
Moacir de Oliveira
Atenciosamente

Moacir de Oliveira
São Paulo - SP

Haroldo

  • Expert
  • *****
  • Mensagens: 7842
  • Conhecimento diminui limitações.△TFA△
    • InfinitusWeb Software de Gestãol/Gestão ITIL/Consultoria Scriptcase
Re:google maps rotas
« Responder #1 Online: Dezembro 02, 2016, 04:56:48 pm »
obrigado por compartilhar.

periodicosbrasil

  • Intermediário
  • ***
  • Mensagens: 126
    • Email
Re:google maps rotas
« Responder #2 Online: Dezembro 02, 2016, 10:29:26 pm »
Valeu Moacir !!!!

Arquimedes

  • Global Moderator
  • Expert
  • *****
  • Mensagens: 581
  • Ajudar para ser ajudado
Re:google maps rotas
« Responder #3 Online: Dezembro 03, 2016, 12:49:28 pm »
Obriado moacir.crica, funcionou corretamente.

dsagnet

  • Novato
  • *
  • Mensagens: 2
Re:google maps rotas
« Responder #4 Online: Fevereiro 09, 2018, 02:09:17 pm »
Boa tarde.

Fiz tudo como indicado, porém ele  nunca encontra os endereços (partida e destino) para traçar a rota. Sempre envia mensagem que não foi encontrado conforme exemplo nesta IMAGEM. Alguém saberia o que pode ser?

Grato.