Como usar a latitude e a longitude através da API da google?

weslleypgomes · Dezembro 3, 2014

Bom dia, estou fazendo um projeto e consegui inserir a API da Google no meu projeto e ele carrega todos os dados do endereço perfeitamente, sendo que eu preciso que ele carregue junto, os dados da latitude e longitude, teriam como me ajudar?

Código do maps:

$(document).ready(function(){
$('head').append('<script src="js/mask.js" type="text/javascript"></script>');
})

var last_cep = 0;
var address;
var lat;
var lng;
var wsconf;
function wscep(conf)
{
//parametros padrão true
if(!conf){
conf = {
'auto': true,
'map' : '',
'wsmap' : ''
};
}
wsconf = conf;
//evento keyup no campo cep opcional
if(wsconf.auto == true){
$('#cep').live('keyup',function(){
var cep = $.trim($('#cep').val()).replace('_','');
if(cep.length >= 9){
if(cep != last_cep){
busca();
}
}
});
}else{
var btn_busca = '<button class="btn btn_handler" type="button">Busca</button>';
$('form').append(btn_busca)
$('.btn_handler').live('click',function(){
busca();
})
}
$('#cep').mask('99999-999');
}
//busca o cep
function busca(){
var cep = $.trim($('#cep').val());
var url = 'http://clareslab.com.br/ws/cep/json/'+cep+'/';
if ($.browser.msie) {
var url = 'ie.php';
}
$.post(url,{cep:cep},
function (rs) {
rs = $.parseJSON(rs);
if(rs != 0){
address = rs.endereco + ', ' + rs.bairro + ', ' + rs.cidade + ', ' + ', ' + rs.uf;
if(wsconf.map != '' ){
setMap(wsconf.map);
}
$('#rua').val(rs.endereco);
$('#bairro').val(rs.bairro);
$('#cidade').val(rs.cidade);
$('#uf').val(rs.uf);
$('#cep').removeClass('invalid');
$('#num').focus();
$('#num').live('change',function(){
address = rs.endereco + ', ' + $('#num').val() + ', ' + rs.bairro + ', ' + rs.cidade + ', ' + ', ' + rs.uf;
if(wsconf.map != ''){
setMap(wsconf.map);
}
})
last_cep = cep;
}
else{
$('#cep').addClass('invalid');
$('#cep').focus();
last_cep = 0;
}
})
}

function wsmap(cep,num,elm)
{
var url = 'http://clareslab.com.br/ws/cep/json/'+cep+'/';
if ($.browser.msie) {
var url = 'ie.php';
}
$.post(url,{cep:cep},
function (rs) {
rs = $.parseJSON(rs);
if(rs != 0){
address = rs.endereco + ', ' + num + ', ' + rs.bairro + ', ' + rs.cidade + ', ' + ', ' + rs.uf;
setMap(elm);
}
})
}
function setMap(elm)
{
GMaps.geocode({
address: address,
callback: function(results, status) {
if (status == 'OK') {
//console.log(elm);
$('#'+elm).show();
var latlng = results[0].geometry.location;
lat = latlng.lat();
lng = latlng.lng()
map = new GMaps({
div: elm,
lat: lat,
lng: lng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
zoom: 14
})
map.addMarker({
lat: lat,
lng: lng,
title: address
});
map.setCenter(lat, lng);
}
}
});

}

código do formulário:

<?php
session_start();
include "controle/functions.php";
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sistema Acadêmico - Painel de Cadastro</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href="css/bootstrap.min.css" rel="stylesheet"type="text/css" />
<link href="css/background.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>


<script src="http://code.jquery.com/jquery-1.7.1.min.js"type="text/javascript"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/gmaps.js" type="text/javascript"></script>
<script src="js/cep_clean.js" type="text/javascript"></script>

<script>
$(function(){
wscep({'auto':true, 'map':'map1'})
})
</script>


</head>

<body>
<div class="container form-sati" id="container">
<div class="row clearfix">
<div class="col-md-12 column">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"> Bem Vindo(a) <?php echo $logado2;?></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="controle/logout.php">Logout</a>
</li>
</ul>
</div>
</nav>
<br /><br /><br /><br />

<div class="jumbotron form-sati2 well">
<div class="control-group" align="center">
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">TURISMO</button>
</div></br>
<div class="row">
<div class="col-md-6">
<form role="form" action="controle/cad_turismo.php" enctype="multipart/form-data" method="post">
<div class="control-group">
<label for="cep" class="control-label" >Cep</label>
<input type="text" class="form-control" id="cep" placeholder="Digite o cep" name="cep" maxlength="9">
</div>
<div class="control-group">
<label for="rua" class="control-label">Rua</label>
<input type="text" class="form-control" id="rua" placeholder="Digite o rua" name="rua">
</div>
<div class="control-group">
<label for="num" class="control-label">Número</label>
<input type="text" class="form-control" id="num" placeholder="Digite o número" name="num">
</div>
<div class="control-group">
<label for="complemento" class="control-label">Complemento</label>
<input type="text" class="form-control" id="complemento" placeholder="Digite o complemento" name="complemento">
</div>
<div class="control-group">
<label for="bairro" class="control-label">Bairro</label>
<input type="text" class="form-control" id="bairro" placeholder="Digite o bairro" name="bairro">
</div>
<div class="control-group">
<label for="cidade" class="control-label">Cidade</label>
<input type="text" class="form-control" id="cidade" placeholder="Digite a cidade" name="cidade">
</div>
<div class="control-group">
<label for="uf" class="control-label">UF</label>
<input type="text" class="form-control" id="uf" placeholder="Digite a UF" name="uf">
</div>
<div class="control-group">
<label for="latitudelongitude" class="control-label">Latitude/Longitude</label>
<input type="text" class="form-control" id="latitude" placeholder="Digite a latitude" name="latitude"></p>
<input type="text" class="form-control" id="longitude" placeholder="Digite a longitude" name="longitude">
</div>
<div class="control-group">
<label for="acesso" class="control-label">Acesso</label>
<input type="text" class="form-control" id="acesso" placeholder="Digite o Acesso" name="acesso">
</div>
<div class="control-group">
<label for="historia" class="control-label">História</label>
<textarea class="form-control" id="historia" placeholder="Digite a História" name="historia"></textarea>
</div>
<div class="control-group">
<label for="file" class="control-label">Imagem</label>
<input type="file" class="btn btn-block btn-xs" id="fileUpload" name="fileUpload">
</div>
<div class="control-group">
<button type="submit" style="margin-top: 3%" class="btn btn-primary btn-lg btn-block">Cadastrar</button>
</div>
</form>
</div>
<div class="col-md-6"></br>
<p class="alert alert-info btn-lg"align="center"> Localização Google Maps </p>
<div class="maps" id="map1"></div>
</div>
</div>
</div>

</div>
</div>
</div>
</body>
</html>

Agradeço a ajuda de todos.

Editado Dezembro 3, 2014 por weslleypgomes

Rodrigo Borges · Fevereiro 23, 2016

Olá, uma alternativa é utilizar uma tabela de coordenadas com latitude e longitude. Segue uma opção

Entrar

Como usar a latitude e a longitude através da API da google?

Pergunta

weslleypgomes

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Rodrigo Borges

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades