Tenho um projeto no Google Maps Javascript que envolve um bocado de funções interligadas. No momento, eu tenho 2 inputs text recebendo Latitude e Longitude do clique do meu mouse na div do mapa do Google Maps, em cada clique ele recebe normalmente as coordenadas, o problema é que eu os recebo apenas em decimal (ex: 30.049402, 56.055040) e gostaria de receber eles em GMS (graus minutos segundos) também.
No momento eu estou conseguindo mostrar nesses 2 inputs os caracteres do GMS (ex: S1º2'3") mas com os valor em NaN.
Queria saber o que estou fazendo de errado, visto que depois de alguns refresh's ele até consegue converter correto, mas bastou atualizar a página e volta para os valores NaN.
Meu objetivo final seria deixar igual ao mapa existente no site: GPS Converter, pegando as duas coordenadas com o clique.
Abaixo segue a imagem dos resultados e a parte do script:
var lat = document.getElementById("latMap").value;
var lng = document.getElementById("lngMap").value;
document.getElementById('converter').addEventListener('click', function() {
ddToDms(lat, lng);
});
// conversion string in DD to DMS.
function ddToDms(lat, lng) {
var latResult, lngResult, dmsResult;
lat = parseFloat(lat);
lng = parseFloat(lng);
latResult = (lat >= 0)? 'N' : 'S';
// Call to getDms(lat) function for the coordinates of Latitude in DMS.
// The result is stored in latResult variable.
latResult += getDms(lat);
lngResult = (lng >= 0)? 'L' : 'O';
// Call to getDms(lng) function for the coordinates of Longitude in DMS.
// The result is stored in lngResult variable.
lngResult += getDms(lng);
document.getElementById("latMap").value = latResult;
document.getElementById("lngMap").value = lngResult;
}
function getDms(val) {
var valDeg, valMin, valSec, result;
val = Math.abs(val);
valDeg = Math.floor(val);
result = valDeg + "º";
valMin = Math.floor((val - valDeg) * 60);
result += valMin + "'";
valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;
result += valSec + '"';
return result;
}
<div id="row" class="row">
<div class="col-md-12">
<label for="name"><h1 id="title">Latitude:</h1></label></font>
<input id="latMap" class="form-control"/>
</div>
<div class="col-md-12">
<br>
<label for="name"><h1 id="title">Longitude:</h1></label>
<input id="lngMap" class="form-control" />
</div>
</div>
<button id="converter" class="btn btn-primary">
<i class="fas fa-redo-alt"></i> GMS
</button>
UPDATE: Abaixo o script completo do projeto.
<!-- script da função do google maps api !-->
<script>
/* Variaveis do mapa e alternar entre matriz\filial */
var matriz = {lat: -30.967885713671667, lng: -54.67343294672901, zoom:21};
var filial = {lat: -30.975773, lng:-54.643425, zoom:18};
var map;
var initMap;
// Função de centralizar
function CenterControl(controlDiv, map) {
// Setar CSS para as bordas do painel
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Clique para ir para a Matriz';
controlDiv.appendChild(controlUI);
// Setar CSS para o interior do painel
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Matriz';
controlUI.appendChild(controlText);
// Função do click para alternar foco para a matriz
controlUI.addEventListener('click', function() {
map.setCenter(matriz);
});
}
// Função para centralizar mapa 2
function CenterControl2(controlDiv2, map) {
// Setar CSS para as bordas do painel
var controlUI2 = document.createElement('div2');
controlUI2.style.backgroundColor = '#fff';
controlUI2.style.border = '14px solid #fff';
controlUI2.style.borderRadius = '3px';
controlUI2.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI2.style.cursor = 'pointer';
controlUI2.style.marginBottom = '22px';
controlUI2.style.marginLeft = '7px';
controlUI2.style.textAlign = 'center';
controlUI2.title = 'Clique para ir para a Filial';
controlDiv2.appendChild(controlUI2);
// Setar CSS para o interior do painel
var controlText2 = document.createElement('div2');
controlText2.style.color = 'rgb(25,25,25)';
controlText2.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText2.style.fontSize = '16px';
controlText2.style.lineHeight = '38px';
controlText2.style.paddingLeft = '5px';
controlText2.style.paddingRight = '5px';
controlText2.style.padding = '50px 0px 0px 0px';
controlText2.innerHTML = 'Filial';
controlUI2.appendChild(controlText2);
// Função para centralizar mapa na Filial
controlUI2.addEventListener('click', function() {
map.setCenter(filial);
});
}
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
//Função iniciar API do Google Maps no Engenho Coradini
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-30.975773, -54.643425),
zoom: 18,
disableDoubleClickZoom: true
});
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Planta
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-30.978666922597185, -54.64720201485761),
new google.maps.LatLng(-30.97247385563734, -54.64060378076283));
// Imagem da planta baixa da Filial
var srcImage = 'img/' +
'planta.png';
// O USGS Overlay customizado contém um objeto dentro da USGS image,
// o bounds dessa imagem, e a referência para o mapa.
overlay = new USGSOverlay(bounds, srcImage, map);
/** @constructor */
function USGSOverlay(bounds, image, map) {
// Inicializar todas as propriedades.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define uma propriedade para segurar a imagem na div.
// Cria essa div pronta para receber na variável onAdd()
this.div_ = null;
// Chamamos a função principal setMap para aplicar essa Overlay.
this.setMap(map);
};
/**
* onAdd é chamado quando os pane's do mapa estão prontos e o overlay foi
* carregado no mapa.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Cria o elemento img e anexa na div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Adiciona o elemento para o "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
//Verificar se o navegador é internet explorer para desabilitar ferramenta de calculo
CheckIE();
function CheckIE()
{
var Browser;
Browser = navigator.userAgent;
if (Browser.indexOf("Trident") == -1)
{
//Variavel para calculo de distancia
var measureTool = new MeasureTool(map, {
showSegmentLength: true,
unit: MeasureTool.UnitTypeId.METRIC
});
}
};
USGSOverlay.prototype.draw = function() {
// Usa-se sul-oeste e norte-leste
// coordenadas de overlay para posicionar na posição e tamanho correto.
// Requisitar a projeção do overlay.
var overlayProjection = this.getProjection();
// Requisitar a coordenada sul-oeste e o norte-leste do overlay
// usando LatLngs e convertendo para coordenadas pixelares.
// Usando as coordenadas para redimencionar a div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// redimencionar a div da imagem para posicionar nas dimensões indicadas.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
// O metodo onRemove() irá ser chamada automaticamente do API se
// setar o overlay do mapa para 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
google.maps.event.addDomListener(window, 'load', initMap);
// Planta
var bounds2 = new google.maps.LatLngBounds(
new google.maps.LatLng(-30.968439407164297, -54.67410671709331),
new google.maps.LatLng(-30.96703360588649, -54.672603338960926));
// Imagem da planta baixa da Matriz
var srcImage2 = 'img/' +
'planta2.jpg';
// O USGS Overlay customizado contém um objeto dentro da USGS image,
// o bounds dessa imagem, e a referência para o mapa.
overlay = new USGSOverlay(bounds2, srcImage2, map);
/** @constructor */
function USGSOverlay(bounds2, image, map) {
// Inicializar todas as propriedades.
this.bounds_ = bounds2;
this.image_ = image;
this.map_ = map;
// Define uma propriedade para segurar a imagem na div.
// Cria essa div pronta para receber na variável onAdd()
this.div_ = null;
// Chamamos a função principal setMap para aplicar essa Overlay.
this.setMap(map);
};
/**
* onAdd é chamado quando os pane's do mapa estão prontos e o overlay foi
* carregado no mapa.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Cria o elemento img e anexa na div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Adiciona o elemento para o "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
// Usa-se sul-oeste e norte-leste
// coordenadas de overlay para posicionar na posição e tamanho correto.
// Requisitar a projeção do overlay.
var overlayProjection = this.getProjection();
// Requisitar a coordenada sul-oeste e o norte-leste do overlay
// usando LatLngs e convertendo para coordenadas pixelares.
// Usando as coordenadas para redimencionar a div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// redimencionar a div da imagem para posicionar nas dimensões indicadas.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
// O metodo onRemove() irá ser chamada automaticamente do API se
// setar o overlay do mapa para 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
google.maps.event.addDomListener(window, 'load', initMap);
//Variaveis de alternancia de foco matriz/filial
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
var centerControlDiv2 = document.createElement('div2');
var centerControl2 = new CenterControl2(centerControlDiv2, map);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
centerControlDiv2.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv2);
// Variavel para abrir a caixa de informação contendo a latitude e longitude
var infoWindow = new google.maps.InfoWindow;
// Variavel de localização e marcação de pontos em tempo real no mapa temporariamente
var geocoder = new google.maps.Geocoder;
// Função criar marcador temporário ao clicar no botão 'Procurar' com as coordenadas preenchidas
document.getElementById('busca').addEventListener('click', function() {
geocodeLatLng(geocoder, map, infoWindow);
});
//Função procurar e marcar localizações no mapa usando o campo latitude e longitude
function geocodeLatLng(geocoder, map, infowindow) {
var input1 = document.getElementById('latMap').value;
var input2 = document.getElementById('lngMap').value;
var latlng = {lat: parseFloat(input1), lng: parseFloat(input2)};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[1]) {
map.setZoom(19);
map.setCenter(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: 'img/green-dot.png'
});
infowindow.setContent('Marcador temporário');
infowindow.open(map, marker);
} else {
window.alert('Nenhum resultado foi encontrado');
}
} else {
window.alert('Geolocalização falhou devido a: ' + status);
}
marker.addListener("click", function(){
marker.setMap(null);
window.open('equipamentos.php?id=1', '_blank', "height=800, width=1000, scrollbars=yes").focus();
});
});
}
var timeoutId = 0;
document.getElementById('converter').addEventListener('click', function() {
var lat = document.getElementById("latMap").value;
var lng = document.getElementById("lngMap").value;
ddToDms(lat, lng);
});
// conversion string in DD to DMS.
function ddToDms(lat, lng) {
var latResult, lngResult, dmsResult;
lat = parseFloat(lat);
lng = parseFloat(lng);
latResult = (lat >= 0)? 'N' : 'S';
// Call to getDms(lat) function for the coordinates of Latitude in DMS.
// The result is stored in latResult variable.
latResult += getDms(lat);
lngResult = (lng >= 0)? 'L' : 'O';
// Call to getDms(lng) function for the coordinates of Longitude in DMS.
// The result is stored in lngResult variable.
lngResult += getDms(lng);
document.getElementById("latMap").value = latResult;
document.getElementById("lngMap").value = lngResult;
}
function getDms(val) {
var valDeg, valMin, valSec, result;
val = Math.abs(val);
valDeg = Math.floor(val);
result = valDeg + "º";
valMin = Math.floor((val - valDeg) * 60);
result += valMin + "'";
valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;
result += valSec + '"';
return result;
}
// Função de pegar as coordenadas com o clique no mapa
google.maps.event.addListener(map, 'click', function(event) {
document.getElementById('latMap').value = event.latLng.lat();
document.getElementById('lngMap').value = event.latLng.lng();
});
function mapDivClicked (event) {
var target = document.getElementById('map'),
posx = event.pageX - target.offsetLeft,
posy = event.pageY - target.offsetTop,
bounds = map.getBounds(),
neLatlng = bounds.getNorthEast(),
swLatlng = bounds.getSouthWest(),
startLat = neLatlng.latitude(),
endLng = neLatlng.longitude(),
endLat = swLatlng.latitude(),
startLng = swLatlng.longitude();
document.getElementById('posX').value = posx;
document.getElementById('posY').value = posy;
document.getElementById('latitude').value = startLat + ((posy/350) * (endLat - startLat));
document.getElementById('longitude').value = startLng + ((posx/500) * (endLng - startLng));
};
// Função para pegar e executar formulário XML para pegar ID no banco
downloadUrl('resultado.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var link = markerElem.getAttribute('link');
var descricao = markerElem.getAttribute('descricao');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
//Função abrir descrição do banco de dados na caixa de informações dos marcadores fixos
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = descricao
infowincontent.appendChild(text);
var icon = customLabel[descricao] || {};
//Função posicionar marcadores fixos baseados nos dados no BD
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
optimized: false,
zIndex: 1
});
// Função de abrir infobox + link para listagem de equipamento dentro do marcador fixado do BD
marker.addListener('mouseover', function() {
window.name = "principal";
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
marker.addListener('click', function(){
// Delay de 2 segundos para abrir a janela contendo os equipamentos baseados na ID ligadas na foreign key do BD
setTimeout(function(){
window.open(link, '_blank', "height=800, width=1000, scrollbars=yes").focus();
}, 700);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
Na parte do PHP do projeto, não tem nenhuma função ou algo que chame a função. Todas são chamadas do javascript.