Jump to content
ezequielgodoy

Mover o "marker" para frente do "infoWindow"

Recommended Posts

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.

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 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 Karoline Arias
      Olá, Boa tarde!
      Fizemos um redesign de um e-commerce nacional, onde inserimos recursos do Google Maps na página de localização de lojas deste varejista. O maps incorporado nesta página apresenta o mapa, porem não apresenta a localização do usuário e a marcação (marker) das lojas ou pins.
      Observação: Ao substituirmos a chave Google do varejista, pela chave Google do desenvolvedor, as marcações aparecerem normalmente. Será que pode estar faltando alguma configuração ou componente associado a chave/conta Google do varejista?
      Obrigada!

    • 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>
    • By 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>  
×

Important Information

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