Jump to content

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

Share this post


Link to post
Share on other 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.

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 scsrat
      Preciso de ajuda com infowindow para polygonos multiplos está abrindo popup em todos com nome do ultimo lançamento somente, não estou dando conta em java, alguém se habilita?
       
      <?php      include 'export_xml.php'; ?> <html>     <head>         <meta charset='utf-8' />         <title>Google Maps: Storing Polygons in database</title>         <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDao9cuBBnlx14GWyG8ZnfZ1WjHj9oa6DA&callback=initMap"></script>         <script>                                  function initialize() {               var mapOptions = {                 zoom: 14,                 center: new google.maps.LatLng(-22.247791, -53.348142),                 mapTypeId: google.maps.MapTypeId.ROADMAP               };               var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);               var arr = new Array();               var polygons = [];               var bounds = new google.maps.LatLngBounds();                                             var xml = xmlParse(xmlString);               var subdivision = xml.getElementsByTagName("subdivision");                                                                for (var i = 0; i < subdivision.length; i++) {                 arr = [];                 html = [];                 var name = xml.documentElement.getElementsByTagName("subdivision").getAttribute("name");                 var address = xml.documentElement.getElementsByTagName("subdivision").getAttribute("address");                 var html = "<b>" + name + "</b> <br/>" + address + "<br><a href=# target=_blank>Clique aqui";                 //Tentando pegar dados dos polygons individuais                 var coordinates = xml.documentElement.getElementsByTagName("subdivision").getElementsByTagName("coord");                 for (var j = 0; j < coordinates.length; j++) {                   arr.push(new google.maps.LatLng(                     parseFloat(coordinates[j].getAttribute("lat")),                     parseFloat(coordinates[j].getAttribute("lng"))                   ));                   bounds.extend(arr[arr.length - 1])                 }                 polygons.push(new google.maps.Polygon({                   paths: arr,                   title: html,                   strokeColor: '#FF0000',                   strokeOpacity: 0.8,                   strokeWeight: 2,                   fillColor: '#FF0000',                   fillOpacity: 0.35                                    }));                 polygons[polygons.length - 1].setMap(map);                                  var infowindow = new google.maps.InfoWindow({                                        content: html // Tentando pegar dados dos polygons individuais                 });                                  google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {                     infowindow.open(map);                     infowindow.setPosition(event.latLng);                 });                                }                              // });               map.fitBounds(bounds);             }                          var xmlString = '<?php echo $textolinha; ?>';                          /**              * Parses the given XML string and returns the parsed document in a              * DOM data structure. This function will return an empty DOM node if              * XML parsing is not supported in this browser.              * @param {string} str XML string.              * @return {Element|Document} DOM.              */             function xmlParse(str) {               if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {                 var doc = new ActiveXObject('Microsoft.XMLDOM');                 doc.loadXML(str);                 return doc;               }               if (typeof DOMParser != 'undefined') {                 return (new DOMParser()).parseFromString(str, 'text/xml');               }               return createElement('div', null);             }             google.maps.event.addDomListener(window, 'load', initialize);                      </script>         <style>             #map-canvas,             body,             html {               height: 100%;               width: 100%;             }                      </style>     </head>     <body>                  <div id="map-canvas"></div>     </body> </html>  
       
      O include export_xml.php: Saida do xml
       
      <subdivisions> <subdivision name="teste1" address="0" > <coord lat="-22.246906181604235" lng="-53.343656079469014" /> <coord lat="-22.246160343589366" lng="-53.34298025442864" /> <coord lat="-22.246612168987966" lng="-53.34231238438393" /> <coord lat="-22.24577306351632" lng="-53.34163110329415" /> <coord lat="-22.246309297178513" lng="-53.34088544918801" /> <coord lat="-22.24709286679633" lng="-53.34152917935158" /> <coord lat="-22.247917069182467" lng="-53.342210460441365" /> <coord lat="-22.24876923872473" lng="-53.34288149840766" /> <coord lat="-22.248292595053044" lng="-53.343581554960544" /> <coord lat="-22.247442990211773" lng="-53.34287048089961" /> </subdivision> <subdivision name="teste2" address="0" > <coord lat="-22.24744605203327" lng="-53.3428707695716" /> <coord lat="-22.24664667240292" lng="-53.34224581487113" /> <coord lat="-22.24714566457059" lng="-53.341564533781344" /> <coord lat="-22.247922698585814" lng="-53.342200217317874" /> </subdivision> </subdivisions>  
    • By ZioNN
      Estou tentando implementar lazy loading em um mapa do Google Maps que temos na home-page do site do cliente. É um iframe padrão do Maps no formato
       
      <iframe  src="https://www.google.com/maps/d/u/1/embed?mid=1qBlmrpdrcg46Esp-C88T1AMseNdz9k" width="100%" height="530"></iframe>
      Já tentei 3 plug-ins que encontrei em pesquisas na net, e nenhum deles funcionou. 

      O mapa é o item que mais pesa no carregamento inicial da home-page e está nos custando muito tempo e peso de loading.

      Foram:

      Lazyframe master
      Lazy Maps
      Jquery Lazy Master

      Qual a melhor solução para este caso, sem remover o mapa? 

      Obrigado
    • By tarcioblanco@gmail.com
      Olá pessoal!
       
      Sou bem iniciante em programação (o projeto será quase todo terceirizado).
      Estou desenvolvendo um projeto de roteirização de entregas.
      O ideal seria ele rodar em WEB porém preciso de interface mobile para que os motoristas recebam as notificações do percurso e locais que precisam fazer as entregas entre outros, além de interface com impressoras na rede local.
      Seria o seguinte: o sistema precisa roteirizar as entregas dos motoristas, definindo a distribuição das entregas entre os motoristas (baseado em horário limite para entrega, posso ter 10 entregas que precisam ser feitas dentro de uma janela de 60 minutos por exemplo), então o sistema deveria dividir essas entregas entre os motoristas disponíveis, assim como a sequencia das entregas. pensando em otimizar tempo a agilizar as entregas. Além de notificar atrasos e informar que não é mais possivel adicionar entregas para tal horário pois as entregas existentes já consumiram o tempo disponível dos motoristas.
      Além da distribuição de roteiros, o sistema precisará de outras funções básicas como dashboard, recebimento de pedidos, encaminhar ordem de separação para o almoxarifado, acompanhamento dos entregadores no mapa, relatório sobre eficiência de cada motorista e integração com outros sistemas via Json (para receber os pedidos de entrega)
      Como é um sistema que ainda não existe, a ajuda que eu preciso é justamente sobre dicas de qual linguagem usar para criar esse sistema com foco em tempo de programação.
       
      Agradeço demais quem puder ajudar!
    • By naoliva
      Alguém tem uma dica de como extrair as coordenadas dos trechos que compõem o mapa da rede em http://nossarede.comgas.com.br ?
      Os arquivos ViewportInfoService.js parecem ser o caminho. Mas não consegui entender o formato.
    • By 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>
×

Important Information

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