Ir para conteúdo

Recommended Posts

Boa noite galera tudo na paz?

Sou novo no wordpress e gostaria de saber como posso fazer um mapa de localizações parecido com esse aqui LOCALIZAÇÃO

 

Terei vários endereços no mapa e quando a pessoa digitar o CEP dela, é mostrado no mapa o endereço mais próximo dela

 

Desde já agradeço

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, isso ai é uso da API do Google, não tem haver com o WordPress (a não ser que, quando você terminar a API, você queira os pontos gerenciáveis), vou te direcionar para a área de JavaScript.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Rodrigo Razzyel
      Eu não estou conseguindo fazer ele adicionar um valor no tempo da viagem ..tipo assim depois que eu colocar o endereço ai me gera o valor do frete mas eu quero calcular o tempo estimado sambem Ex. se o tempo for 60 minutos e o motorista demorar 120 minutos, apos os 60 minutos ja calculado somaria a cada minuto adiciona $0,05 centavos ..não sei se estou sendo especifico,
      e tambem não estou conseguindo fazer com que a posição de origem ser enviada para o banco de dados
      o banco de dados seleciona o motoboy que esta conectado mais proximo do ponto de origem, quando o motoboy chega na origem e pega o documento ele ja clica em iniciar 
      para dar o destino para ele... tem alguma maneira de fazer isso sem usar o banco de dados...
       
      poderia me ajudar
       
      o codigo é 
       <body>
            <div class="upage" id="mainpage" data-role="page" style="background:url(img/back.jpg); background-size:cover">
              <div id="moto" class="upage-content vertical-col left hidden">
                 <div class="table-thing widget uib_w_7 d-margins" data-uib="twitter%20bootstrap/input" data-ver="1">
                        <label class="narrow-control label-inline" for="txtOrigem">Retirada</label>
                        <input class="wide-control form-control default" type="text" placeholder="Digite o endereço para retirar" id="txtOrigem">
                     </div>
                     <div class="table-thing widget uib_w_8 d-margins" data-uib="twitter%20bootstrap/input" data-ver="1">
                        <label class="narrow-control label-inline" for="txtDestino">Entrega</label>
                        <input class="wide-control form-control default" type="text" placeholder="Digite  endereço de entrega" id="txtDestino">
                     </div>
                     <!-- codigo botao xdk -->
                     <button class="btn widget uib_w_9 d-margins btn-info" data-uib="twitter%20bootstrap/button" data-ver="1" onclick="CalculaDistancia()"><i class="glyphicon glyphicon-search" data-position="icon only"></i>
                     </button>
                    
                     <div class="grid grid-pad urow uib_row_3 row-height-3" data-uib="layout/row" data-ver="0">
                        <div><span id="litResultado">&nbsp;</span>
                        </div>
                        <div class="col uib_col_5 col-0_12-12" data-uib="layout/col" data-ver="0">
                           <div class="widget-container content-area vertical-col">
                              <span class="uib_shim"></span>
                           </div>
                        </div>
                        <span class="uib_shim"></span>
                     </div>
                  </div>
               </div>
            </div>
      <script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
      <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: [$("#txtOrigem").val()],
                            //Destino
                            destinations: [$("#txtDestino").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 origem = response.originAddresses
                          //Endereço de destino = response.destinationAddresses
                          //Distância = response.rows[0].elements[0].distance.text
                          //Duração = response.rows[0].elements[0].duration.text
       var valor = (parseFloat(response.rows[0].elements[0].distance.text.substring(0, response.rows[0].elements[0].distance.text.length - 3).split(",").join(".")) * 1.68 + 5.39).toFixed(2).toString().split(".").join(",");
      $('#litResultado').html("<strong>Origem</strong>: " + response.originAddresses +
      "<br /><strong>Destino:</strong> " + response.destinationAddresses +
      "<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
      " <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text +
      " <br /><strong>Preço</strong>: R$ " + valor
      );
      $("input[name='item_valor_1']").val(valor);
                          //Atualizar o mapa
                          $("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed");
                      }
                  }
            </script>
         </body>
      </html>
    • Por juliosilvajr
      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>  
    • Por vitorhugosg
      Olá galera, tenho latitude, e longitude.

      Gostaria de saber como eu faço para pegar

      Raio de ação 5km em volta por exemplo, através do beetween do SQL.

      Obrigado desde já.
    • Por Danyx
      Bom dia Senhores,
       
      Estamos desenvolvendo um aplicativo android que precisa de traçar rotas e navegação e temos alguns cálculos específicos para esse fim. Pois bem, ao fazer esses cálculos e passar para o gmaps o início e o fim da rota o mesmo traça a rota mais perto, não sendo a mesma que o nosso app passou. Descobrimos uma solução chamada mapbox que atende perfeitamente a nossa necessidade abre a navegação dentro do nosso app e tudo, mas não tem tradução para o Português. Enfim gostaria da ajuda de vcs caso tenha alguma sugestão para essa demanda ou um SDK que faça isso.
    • Por Alan Quidornne
      Olá Amigos,
       
      Tenho enfrentado uma séria dificuldade ao utilizar o serviço "Autocomplete" do Google Maps API.
       
      Estou desenvolvendo um sistema de reserva de transfers(viagens de carro executivo) na qual o usuário informa a origem e destino de sua viagem e o sistema integrado com o Google Maps calcula o preço da viagem em questão .
       
      A dificuldade que estou tendo é limitar a exibição dos resultados do Autocomplete para locais restritos ao estado do Rio de Janeiro.
       
      Consigo tranquilamente limitar por país, mas para o território do Rio de Janeiro não consegui achar nenhuma função na documentação oficial que me atendesse nessa questão.
       
      Segue código do autocomplete.
      function initialize() { var options = { componentRestrictions: { country : "BR" } }; directionsService = new google.maps.DirectionsService(); var inputFrom = document.getElementById('from'); var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options); autocompleteFrom.addListener('place_changed', function() { var place = autocompleteFrom.getPlace(); placeId1 = place.place_id; }); var inputTo = document.getElementById('to'); var autocompleteTo = new google.maps.places.Autocomplete(inputTo, options); autocompleteTo.addListener('place_changed', function() { var place = autocompleteTo.getPlace(); placeId2 = place.place_id; }); } Se alguém souber e puder fazer a gentileza de me auxiliar nessa questão, ficarei bastante agradecido.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.