Jump to content
juliosilvajr

API Google maps não funciona no Servidor PHP

Recommended Posts

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

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

  • Similar Content

    • By rjlfurtado
      Segue abaixo o exemplo de como seria feito em SQL:
      CREATE TABLE tabela ( campo1 DOUBLE, campo2 DOUBLE, divisao DOUBLE AS (campo1/campo2) ); Agora eu preciso criar uma migração no Laravel 6, segue exemplo abaixo:
      $table->integer('qtd_saida'); $table->decimal('valor_uni', 8, 2); $table->double('valor_total')->as(qtd_saida * valor_uni);  
    • By studdiox
      Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente 
      ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview
      de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas 
      antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja
      uma imagem por vez,  ele não carrega o restante das imagens, apenas a primeira, vou por o
      código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele
      para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também 
       
       
      <html> <head> <style type="text/css"> .thumb-image{ float:left;width:100px; position:relative; padding:5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" multiple="multiple" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html> No meu caso ele ficaria assim
       
       
       
      <html> <head> <style type="text/css"> .thumb-image { float: left; width: 100px; position: relative; padding: 5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html>  
       
       
       
    • By Marxrj
      Olá a todos!,
      Queria aqui uma dica se alguém sabe como alinhar fotos no centro pelo bootstrap.
      Usando o padrão fotos retratos fica como abaixo
      __________  __________
      __________
       
      Mas eu queria que quando tivesse um número impar, a foto não ficasse alinhada na esquerda e sim centralizada como abaixo
      __________  __________
                __________
       
      Estou usando este padrão abaixo aonde ele alinha duas fotos ao lado, mas quando tem somente um ou em número impar, essa não centraliza e sim fica a esquerda.
      <div class="col-xs-12 col-sm-10 col-lg-6 col-md-3">
    • By JoãoRicardo.Lima
      Olá pessoal blz?.
      Estou com problemas para ler um xml, estou pegando ele com simplexml_load_file(), quando eu dou um vardump ele me mostra todas as propriedades e tals, mas quando eu tento pegar a propriedade(exemplo $xml->emit) ele me retorna null, abaixo está o código.
       
      $arquivo = $_FILES['xml_conta']; $xml = simplexml_load_file($arquivo['tmp_name']); var_dump($xml->ide); Já tentei pegar o arquivo direto do diretório mas da no mesmo. Abaixo o meu var_dump().
       
      object(SimpleXMLElement)#2 (3) { ["@attributes"]=> array(1) { ["versao"]=> string(4) "4.00" } ["NFe"]=> object(SimpleXMLElement)#4 (2) { ["infNFe"]=> object(SimpleXMLElement)#6 (9) { ["@attributes"]=> array(2) { ["versao"]=> string(4) "4.00" ["Id"]=> string(47) "NFe51191203927792000132550010003900572477841258" } ["ide"]=> object(SimpleXMLElement)#8 (22) { ["cUF"]=> string(2) "51" ["cNF"]=> string(8) "47825479" ["natOp"]=> string(33) "Venda Terceiros" ["mod"]=> string(2) "50" ["serie"]=> string(1) "1" ["nNF"]=> string(6) "397894" ["dhEmi"]=> string(25) "2019-12-05T18:35:33-04:00" ["dhSaiEnt"]=> string(25) "2019-12-05T18:35:33-04:00" ["tpNF"]=> string(1) "1" ["idDest"]=> string(1) "1" ["cMunFG"]=> string(7) "51074" ["tpImp"]=> string(1) "3" ["tpEmis"]=> string(1) "2" ["cDV"]=> string(1) "5" ["tpAmb"]=> string(1) "2" ["finNFe"]=> string(1) "2" ["indFinal"]=> string(1) "1" ["indPres"]=> string(1) "1" ["procEmi"]=> string(1) "0" ["verProc"]=> string(7) "3.5.1.2" ["dhCont"]=> string(25) "2019-12-05T15:32:22-04:00" ["xJust"]=> string(23) "sem conexao com o sefaz" }  
    • By Overtron8000
      Ola Pessoas,
      Recentemente fiz uma prova para Desenvolvedor Javascript jr em uma empresa e tinha varias questões para escrever o código NA MÃO  e uma delas me deixou encabulado por exigirem que um junior saiba de cór isso era a seguinte pergunta:
       
      Dado o JSON abaixo construa um código que faça o calculo da media do parâmetro "time"  quando "type" for semelhante a "call" e o máximo valor para "time" quando "type for semelhante a "ping". Considere que o array events poderá conter milhões de objetos portanto seu código deve levar em consideração o processamento assíncrono do Node.js de forma que o resultado seja síncrono, ou seja, o codigo so deve completar quando o resultado do s cálculos estiverem prontos.
      JSON : events = { [ {type:"ping", time :10) [ {type:"ping", time: 5) [ {type:"call", time: 99) [ {type:"call", time: 67) [ {type:"ping", time: 7) [ {type:"call", time: 127) }  
      Isso tudo para fazer no resto da folha que sobrou alem da pergunta, se alguém saber uma solução poste ai que estou curioso ate hoje, sei que leva o conceito de promisses assíncronas mas ainda não cheguei nessa parte
       
       
       
       
                                   
       
       
×

Important Information

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