Jump to content
juliosilvajr

API Google maps não funciona no Servidor PHP

By juliosilvajr, in Javascript

Recommended Posts

juliosilvajr    0

juliosilvajr
Posted (edited)

Estou desenvolvendo uma aplicação que calcula a distancia entre dois endereços sendo um ja pré determinado usando a API V3 do Google Maps ,porém quando vou rodar a aplicação no servidor php, ela não funciona

Segue abaixo o codigo completo

PS: Sou novato nisso tudo 


  

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
  <title>Lampada</title>
  <style type="text/css">
    .hidden {
      display: none;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
</head>

<body>
  <div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1 class="display-1">PSHE
            <br> </h1>
        </div>
      </div>
    </div>
  </div>
  <div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          <label for="txtDestino">
            <strong>Digite seu Endereço</strong>
          </label>
        </div>
      </div>
          <div class="row">
        <div class="col-md-9">
          <input type="text" id="txtDestino" class="field" style="width: 400px;"> </div>
        <br>
        <br>
        <div class="col-md-9">
          <select name="cidade" id="cidade" type="text">
            <option>Selecione...</option>
            <option value="Sorocaba">Sorocaba</option>
            <option value="Votorantim">Votorantim</option>
          </select>
        </div>
      </div>
     </form>
      <br>
      <br>
      <div class="row">
        <div class="col-md-12">
          <input type="button" value="Calcular distância" onclick="CalculaDistancia()" class="btnNew"> </div>
      </div>
      <br>
      <br>
      <div>
        <span id="litResultado"> </span>
      </div>
      <div>
             
    </div>          
    </div>
  </div>
  
  <div class="py-5 text-white bg-warning">
    <div class="container">
      <div class="row">
        <div class="col-md-12 mt-3 text-center">
          <p>Rua Armando Caldini
            <br>Sorocaba -SP
            <br>
            <br>(15) 99614-5279
            <br>© Grupo PSHE - Todos os Direitor reservados</p>
        </div>
      </div>
    </div>
  </div>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
      function CalculaDistancia() {
                    $('#litResultado').html('Aguarde...');
                    //Instanciar o DistanceMatrixService
                    var service = new google.maps.DistanceMatrixService();
                    
                
                
                    //executar o DistanceMatrixService
                    service.getDistanceMatrix(
                      {
                          //Origem
                          origins: ["Rua Armando Caldini 161 Sorocaba"],
                          //Destino
                          destinations: [$("#txtDestino").val() + $("#cidade").val()],
                          //Modo (DRIVING | WALKING | BICYCLING)
                          travelMode: google.maps.TravelMode.DRIVING,
                          //Sistema de medida (METRIC | IMPERIAL)
                          unitSystem: google.maps.UnitSystem.METRIC
                          //Vai chamar o callback
                      }, callback);
                }
                //Tratar o retorno do DistanceMatrixService
                function callback(response, status) {
                    //Verificar o Status
                    if (status != google.maps.DistanceMatrixStatus.OK)
                        //Se o status não for "OK"
                        $('#litResultado').html(status);
                    else {
                        //Se o status for OK
                        //Endereço de destino = response.destinationAddresses
                        //Distância = response.rows[0].elements[0].distance.text

                        //Preco =  response.rows[0].elements[0].distance.value*0.0009).toFixed(2)
                        //Duração = response.rows[0].elements[0].duration.text
                        $('#litResultado').html(
                        
                        
                            "<strong>Destino:</strong> " + response.destinationAddresses +
                            "<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
                            "<br /><strong>Preço</strong>: " +"R$: "+(response.rows[0].elements[0].distance.value*0.0009).toFixed(2)+
                            " <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text
                    
                            );
                       
                       
                    }
                }
  </script>
 
</body>

</html>

 

Edited by Gabriel Heming
adicionar marcação de código

Share this post

Link to post
Share on other sites

Gabriel Heming    766

Gabriel Heming
Posted

Movido: PHP -> JavaScript

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing Javascript

  • Similar Content

    • brendow
      Como listar e fazer a contagem dos dias de uma semana entre duas datas usando javascript e php
      By brendow
      Pessoal, preciso urgentemente de fazer um relatório, mas não consigo fazer de jeito nenhum... Será que poderiam me ajudar?
       
      Possuo a tabela geral tb_turg que guarda os registros assim:
       
      idmodg: 13 (codigo do módulo)
      codturg: 101 (código da turma)
      iniclasg: 2020-01-13 (data de inicio)
      terclasg: 2020-02-21 (data de termino)
      weekg: 1,3,5 (dias da semana que tem curso, neste caso: segunda, quarta e sexta)
       
      Cada aluno possui uma tabela. O aluno id 1 possui a tabela tb_z1 e guarda os registros assim:
       
      idcur      | codtur               | diafrq
      13           | 101                     | 2020-01-13
      13           | 101                     | 2020-01-17
      13           | 101                     | 2020-01-20
      13           | 101                     | 2020-01-22
      13           | 101                     | 2020-01-29
      13           | 101                     | 2020-01-31
      13           | 101                     | 2020-02-03
      13           | 101                     | 2020-02-05
      13           | 101                     | 2020-02-07
      etc...
       
      Como calcular:
      Quantos dias e quais os dias da tabela tb_turg da data de inicio (iniclasg) até a data de término (terclasg), mas somente nos dias especificados na semana (weekg), que seriam
       
      2020-01-13, 2020-01-15, 2020-01-17,
      2020-01-20, 2020-01-22, 2020-01-24,
      2020-01-27, 2020-01-29, 2020-01-31,
      2020-02-03, 2020-02-05, 2020-02-07,
      2020-02-10, 2020-02-12, 2020-02-14,
      2020-02-17, 2020-02-19, 2020-02-21,
      Daria: 18 DIAS
       
      Quantos dias de frequência teve o aluno id 1
      09 DIAS (por exemplo)
       
      Obtido os dados, deve-se verificar:
      Quantos dias de FALTA obteve o aluno id 1?
       
      Preciso gerar um relatório passando o código do módulo (13) e o código da turma (101) via GET. Alguém pode me ajudar? Obrigado
      Seria mais ou menos assim que deveria ficar (imagem anexo)

    • adriano.eurich
      Imprimir na tela um relatório de cadastro entre datas em php
      By adriano.eurich
      cadastro.php <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <form action="banco_de_dados/create.php" method="post" class="col s12"> <fieldset class="formulario" style="padding: 1px;"> <legend><!--<img src="imagens/CadCli.png" alt="[imagem]" style="width:40x; height:40px">--></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Campo Nome --> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input type="text" name="nome" id="nome" maxlength="40" required autofocus> <label for="nome">Nome</label> </div> <!-- Campo Instituição --> <div class="input-field col s12"> <i class="material-icons prefix">account_balance</i> <input type="text" name="inst" id="inst" maxlength="40" required autofocus> <label for="inst">Instituição</label> </div> <!-- Campo Telefone --> <div class="input-field col s12"> <i class="material-icons prefix">phone</i> <input type="text" name="telefone" id="telefone" maxlength="13" required> <label for="telefone">Telefone</label> </div> <!-- Campo Chave --> <div class="input-field col s12"> <i class="material-icons prefix">vpn_key</i> <input type="text" name="chave" id="chave" maxlength="4" required> <label for="chave">Chave</label> </div> <!-- Botões --> <div class="input-field col s12"> <input type="submit"style="width:120px; height:37px" value="cadastrar" class="btn blue"> <input type="reset" style="width:120px; height:37px" value="limpar" class="btn red"> </div> </fieldset> </form> </div> <?php include_once 'includes/script.inc.php';?> ------------------------- create.php <?php session_start(); include_once 'conexao.php'; $id = $_POST [ 'id' ]; $nome = $_POST [ 'nome' ]; $inst = $_POST [ 'inst' ]; $data = date('y-m-d'); $telefone = $_POST [ 'telefone' ]; $chave = $_POST [ 'chave' ]; $queryInsert = $link->query("insert into tb_cadastro VALUES ('".$id."', '".$nome."','".$inst."','".$data."','".$telefone."','".$chave."')"); $affected_rows = mysqli_affected_rows($link); if($affected_rows > 0): $_SESSION['msg'] = "<p class='center green-text'>".'Cadastrado com Sucesso!'."<br>"; header("Location: ../cadastro.php"); endif; --------------- relatorio.php <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <p>&nbsp;</p> <form action="banco_de_dados/consulta_rel.php" method="post" class="col s12"> <fieldset class="formulario" style="padding: 3px"> <legend><img src="imagens/relatorio.png" alt="[imagem]" style="width:55px; height:45px"></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Campo Data --> <div class="input-field col s12"> <i class="material-icons prefix">event_available</i> <input type="date" name="datainicial" id="data" maxlength="10" required> <label for="data">Data Inicial</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">event_busy</i> <input type="date" name="datafinal" id="data" maxlength="10" required> <label for="data">Data Final</label> </div> <!-- Botões --> <div class="input-field col s12"> <input type="submit"style="width:120px; height:37px" value="Gerar" class="btn blue"> <input type="reset" style="width:120px; height:37px" value="limpar" class="btn red"> </div> </fieldset> </form> </div> <?php include_once 'includes/footer.inc.php';?> <?php include_once 'includes/script.inc.php'; ----------------- arquivo_rel.php ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <p>&nbsp;</p> <fieldset class="formulario" style="padding: 5px"> <legend><img src="imagens/relatorio.png" alt="[imagem]" style="width:55px; height:45px"></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <table class="highlight" > <thead> <tr> <th>Nome</th> <th>Instituição</th> <th>Data</th> </tr> </thead> </table> </fieldset> </div> <?php include_once 'includes/footer.inc.php';?> <?php include_once 'includes/script.inc.php'; --------------- consulta_rel.php <?php session_start(); include_once 'conexao.php'; $datainicial = $_POST [ 'datainicial' ]; $datafinal = $_POST [ 'datafinal' ]; $sql= "select * from tb_cadastro where data between '$datainicial' and '$datainicial'"; $consulta_rel = mysqli_query($link, $sql); echo "sql"; if($consulta_rel) { ////// $_SESSION['msg'] = "<p class='center green-text'>".'Devolução efetuada com Sucesso!'."<br>"; header("Location: ../arquivo_rel.php"); exit(); } Alguma dica de como eu posso, mostrar os dados do cadastro, quando abro a pagina relatório e coloco as datas para consulta
    • dlucas2002
      Calcular distância entre dois pontos na Api do Google Maps
      By dlucas2002
      Bom dia, estou querendo calcular a distância entre dois pontos(ponto1 e ponto2) no google maps, alguém pode me ajudar?Já tenho os dois pontos representados por marcadores e a rota, só falta a distância entre eles.Conferi a bibliografia atual do google maps sobre Distance Matrix mas ela não tem nenhum código que funcionasse pra esse meu problema específico.
       
       
      <!DOCTYPE html> <html>   <head>     <style>        /* Set the size of the div element that contains the map */       #map {         height: 400px;  /* The height is 400 pixels */         width: 100%;  /* The width is the width of the web page */        }     </style>   </head>   <body>     <div id="map"></div>     <script>                  function initMap() {             var directionsService = new google.maps.DirectionsService();             var directionsRenderer = new google.maps.DirectionsRenderer();               var ponto1 = new google.maps.LatLng(-5.577833,-36.913061);;             var ponto2 = new google.maps.LatLng(-22.934894,-47.060696);                var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: ponto2});             directionsRenderer.setMap(map);                var marker = new google.maps.Marker({position: ponto1, map: map});             var marker1 = new google.maps.Marker({position: ponto2, map: map});               var request = {                 origin: ponto1,                 destination: ponto2,                 travelMode: 'DRIVING'             };             directionsService.route(request, function(result, status) {                 if (status == 'OK') {                 directionsRenderer.setDirections(result);                 }             });                     }                </script>            <script async defer     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9RfaC0_ixdYkUQokkZqO93mzvLBCrvr4&callback=initMap">     </script>   </body> </html>
×

Important Information

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

  I accept