menu
Fórum Adianti
menu Menu
Obter latitude longitude de um marcador googlemaps Estou necessitando obter a latitude e longitude, e ao criar um form, estou com dificuldades em exibir-lo, não sei qual é o erro, abri no código fonte e parece que está tudo ok, só que ele não carrega, alguém já passou por algo? abaixo um código funcionando ...
MC
Obter latitude longitude de um marcador googlemaps  
Estou necessitando obter a latitude e longitude, e ao criar um form, estou com dificuldades em exibir-lo, não sei qual é o erro, abri no código fonte e parece que está tudo ok, só que ele não carrega, alguém já passou por algo? abaixo um código funcionando

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body>
<div class="coordenadas">
<span>Coordenadas Google Maps</span>
<label for="lat">Lat:</label>
<input type="text" name="lat" id="lat" value="0" />
<label for="lng">Lng:</label>
<input type="text" name="lng" id="lng" value="0" />
</div>
<div id="map-canvas"/>
</body>
</html>

Abaixo o código adaptado:

  1. <?php
  2. class ObterLatitudeLongitude extends TPage
  3. {
  4.     private $form;
  5.     function __construct()
  6.     {
  7.         parent::__construct();
  8.         parent::include_css('app/control/projeto/geo/style.css'); //local do css
  9.          parent::__construct();
  10.         
  11.         // create the form using TQuickForm class
  12.         $this->form = new TQuickForm('ObterLatitudeLongitude');
  13.         $this->form->class 'tform';
  14.         $this->form->setFormTitle('Obter Latitude Longitude');     
  15.         $this->form->style 'width:100%;height:700px';      
  16.                 
  17.         $div_mapa = new TElement('div');
  18.         $div_mapa->style 'height:100%';
  19.         $div_mapa->id 'mapa';
  20.         
  21.         $div_mapa = new TElement('div');
  22.         $div_mapa->style 'height:100%';
  23.         $div_mapa->{'class'} = 'coordenadas';        
  24.                        
  25.         $span = new TElement('span');
  26.         $mensagem 'Coordenadas Google Maps';
  27.         $span->add($mensagem);
  28.         //campos
  29.         $lat = new TEntry('lat');
  30.         $lat->id 'lat';
  31.         $lat->name 'lat';     
  32.         $lat->value '0';
  33.         
  34.         $lng = new TEntry('Lng');
  35.         $lng->id 'lng';
  36.         $lng->name 'lng';
  37.         $lng->value '0';
  38.                                 
  39.         $this->form->addQuickField('Latitude'$lat,  '40%' );
  40.         $this->form->addQuickField('Longitude'$lng,  '40%' );
  41.         
  42.         $div1 = new TElement('div');       
  43.         $div1->{'id'} = 'map-canvas';  
  44.         $div1->id 'map-canvas';  
  45.         $div1->style 'width:100%;height:250px';         
  46.        
  47.         $this->form->add($div_mapa);  
  48.         $this->form->add($div1);      
  49.         TPage::include_js('https://maps.googleapis.com/maps/api/js?sensor=false');
  50.         TPage::include_js('app/control/projeto/geo/map.js');   //local do .js  
  51.         $container = new TVBox;
  52.         $container->style 'width: 90%';
  53.         $container->add(TPanelGroup::pack('Obter latitude longitude'$this->form));        
  54.         parent::add($container);
  55.     }
  56. }
  57. ?>

Obrigado.

Pacotão Dominando o Adianti Framework 7
O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado! Versão 7.4


Dominando o Adianti 7 Quero me inscrever agora!

Comentários (14)


MC

Boas

Não fiz nada parecido, mas aqui vai uma contribuição de um companheiro nosso.
quem sabe não te ajuda.


www.adianti.com.br/forum/pt/view_801?componente-tgeocode


Abraços
MC

Inspecionando o código, descobri que o frame bloqueia outras requisições de arquivos js para carregar outros js, então reformulei o código e adicionei os outros js que carregavam em tempo de execução, mais ainda não carrega a div com o mapa, abaixo segue o código reescrito, se alguém já se deparou com isso e sabe como resolver, obrigado
  1. <?php
  1. <?php
  2. class ObterLatitudeLongitude extends TPage
  3. {
  4.     private $form;
  5.     function __construct()
  6.     {
  7.         parent::__construct();
  8.         
  9.         TPage::include_js('https://maps.googleapis.com/maps/api/js?sensor=false');
  10.         TPage::include_js('http://www.ciapomares.com.br/Adm5269/geo/pesquisa_coordenadas/js/map.js');
  11.         TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/common.js');
  12.         TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/map.js');
  13.         TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/util.js');
  14.         TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/onion.js');
  15.         TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/controls.js');
  16.         TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/marker.js');
  17.         TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/stats.js');
  18.         parent::include_css('app/control/patrulha/geo/style.css');         
  19.         parent::__construct();
  20.         
  21.         // create the form using TQuickForm class
  22.         $this->form = new TQuickForm('ObterLatitudeLongitude');
  23.         $this->form->class 'tform';
  24.         $this->form->setFormTitle('Obter Latitude Longitude');        
  25.                
  26.         $this->form->style 'width:100%;height:450px';
  27.                        
  28.         //campos
  29.         $lat = new TEntry('lat');
  30.         $lat->id 'lat';
  31.         $lat->name 'lat';     
  32.         $lat->value '0';
  33.         
  34.         $lng = new TEntry('Lng');
  35.         $lng->id 'lng';
  36.         $lng->name 'lng';
  37.         $lng->value '0';                             
  38.         
  39.         $div1 = new TElement('div');       
  40.         $div1->{'id'} = 'map-canvas';  
  41.         $div1->id 'map-canvas';  
  42.         $div1->style 'width:100%;height:300px;border: 2px solid red;padding:2px';  
  43.         $div1->{'class'} = 'map-canvas';   
  44.         
  45.         $this->form->addQuickField('Latitude'$lat,  '40%' );
  46.         $this->form->addQuickField('Longitude'$lng,  '40%' );      
  47.         $this->form->add($div1,  '100%' ); 
  48.       
  49.         $container = new TVBox;
  50.         $container->style 'width: 100%';
  51.         $container->add(TPanelGroup::pack('titulo'$this->form));        
  52.         parent::add($container);   
  53.     }
  54. }
  55. ?>
WP

Miuller

vamos lá eu uso google maps com o Adianti a algum tempo , e sem problemas , mas tem algumas coisas em levar em conta

1- para iniciar de um tamanho fixo de altura (height) para a div do mapa (não em % e sim em pixel)
2- tem que usar a KEY da API para que seja carregado o mapa caso contrario não vai carregar mesmo, exibindo uma mensagem no centro (onde deveria estar o mapa) dizendo que não foi possivel carregar, e no console de desenvolvimento vai aparecer a mensagem dizendo que falta a api.

Os script utilizado é este aqui

<script async defer src="https://maps.googleapis.com/maps/api/js?key=SUA_API_KEY_TEM_QUE_IR_AQUI"></script>

referencia da API (passo inicial)

https://developers.google.com/maps/documentation/javascript/adding-a-google-map
WP

ahh outra coisa que quase me esqueço não use eventos dinamicos , use tudo estatico, para não ter recarga do formulario, si tiver recarga, vai dar erro de carregamento no mapa, sem mencionar, que vai estar somando 1 LOAD a sua KEY API
(veja no faq do google que tem limites de loads do mapa)
MC

Obrigado pela resposta, em outros formulário eu já exibo o mapa, só que nesse exemplo em questão ele não carrega, já setei a lagura e altura em px mas ainda não deu certo.
Não é necessário a api key nesse exemplo, pois utilizo em outro sistema e funciona perfeitamente.
Eu carrego o formulário direto no construtor, então não é necessário colocar métodos estáticos, o código é bem simples, para obter a latitude e a longitude apenas clicando no marcador, creio eu que deve ser um bloqueio do frame pois no código original eu adiciono somente um arquivo js do google e ele se encarrega de carregar outros. abaixo tem um link do exemplo que necessito adaptar
maps.marnoto.com/pesquisacoordenadas/exemplo.html

Obrigado.
WP

Como disse teria que ver no console, peguei seu codigo e fiz um teste aqui veja que tem varios erros


https://i.imgur.com/MUiZtMy.png

inclusive reclamou a API KEY

o problema é que a inclusão dos SCRIPTs esta antes da renderização da DIV, sendo assim causa error, terá que fazer diferente, pois o TPAGE faz isso joga primero os scripts e depois o elementos
MC

Realizei algumas mudanças, porém sem êxito até o momento, poderia testar o código original deste exemplo?


  1. <?php
  2. <!DOCTYPE html>
  3. <html>
  4.       <head>
  5.           <meta charset="utf-8">
  6.        <link rel="stylesheet" type="text/css" href="css/style.css">
  7.        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  8.        <script type="text/javascript">  
  9.        
  10.              var map;
  11.             var marker;
  12.             function initialize() {
  13.                var mapOptions = {
  14.                   center: new google.maps.LatLng(40.601203,-8.668173),
  15.                   zoom9,
  16.                   mapTypeId"roadmap"
  17.                };
  18.                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  19.                google.maps.event.addListener(map"click", function(event) {
  20.                   var lat event.latLng.lat().toFixed(6);
  21.                   var lng event.latLng.lng().toFixed(6);
  22.                   createMarker(latlng);
  23.                   getCoords(latlng);
  24.                });}
  25.             google.maps.event.addDomListener(window"load"initialize);
  26.             function createMarker(latlng){
  27.                if (marker) {
  28.                   marker.setMap(null);
  29.                   marker "";
  30.                }
  31.                marker = new google.maps.Marker({
  32.                   position: new google.maps.LatLng(latlng),
  33.                   draggabletrue,
  34.                   mapmap
  35.                });
  36.                google.maps.event.addListener(marker"dragend", function() {
  37.                   marker.position marker.getPosition();
  38.                   var lat marker.position.lat().toFixed(6);
  39.                   var lng marker.position.lng().toFixed(6);
  40.                   getCoords(latlng);
  41.                });
  42.             }
  43.             
  44.             function getCoords(latlng) {
  45.                var coords_lat document.getElementById("lat");
  46.                coords_lat.value lat;
  47.                var coords_lng document.getElementById("lng");
  48.                coords_lng.value lng;
  49.             }       
  50.        
  51.        </script>
  52.     </head>
  53.     <body>
  54.        <div class="coordenadas">
  55.             <span>Coordenadas Google Maps</span>
  56.             <label for="lat">Lat:</label>
  57.             <input type="text" name="lat" id="lat" value="0" />
  58.             <label for="lng">Lng:</label>
  59.             <input type="text" name="lng" id="lng" value="0" />
  60.         </div>
  61.         <div id="map-canvas"/>
  62.       </body>
  63. </html>
  64. ?>


Obrigado</link>
WP

Claro posso sim, apenas para confirmar , quando tu diz codigo original se refere ao seu primeiro POST ou a este ultimo com o HTML??
MC

Esse ultimo código vc pode salvar com a extensão .html e executar no navegador
WP

Olá Miuller, acabo de testar aqui esse HTML que enviaste por ultimo e tem 2 coisas a fazer para que possa ver o mapa (coisas que mencionei no meu post anterior)

1- dar um tamanho em pixel para a DIV do mapa
2- Incluir a API KEY

veja como ficou


https://i.imgur.com/qHy4h9q.png


abaixo seu código com o ajuste

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AQUI_SUA_API_KEY"></script> <style> #map-canvas { height: 400px; width: 100%; } </style> <script type="text/javascript"> var map; var marker; function initialize() { var mapOptions = { center: new google.maps.LatLng(40.601203,-8.668173), zoom: 9, mapTypeId: "roadmap" }; map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); google.maps.event.addListener(map, "click", function(event) { var lat = event.latLng.lat().toFixed(6); var lng = event.latLng.lng().toFixed(6); createMarker(lat, lng); getCoords(lat, lng); });} google.maps.event.addDomListener(window, "load", initialize); function createMarker(lat, lng){ if (marker) { marker.setMap(null); marker = ""; } marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), draggable: true, map: map }); google.maps.event.addListener(marker, "dragend", function() { marker.position = marker.getPosition(); var lat = marker.position.lat().toFixed(6); var lng = marker.position.lng().toFixed(6); getCoords(lat, lng); }); } function getCoords(lat, lng) { var coords_lat = document.getElementById("lat"); coords_lat.value = lat; var coords_lng = document.getElementById("lng"); coords_lng.value = lng; } </script> </head> <body> <div class="coordenadas"> <span>Coordenadas Google Maps</span> <label for="lat">Lat:</label> <input type="text" name="lat" id="lat" value="0" /> <label for="lng">Lng:</label> <input type="text" name="lng" id="lng" value="0" /> </div> <div id="map-canvas"/> </body> </html>
</link>
MC

Acho que me expressei mau, o código que colei anteriormente é de um exemplo funcional que utilizo há algum tempo em um sistema que fiz no dreamwever, a adaptação para para o frame é que está dando erro e não carrega o mapa, se puder dar uma olhada no código abaixo e testar, fico agradecido, já inspecionei o código e me parece que está tudo ok, só que não carrega o form
  1. <?php
  1. <?php
  2. class ObterLatitudeLongitude extends TPage
  3. {
  4.     private $form;
  5.     function __construct()
  6.     {
  7.         parent::__construct();
  8.         parent::include_css('http://www.ciapomares.com.br/Adm5269/geo/css/style.css');  //tive o cuidado de colocar em um servidor
  9.         parent::__construct();
  10.         $this->form = new TQuickForm('ObterLatitudeLongitude');
  11.         $this->form->class 'tform';
  12.                        
  13.         //campos
  14.         $lat = new TEntry('lat');
  15.         $lat->id 'lat';
  16.         $lat->name 'lat';     
  17.         $lat->value '0';
  18.         
  19.         $lng = new TEntry('Lng');
  20.         $lng->id 'lng';
  21.         $lng->name 'lng';
  22.         $lng->value '0';                             
  23.         
  24.         $div1 = new TElement('div');       
  25.         $div1->{'id'} = 'map-canvas';  
  26.         $div1->id 'map-canvas';  
  27.         $div1->style 'width:100%;height:300px;border: 2px solid red;padding:2px';  //aqui defino o tamanho do mapa
  28.          
  29.         $this->form->addQuickField('Latitude'$lat,  '40%' );
  30.         $this->form->addQuickField('Longitude'$lng,  '40%' );      
  31.         
  32.         $panel = new TPanelGroup('Mapa');
  33.         $panel->add($div1); //adicionei o mapa no panel para diferenciar do form
  34.         $this->form->add($panel);   
  35.       
  36.         $container = new TVBox;
  37.         $container->style 'width: 100%;height: 400px';
  38.         $container->add(TPanelGroup::pack('Obter latitude longitude no mapa'$this->form));        
  39.         parent::add($container);           
  40.         TPage::include_js('https://maps.googleapis.com/maps/api/js?sensor=false');
  41.         TPage::include_js('https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap');
  42.         TPage::include_js('http://www.ciapomares.com.br/Adm5269/geo/js/map.js');    
  43.     }
  44. }
  45. ?>

Obrigado novamente
WP

é ainda esta errado, fiz a correção para você , segue abaixo o codigo PHP e mais abaixo o codigo JAVASCRIPT para colocar no arquivo >>> www.ciapomares.com.br/Adm5269/geo/js/map.js

  1. <?php
  2. class ObterLatitudeLongitude extends TPage
  3. {
  4. private $form;
  5.     function __construct()
  6.     {
  7.         parent::__construct();
  8.         parent::include_css('http://www.ciapomares.com.br/Adm5269/geo/css/style.css');  //tive o cuidado de colocar em um servidor
  9.         parent::__construct();
  10.         $this->form = new TQuickForm('ObterLatitudeLongitude');
  11.         $this->form->class 'tform';
  12.                        
  13.         //campos
  14.         $lat = new TEntry('lat');
  15.         $lat->id 'lat';
  16.         $lat->name 'lat';     
  17.         $lat->value '0';
  18.         
  19.         $lng = new TEntry('Lng');
  20.         $lng->id 'lng';
  21.         $lng->name 'lng';
  22.         $lng->value '0';                             
  23.         
  24.         $div1 = new TElement('div');       
  25.         $div1->{'id'} = 'map-canvas';  
  26.         $div1->id 'map-canvas';  
  27.         $div1->style 'width:100%;height:300px;border: 2px solid red;padding:2px';  //aqui defino o tamanho do mapa
  28.          
  29.         $this->form->addQuickField('Latitude'$lat,  '40%' );
  30.         $this->form->addQuickField('Longitude'$lng,  '40%' );      
  31.         
  32.         $panel = new TPanelGroup('Mapa');
  33.         $panel->add($div1); //adicionei o mapa no panel para diferenciar do form
  34.         $this->form->add($panel);   
  35.       
  36.         $container = new TVBox;
  37.         $container->style 'width: 100%;height: 400px';
  38.         $container->add(TPanelGroup::pack('Obter latitude longitude no mapa'$this->form));        
  39.         parent::add($container);           
  40.         TPage::include_js('http://www.ciapomares.com.br/Adm5269/geo/js/map.js');
  41.         TPage::include_js('https://maps.googleapis.com/maps/api/js?sensor=false&key=SUA_KEY_API&callback=initialize');
  42.     }
  43. }
  44. ?>


var map; var marker; function initialize() { var mapOptions = { center: new google.maps.LatLng(40.601203, -8.668173), zoom: 9, mapTypeId: "roadmap" }; map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); google.maps.event.addListener(map, "click", function (event) { var lat = event.latLng.lat().toFixed(6); var lng = event.latLng.lng().toFixed(6); createMarker(lat, lng); getCoords(lat, lng); }); } function createMarker(lat, lng) { if (marker) { marker.setMap(null); marker = ""; } marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), draggable: true, map: map }); google.maps.event.addListener(marker, "dragend", function () { marker.position = marker.getPosition(); var lat = marker.position.lat().toFixed(6); var lng = marker.position.lng().toFixed(6); getCoords(lat, lng); }); } function getCoords(lat, lng) { $('input[name="lat"]').val(lat); $('input[name="Lng"]').val(lng); }
WP

Observações sobre erros

1- estavas usando no javascript (getElementById) o ADIANTI gera IDs unicos e aleatorios para os inputs , use com JQUERY mesmo pegando pelo nome (esta no codigo javascript que te passei na função getCoords)
2- estavas incluindo 2 vezes a API do Google Maps (não pode apenas deve ser inserida 1 vez, e na mesma você informa os parametros Linha 41 do codigo PHP que te passei


Compare o que te passei com o que você me passou e vai ver as pequenas correções que foi feito para que funcione

Abraços
MC

Funcionou perfeitamente, de agora em diante vou pegar os atributos pelo 'name', obrigado.
Vou postar o código .css que ficou faltando abaixo para caso alguém necessite, e o link do desenvolvedor do exemplo,

<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
label {
margin-left: 15px;
}
#map-canvas {
height: 95%;
width: 100%;
}
#iw_container .iw_title {
font-size: 16px;
font-weight: bold;
}
.iw_content {
padding: 15px 15px 15px 0;
}
</style>

Link do desenvolvedor maps.marnoto.com/pesquisacoordenadas/exemplo.html

Obrigado novamente, abraços