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 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.
    • Por ezequielgodoy
      Ola galera.
       
      Estou pesquisando a horas como mover o marcador do Google Maps para frente do balao de informacao, mas sem sucesso.
      Isso mesmo, preciso que aquele balao que abre quando clicamos no marcador, fique abaixo do marcador.
       
      Segue abaixo um exemplo do que estou precisando fazer
      https://jdit2jpbs4rkcsrl-zippykid.netdna-ssl.com/wp-content/themes/nanda/map_example.jpg
       
      Alguem sabe como faco isso?
       
      Obrigado desde ja.
×

Informação importante

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