none
ROTA COM SETA NO GOOGLE MAPS

    Question

  • Pessoal,

    Possuo uma página que gera um mapa com uma linha mostrando a trajetória de u carro no google maps. Até ai funciona perfeito, eu uso o GMAPS e desenho as linhas com addPolyline. Gostaria de colocar além da linha uma seta mostrando o destino pois as vezes a pessoa sai de um lugar, faz uma trajetória e passa por esse ponto inicial e as vezes fica confuso. Para testar meu site é o http://www.automatizacaoresidencial.com.br/rastreamentoveicular.aspx

    grato

    Alexandre
    Thursday, April 30, 2009 1:34 AM

Answers

  • Alexandre,

    Se vc está usando a API do Google maps, segue um exemplo de como criar marcores em páginas google maps.
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
      </head>
      <body onunload="GUnload()">
    
        <div id="map" style="width: 800px; height: 600px"></div>
      
        <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
          However, it seems JavaScript is either disabled or not supported by your browser. 
          To view Google Maps, enable JavaScript by changing your browser options, and then 
          try again.
        </noscript>
     
    
        <script type="text/javascript">
        //<![CDATA[
        
        if (GBrowserIsCompatible()) { 
    
          
          function createMarker(point,html) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
            });
            return marker;
          }
    
          // Display the map, with some controls and set the initial location 
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(-1.179186,-50.449218999999999),8);
        
          // Set up three markers with info windows 
        
          var point = new GLatLng(-1.179186,-50.449218999999999);
          var marker = createMarker(point,'<div style="width:400px">SAMPLE: AA00001<P>Al: 14 mg/l<P>Cr: 11 mg/L<P>B: 33 mg/L</div>')
          map.addOverlay(marker); 
    
        }
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        </script>
      </body>
    
    </html>
    Abraços

    Felippe
    Felippe Domingos
    Monday, May 11, 2009 2:05 AM

All replies

  • Alexandre,

    Se vc está usando a API do Google maps, segue um exemplo de como criar marcores em páginas google maps.
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
      </head>
      <body onunload="GUnload()">
    
        <div id="map" style="width: 800px; height: 600px"></div>
      
        <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
          However, it seems JavaScript is either disabled or not supported by your browser. 
          To view Google Maps, enable JavaScript by changing your browser options, and then 
          try again.
        </noscript>
     
    
        <script type="text/javascript">
        //<![CDATA[
        
        if (GBrowserIsCompatible()) { 
    
          
          function createMarker(point,html) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
            });
            return marker;
          }
    
          // Display the map, with some controls and set the initial location 
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(-1.179186,-50.449218999999999),8);
        
          // Set up three markers with info windows 
        
          var point = new GLatLng(-1.179186,-50.449218999999999);
          var marker = createMarker(point,'<div style="width:400px">SAMPLE: AA00001<P>Al: 14 mg/l<P>Cr: 11 mg/L<P>B: 33 mg/L</div>')
          map.addOverlay(marker); 
    
        }
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        </script>
      </body>
    
    </html>
    Abraços

    Felippe
    Felippe Domingos
    Monday, May 11, 2009 2:05 AM
  • Olá Felippe,

    Não consegui foi colocar o icone que eu quero. Coloquei uma figura com terminação .ico mas não funciona. Que tipo de imagem tem que ser ?
    Sunday, May 17, 2009 12:36 PM
  • Alexandre,

    Acredito que você vai precisar usar figuras no formato .png, .jpg ou .gif

    Não estou muito certo, consulte os exemplos nesse site:
    http://groups.google.com/group/Google-Maps-API/web/examples-tutorials-custom-icons-for-markers

    Abraços...
    Felippe Domingos
    Tuesday, May 19, 2009 2:47 AM
  • Consegui colocar os marcadores só que não adiantou, é que eu queria colocar setas indicando a direção nas minhas rotas, com marcadores consigo colocar um icone com uma seta mas acontece que o sentido da direção muda e fica então eu teria que ter várias setas para várias direçoes e saber pelas coordenadas quando usar qual. Eu teria que conseguir fazer isso com as linhas feitas pelo addPolyline. Pra verificar o que estou falando, de uma olhada no meu site http://www.automatizacaoresidencial.com.br/rastreamentoveicular.aspx
    Tuesday, May 19, 2009 7:43 PM
  • Acho que o q você procura está nesse site:
    http://wheresthepath.googlepages.com/arrowline.htm
     lá tem o código fonte para consulta:
    http://wheresthepath.googlepages.com/BdccArrowedPolyline.js

    Abraços

    Felippe Domingos
    Tuesday, May 19, 2009 9:07 PM
  • Felippe vc tem algo para gerar linhas (rotas) vindas de um banco de dados, quero fazer uma pagina em que eu mostre o percurso de uma linha de onibus, tenho todas as coordenadas em banco, como eu faria isso colocando um for dentro do script vc trm algo assim ou tem algum link que posso me fornecer ?


    Agradeço
    Junior
    Wednesday, May 20, 2009 2:20 PM
  • Felipe, nenhum dos dois link estão abrindo.

    Wednesday, May 20, 2009 7:43 PM
  • Junior e Alexandre,

    Cheque esse link então:

    http://wtp2.appspot.com/ArrowLine.htm

    http://wtp2.appspot.com/BdccArrowedPolyline.js

    Acho que houve alguma modificação com os servidores do google. Desculpem-me sobre isto.

    Abraços
    Felippe Domingos
    Thursday, May 21, 2009 5:20 PM
  • Boa noite pessoal, será que alguém tem algum código referente a criar rotas usando api googlemaps em vb.net? Vou ter duas caixas de texto no form, caixa A com o endereço de partida, caixa B com o endereço de destino.Já tentei o desse link aqui: http://social.msdn.microsoft.com/Forums/pt-BR/504/thread/81548986-076d-4fcb-910c-4171e4ac0238?prof=required , mas não deu certo, estou precisando disso para meu trabalho de monografia.

    Obrigado.


    fabriciogurgel@hotmail.com
    Tuesday, March 01, 2011 1:49 AM