Sobrepor uma imagem em um mapa de Google
Neste artigo do
manual de Google Maps vamos explicar o modo de sobrepor uma imagem a um mapa, o que no API de desenvolvimento de mapas de Google chamam "Ground Overlays". . Pode nos servir para oferecer informação gráfica do lugar que se está visualizando, ou adicionar elementos para chamar a atenção do usuário.
A tarefa é muito simples, pois só necessitamos definir o lugar onde se tem que colar a imagem que desejamos mostrar e a URL onde se localiza o arquivo gráfico a sobrepor. A imagem que colocarmos sempre aparecerá sobre o próprio fundo, tapando o que tiver debaixo.
As imagens que se sobrepõem se criam através da classe GGroundOverlay, cujo construtor recebe uma URL ou caminho relativo da imagem e os limites do mapa onde colocá-la.
var imagem = new GGroundOverlay("arquivo-grafico.jpg", limites_imagem);
Os limites da imagem são por sua vez outra classe, chamada GLatLngBounds, que é como um retângulo formado por dois pontos geográficos, as coordenadas Sul-Oeste e Norte-Leste, definidas por sua vez com os valores de latitude e longitude. Podemos ver a seguinte imagem, na que marcamos os dois pontos que necessitamos para definir as bordas ou limites da imagem, que utilizaremos no construtor da classe GLatLngBounds.
No construtor devemos especificar primeiro o ponto X1 e logo o ponto X2.
var limites_imagem = new GLatLngBounds(x1, x2);
Por sua vez, os pontos x1 e x2 são coordenadas latitude e longitude que devemos criar com a classe GLatLng, desta maneira:
var x1 = new GLatLng(valor_latitude, valor_longitude);
Uma vez temos o objeto imagem da classe GLatLngBounds, temos que colocá-lo no mapa com o método do mapa addOverlay(), que havíamos utilizado anteriormente para sobrepor elementos em mapas de google como os polígonos.
map.addOverlay(imagem);
Vemos o código completo para fazer um mapa com uma imagem sobreposta.
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.491022,-3.8736677),15);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//crio os pontos dos limites da imagem
var x1 = new GLatLng(40.489259,-3.877358);
var x2 = new GLatLng(40.4923928,-3.8675308);
//defino os limites onde vou colocar a imagem
var limites_imagem = new GLatLngBounds(x1, x2);
//Crio um ground overlay
var imagem = new GGroundOverlay("lasrozas.jpg", limites_imagem);
//coloco a imagem ou ground overlay no mapa
map.addOverlay(imagem);
Como se pode comprovar, sobrepor uma imagem é algo relativamente simples, embora tenhamos que definir bem os limites da imagem para que o renderizado fique bem e não se estique demais na foto.
O
exemplo em funcionamento pode ser visto em uma página à parte.
