Obter latitude longitude de um marcador googlemaps

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

Miuller De Faria Castro 09/12/2017 (há 6 anos)

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:

<?php
class ObterLatitudeLongitude extends TPage
{
private $form;
function __construct()
{
parent::__construct();
parent::include_css('app/control/projeto/geo/style.css'); //local do css
parent::__construct();
// create the form using TQuickForm class
$this->form = new TQuickForm('ObterLatitudeLongitude');
$this->form->class = 'tform';
$this->form->setFormTitle('Obter Latitude Longitude');
$this->form->style = 'width:100%;height:700px';
$div_mapa = new TElement('div');
$div_mapa->style = 'height:100%';
$div_mapa->id = 'mapa';
$div_mapa = new TElement('div');
$div_mapa->style = 'height:100%';
$div_mapa->{'class'} = 'coordenadas';
$span = new TElement('span');
$mensagem = 'Coordenadas Google Maps';
$span->add($mensagem);
//campos
$lat = new TEntry('lat');
$lat->id = 'lat';
$lat->name = 'lat';
$lat->value = '0';
$lng = new TEntry('Lng');
$lng->id = 'lng';
$lng->name = 'lng';
$lng->value = '0';
$this->form->addQuickField('Latitude', $lat, '40%' );
$this->form->addQuickField('Longitude', $lng, '40%' );
$div1 = new TElement('div');
$div1->{'id'} = 'map-canvas';
$div1->id = 'map-canvas';
$div1->style = 'width:100%;height:250px';
$this->form->add($div_mapa);
$this->form->add($div1);
TPage::include_js('https://maps.googleapis.com/maps/api/js?sensor=false');
TPage::include_js('app/control/projeto/geo/map.js'); //local do .js
$container = new TVBox;
$container->style = 'width: 90%';
$container->add(TPanelGroup::pack('Obter latitude longitude', $this->form));
parent::add($container);
}
}
?>

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

Marco AR Campos 09/12/2017 (há 6 anos)

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

Miuller De Faria Castro - AUTOR DO POST 10/12/2017 (há 6 anos)

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

<?php

<?php
class ObterLatitudeLongitude extends TPage
{
private $form;
function __construct()
{
parent::__construct();
TPage::include_js('https://maps.googleapis.com/maps/api/js?sensor=false');
TPage::include_js('http://www.ciapomares.com.br/Adm5269/geo/pesquisa_coordenadas/js/map.js');
TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/common.js');
TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/map.js');
TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/util.js');
TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/onion.js');
TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/controls.js');
TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/marker.js');
TPage::include_js('https://maps.googleapis.com/maps-api-v3/api/js/31/1/intl/pt_br/stats.js');
parent::include_css('app/control/patrulha/geo/style.css');
parent::__construct();
// create the form using TQuickForm class
$this->form = new TQuickForm('ObterLatitudeLongitude');
$this->form->class = 'tform';
$this->form->setFormTitle('Obter Latitude Longitude');
$this->form->style = 'width:100%;height:450px';
//campos
$lat = new TEntry('lat');
$lat->id = 'lat';
$lat->name = 'lat';
$lat->value = '0';
$lng = new TEntry('Lng');
$lng->id = 'lng';
$lng->name = 'lng';
$lng->value = '0';
$div1 = new TElement('div');
$div1->{'id'} = 'map-canvas';
$div1->id = 'map-canvas';
$div1->style = 'width:100%;height:300px;border: 2px solid red;padding:2px';
$div1->{'class'} = 'map-canvas';
$this->form->addQuickField('Latitude', $lat, '40%' );
$this->form->addQuickField('Longitude', $lng, '40%' );
$this->form->add($div1, '100%' );
$container = new TVBox;
$container->style = 'width: 100%';
$container->add(TPanelGroup::pack('titulo', $this->form));
parent::add($container);
}
}
?>

WP

Willian Padilha 11/12/2017 (há 6 anos)

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

Willian Padilha 11/12/2017 (há 6 anos)

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

Miuller De Faria Castro - AUTOR DO POST 12/12/2017 (há 6 anos)

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

Willian Padilha 12/12/2017 (há 6 anos)

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

Miuller De Faria Castro - AUTOR DO POST 12/12/2017 (há 6 anos)

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

<?php
<!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"></script>
<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>
?>

Obrigado</link>

WP

Willian Padilha 12/12/2017 (há 6 anos)

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

Miuller De Faria Castro - AUTOR DO POST 12/12/2017 (há 6 anos)

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

WP

Willian Padilha 13/12/2017 (há 6 anos)

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

Miuller De Faria Castro - AUTOR DO POST 13/12/2017 (há 6 anos)

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

<?php

<?php
class ObterLatitudeLongitude extends TPage
{
private $form;
function __construct()
{
parent::__construct();
parent::include_css('http://www.ciapomares.com.br/Adm5269/geo/css/style.css'); //tive o cuidado de colocar em um servidor
parent::__construct();
$this->form = new TQuickForm('ObterLatitudeLongitude');
$this->form->class = 'tform';
//campos
$lat = new TEntry('lat');
$lat->id = 'lat';
$lat->name = 'lat';
$lat->value = '0';
$lng = new TEntry('Lng');
$lng->id = 'lng';
$lng->name = 'lng';
$lng->value = '0';
$div1 = new TElement('div');
$div1->{'id'} = 'map-canvas';
$div1->id = 'map-canvas';
$div1->style = 'width:100%;height:300px;border: 2px solid red;padding:2px'; //aqui defino o tamanho do mapa
$this->form->addQuickField('Latitude', $lat, '40%' );
$this->form->addQuickField('Longitude', $lng, '40%' );
$panel = new TPanelGroup('Mapa');
$panel->add($div1); //adicionei o mapa no panel para diferenciar do form
$this->form->add($panel);
$container = new TVBox;
$container->style = 'width: 100%;height: 400px';
$container->add(TPanelGroup::pack('Obter latitude longitude no mapa', $this->form));
parent::add($container);
TPage::include_js('https://maps.googleapis.com/maps/api/js?sensor=false');
TPage::include_js('https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap');
TPage::include_js('http://www.ciapomares.com.br/Adm5269/geo/js/map.js');
}
}
?>

Obrigado novamente

WP

Willian Padilha 13/12/2017 (há 6 anos)

é 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

<?php
class ObterLatitudeLongitude extends TPage
{
private $form;
function __construct()
{
parent::__construct();
parent::include_css('http://www.ciapomares.com.br/Adm5269/geo/css/style.css'); //tive o cuidado de colocar em um servidor
parent::__construct();
$this->form = new TQuickForm('ObterLatitudeLongitude');
$this->form->class = 'tform';
//campos
$lat = new TEntry('lat');
$lat->id = 'lat';
$lat->name = 'lat';
$lat->value = '0';
$lng = new TEntry('Lng');
$lng->id = 'lng';
$lng->name = 'lng';
$lng->value = '0';
$div1 = new TElement('div');
$div1->{'id'} = 'map-canvas';
$div1->id = 'map-canvas';
$div1->style = 'width:100%;height:300px;border: 2px solid red;padding:2px'; //aqui defino o tamanho do mapa
$this->form->addQuickField('Latitude', $lat, '40%' );
$this->form->addQuickField('Longitude', $lng, '40%' );
$panel = new TPanelGroup('Mapa');
$panel->add($div1); //adicionei o mapa no panel para diferenciar do form
$this->form->add($panel);
$container = new TVBox;
$container->style = 'width: 100%;height: 400px';
$container->add(TPanelGroup::pack('Obter latitude longitude no mapa', $this->form));
parent::add($container);
TPage::include_js('http://www.ciapomares.com.br/Adm5269/geo/js/map.js');
TPage::include_js('https://maps.googleapis.com/maps/api/js?sensor=false&key=SUA_KEY_API&callback=initialize');
}
}
?>

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

Willian Padilha 13/12/2017 (há 6 anos)

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

Miuller De Faria Castro - AUTOR DO POST 13/12/2017 (há 6 anos)

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

Novo Comentário