Oi pessoal!
Tô lendo a API do Geocoding mas não entendi como posso usar isto na JSP, alguém tém algum material melhor para pegar as dicas?
http://code.google.com/intl/pt-BR/apis/maps/documentation/geocoding/
Nas pesquisas achei isto tb http://www.lamatek.com/GoogleMaps/, taglib própria para trabalhar com mapas, alguém recomenda?
O que eu queria no momento era clicar num link que envia a id do imóvel e mostrar na JSP o mapa de onde ele está localizado, nada muito complicado.
Abraço!
Eu uso geocoding em um projeto meu, porém usando uma implementação de GIS da própria empresa. Tudo que eu faço é fazer as chamadas ao sistema usando EJBs que retornam as informações. Algumas são retornadas via JSON e outras, no caso dos mapas, usando byte que é retornado via InputStreamDownload.
O que você realmente precisa, Guevara?
Abraços
Beleza Garcia? =)
O que eu queria fazer era ao clicar nesta chamada:
<display:column title="Mapa"><a href="index/maps?idImovel=${imovel.idImovel}">visualizar</a></display:column>Abrisse o mapa do imóvel na página maps.jsp, já criei toda a lógica, só falta a parte da apresentação na JSP mesmo, tô tentando xurrupiar o código dos exemplos mas não tá funcionando:
http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/examples/index.html
http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/examples/geocoding-simple.html
Esse exemplo ai não tá rodando aqui.
A ID do Google já peguei e já está na JSP, só falta enfiar as EL em algum lugar lá para que carregue o mapa. :lol:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=minhakey"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
</head>
<body id="home" onload="initialize()" onunload="GUnload()">
<div id="tudo">
<jsp:include page="/WEB-INF/jsp/layouts/header.jsp"></jsp:include>
<jsp:include page="/WEB-INF/jsp/layouts/menu.jsp"></jsp:include>
<div id="conteudo" align="center">
<div>
<div>
<input id="address" type="text" value="${imovel.endereco },${imovel.bairro},${imovel.cidade}">
</div>
<div id="map_canvas" style="width:100%; height:90%"></div>
</div>
</div>
</div>
</body>Algo assim. Só que não sou bom com javascript pra adaptar. hehe
Abraço!!!
Detalhe:[quote] New! The Google Geocoding API has been significantly upgraded and enhanced. This document discusses this newest version of the Geocoding API (V3). Note that the legacy Geocoding API V2 has been deprecated. Users of that service should upgrade to this version.[/quote]
http://code.google.com/intl/pt-BR/apis/maps/documentation/geocoding/
Não entendi nada sobre o código que está no link.
Não está funcionando? E qual o erro? Algum comportamento? Analisando o código visualmente me parece correto.
Não carrega nem o mapa que está setado na linha:
var latlng = new google.maps.LatLng(-34.397, 150.644);Pelo menos isso deveria abrir, mesmo que o meu código não esteja correto para chamar o mapa do imóvel.
O pior é que o Geocoding está na versão 3 e não acho nenhuma documentação mostrando como usar isso, o site deles detalha o que faz cada parâmetro, apenas especificando a api, mas não dá nenhum exemplo de como implementar aquilo, ou seja, salci-fufu, pegadinha do Mallandro! =)
Uma coisa que você pode fazer é usar o firefox com a extensão Firebug. Com ela você consegue monitorar se algum arquivo não pode ser baixado do site, quais arquivos foram carregados (util para ver se o jS do google foi carregado corretamente) e também você pode fazer um debug de todas as chamadas Ajax.
- pesquisando achei isso: http://code.google.com/intl/pt-BR/apis/maps/documentation/premier/guide.html#URLSigning
Consegui carregar o mapa do Rio de Janeiro:
Com este código:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=minhakey"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function inicializa() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mapa_base"));
map.setCenter(new GLatLng(-22.9035393, -43.2095869), 13);
geocoder = new GClientGeocoder();
}
}
</script>
</head>
<body id="home" onload="inicializa()" onunload="GUnload()">
<div id="tudo">
<jsp:include page="/WEB-INF/jsp/layouts/header.jsp"></jsp:include>
<jsp:include page="/WEB-INF/jsp/layouts/menu.jsp"></jsp:include>
<div id="conteudo" align="center">
<div>
<div>
<input id="address" type="text" value="${imovel.endereco },${imovel.bairro},${imovel.cidade}">
</div>
<div id="mapa_base" style="width: 500px; height: 300px"></div>
</div>
</div>
</div>
</body>Só falta fazer ele carregar o mapa com o endereço que está aparecendo na JSP. =)
Pelo que entendi na documentação você precisa primeiro fazer uma busca passando o endereço + cidade ou palavras chave para buscar as coordenadas, e a partir daí sim com as coordenadas usar esse método que você está usando.
O endereço do serviço é http://maps.google.com/geo?key=minha-key&q=seu-endereco&sensor=false&output=(csv ou xml ou json)
O visual é este pessoal:
Mas o código ainda não está como deveria, pois ao carregar a jsp vai pro rio de janeiro para depois ir pro endereço correto:
<script type="text/javascript">
var geocoder;
var map;
var endereco;
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
var latlng = new google.maps.LatLng(-22.9035393, -43.2095869);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body id="home" onload="initialize()">
<div id="tudo">
<jsp:include page="/WEB-INF/jsp/layouts/header.jsp"></jsp:include>
<jsp:include page="/WEB-INF/jsp/layouts/menu.jsp"></jsp:include>
<div id="conteudo" align="center">
<div>
<div id="map_canvas" style="width: 620px; height: 380px;"></div>
<input id="address" type="text" value="${imovel.endereco }, ${imovel.bairro}, ${imovel.cidade}, ${imovel.estado}, ${imovel.pais}"> // é neste input onde a function inicializa() pega os dados.
</div>
</div>
</div>
</body>Realmente, precisa do Geocoding para converter o que é uma string em latitude e longitude, o que eu fiz foi embutir uma função na outra, ou seja, uma função que converte string em latitude e longitude dentro de outra que cria o mapa, meio que uma gambiarra. =/
Tô quebrando a cabeça ainda pra fazer a jsp abrir o mapa no endereço e remover o , ver um jeito da função javascript ler EL na jsp e carregar. Alguma idéia de como posso melhorar esse código?
Abraço!!!
Aff, descobri como passar parâmetro para a função javascript com EL:
var address = "${imovel.endereco}";"${imovel.bairro}";"${imovel.cidade}";"${imovel.estado}";"${imovel.pais}";Não sei se é o correto mas funcionou.
Já eliminei o , só falta fazer com que ao abrir vá direto pro endereço. Falta só isso!! =)
Deu boa, ainda bem que dá pra colocar EL nas variáveis do javascript:
O código ficou assim:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var address = "${imovel.endereco},${imovel.bairro},${imovel.cidade},${imovel.estado},${imovel.pais}";
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 15,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var infowindow = new google.maps.InfoWindow({
content: '${imovel.titulo}, ${imovel.endereco}, R$:${imovel.valor} '
});
map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
title: '${imovel.endereco}',
position: results[0].geometry.location
});
infowindow.open(map, marker);
} else {
alert("Geocode was not successful for the following reason: " +
status);
}
});
}
}
</script>
</head>
<body id="home" onload="initialize()">
<div id="tudo">
<jsp:include page="/WEB-INF/jsp/layouts/header.jsp"></jsp:include>
<jsp:include page="/WEB-INF/jsp/layouts/menu.jsp"></jsp:include>
<div id="conteudo" align="center">
<label>Código: </label>${imovel.codImovel }
<label>Título: </label>${imovel.titulo }
<label>Endereço: </label>${imovel.endereco }
<label>Bairro: </label>${imovel.bairro }
<label>Cidade: </label>${imovel.cidade }
<label>Estado: </label>${imovel.estado }
<label>PaÍs: </label>${imovel.pais }
<label>Valor: </label>${imovel.valor }
<div>
<div id="map_canvas" style="width: 620px; height: 380px;"></div>
</div>
</div>
</div>
</body>Nem precisou de latitude e longitude.
A variável “address” precisou apenas que os parâmetros fossem separados com vírgula que a string ficou concatenada.
Abraço!! \o/
obs: estou usando a versão 3 da api, a versão 2 já era (deprecated), tb não precisa mais usar key para ter acesso ao serviço.
Hmm, interessante a versão 3. Eu uso em um projeto de testes aqui a versão 2, que atende super bem as necessidades do projeto. Porém todas as pesquisas são feitas via Java e as imagens são armazenadas no banco de dados para evitar ficar chamando a API muitas vezes, estourando as consultas na API.
Lí bem por cima, e essa API não precisa de uma chave quando usada via browser, porém se você usar via Java terá de usar a chave. Ainda não lí a licença de uso, mas Guevara, você sabe se dá para fazer uma API baseada nela? Há alguma restrição quanto ao uso da API?
- Guevara, esse feriadão fui aí perto, fui visitar a família da patroa que mora no Uruguai.
Abraços
Td bem Garcia?
Estou meio parado com o meu projeto devido a faculdade, mas pelo que eu li existe restrições quanto ao uso do Geocoding API, são 2.500 (geolocations) visualizações por dia, se for mais de 100.000 têm que usar Google Maps API Premier, usando uma nova key criptografada(http://code.google.com/intl/pt-BR/apis/maps/documentation/premier/guide.html#URLSigning). Se exceder o limite em 24hrs o serviço fica suspenso temporariamente, se o acesso continuar excedendo o serviço é bloqueado.
Só vi essas restrições por lá. O Geocoding e Google Maps são usados com conjunto, então colocaram neste link os termos:
http://code.google.com/intl/pt-BR/apis/maps/terms.html#section_10_12
Era isso que vc queria saber?
Não entendi o que vc disse quanto ao uso com Java.
Abraço!!
obs: Eu tô no Brasil, mas sou de Buenos Aires. hehehe
Você está usando ele direto no browser, ou seja, você chama a API via Javascript. No meu caso é tudo via Java, ou seja, um código Java faz a chamada pela API antiga via REST, e o resultado é exposto nas classes Java. Ou seja, você tem uma API para que a partir de um endereço você recebe as coordenadas, então eu tenho algo assim:
Coords coords = GMaps.withAddress("nome da minha rua").coords();
System.out.println("X: " + coords.getX());
System.out.println("Y: " + coords.getY());
E por baixo dos panos classes Java fazem a consulta e me retornam o resultado. A vantagem no meu caso é que os resultados ficam em cache no banco de dados. Assim evito fazer muitas consultas para a mesma coisa. Até as imagens ficam no banco de dados.
Agora sim eu entendi, haha.
Agora entendi, mas foi vc que criou isso ou pegou em algum lugar? Na JSP vc chama do mesmo jeito (div) ou usa alguma taglib especial?
Abraço!!
Guevara, eu mesmo que criei. É um projeto que está na minha fila de revisão para posteriormente eu liberar lá no github para quem interessar.
A versão 2 da API do Google Maps usa REST para você fazer as consultas e até carregar os mapas. O que eu faço é fazer a chamada para a consulta que eu quero e trato o retorno da API.
Vou te dar um exemplo. Para você retornar as coordenadas de um endereço você pode usar o URL http://maps.google.com/maps/geo?key={1}&q={2}&sensor=false. Se você chamar, por exemplo, http://maps.google.com/maps/geo?key={1}&q=rua%20dos%20andradas,%20porto%20alegre&sensor=false ele vai te retornar um JSON com os dados encontrados.
Outro exemplo é que com essas coordenadas eu posso buscar um mapa. Porém nesse caso a API me retorna um array de byte com os dados da imagem: http://maps.google.com/maps/api/staticmap?key={1}¢er=-30.0283379,-51.2231836&zoom=15&size=450x300&markers=color:blue|label:A|-30.0283379,-51.2231836&sensor=false
A vantagem dela, como eu já te disse, que eu trabalho com classes Java apenas e com isso posso “cachear” os resultados no banco de dados. No caso se eu quiser imprimir isso no JSP posso fazer de qualquer forma que eu quiser. Atualmente no sistema de testes que eu tenho a pessoa digita um local e aparece o mapa, basicamente é da mesma forma que você fez. Como eu te disse, o resultado final é o mesmo, porém eu faço uma volta maior para poder ter cache dos dados.
Quero ver se, assim que sobrar um tempo, eu publico ela. Porém preciso ler a licença de uso do Google Maps para ver se posso criar um projeto encima disso.
Abraços
Legal Garcia, entendi agora como funciona, vi na API a explicação sobre JSON e não tava entendendo pra que servia, mas vendo a sua idéia eu percebi a funcionalidade. Só pra quem sabe mesmo, ainda não cheguei nesse nível. hehe
Eu achei interessante tb a idéia daquela taglib pra Google Maps que postei no primeiro post, www.lamatek.com/GoogleMaps/, fica tranquilo de usar:
<googlemaps:map id="map" width="250" height="300" version="2" type="STREET"
zoom="12">
<googlemaps:key domain="localhost" key="xxxx"/>
<googlemaps:point id="point1" address="${imovel.endereco}" city="${imovel.cidade}"
state="${imovel.estado}" zipcode="${imovel.cep}" country="${imovel.pais}"/>
<googlemaps:marker id="marker1" point="point1">
<googlemaps:infowindow display="true">
${imovel.endereco}<br/>${imovel.bairro}, ${imovel.estado}
</googlemaps:infowindow>
</googlemaps:marker>
</googlemaps:map>Menos código javascript na JSP. Trabalhar com taglib é muito melhor. =)
Pena que é para versão 2, e pra usar é meio enrolado. =/
Se tivesse um jar pra usar essas taglibs na versão 3 do Google Maps com Geocoding no VRaptor seria ótimo! 
Abraço!!
Acho que isso pode interessar para mapas simples, que não necessitam interação.
http://code.google.com/apis/maps/documentation/staticmaps/
Um exemplo bem simples com vraptor. Em qs é passado o parametro de pesquisa, que pode ser por exemplo “Avenida dos Andradas, Porto Alegre”. Em URL eu monto a URL de pesquisa fazendo o encoding da String (transforma espaço em %20 e afins). Antes de chamar a API vejo se já existe a imagem, caso sim apenas retorna ela como download, caso contrário faz a consulta remota.
Basta você acessar em sua aplicação localhost:8080/map?qs=Rua dos Andradas, Porto Alegre que será impresso o mapa. 
[code]@Resource
public class LocalizationController {
static final String MAP_URL = “http://maps.google.com/maps/api/staticmap?center={0}&zoom=15&size=450x300&markers=color:blue|label:A|{0}&sensor=false”;
@Path("/map")
public Download map(String qs)
throws IOException {
File file = new File(System.getProperty("java.io.tmpdir"), "map-" + DigestUtils.md5Hex(qs));
if (!file.exists()) {
final URL from = new URL(MessageFormat.format(MAP_URL, URLEncoder.encode(qs, Charsets.UTF_8.toString())));
Files.write(Resources.toByteArray(from), file);
}
return new FileDownload(file, "image/png", file.getName());
}
}[/code]