En este artículo del manual de Google Maps vamos a explicar el modo de superponer una imagen a un mapa, lo que en el API de desarrollo de mapas de Google llaman "Ground Overlays". . Puede servirnos para ofrecer información gráfica del lugar que se está visualizando, o añadir elementos para llamar la atención del usuario.

La tarea es muy simple, pues sólo necesitamos definir el lugar donde se tiene que pegar la imagen que deseamos mostrar y la URL donde se localiza el archivo gráfico a superponer. La imagen que coloquemos siempre aparecerá sobre el propio fondo, tapando lo que haya debajo

Las imágenes que se superponen se crean a través de la clase GGroundOverlay, cuyo constructor recibe una URL o camino relativo de la imagen y los límites del mapa donde colocarla.

var imagen = new GGroundOverlay("archivo-grafico.jpg", limites_imagen);

Los límites de la imagen son a su vez otra clase, llamada GLatLngBounds, que es como un rectángulo formado por dos puntos geográficos, las coordenadas Sur-Oeste y Norte-Este, definidas a su vez con los valores de latitud y longitud. Podemos ver la siguiente imagen, en la que hemos marcado los dos puntos que necesitamos para definir los bordes o límites de la imagen, que utilizaremos en el constructor de la clase GLatLngBounds.


En el constructor debemos especificar primero el punto X1 y luego el punto X2.

var limites_imagen = new GLatLngBounds(x1, x2);

A su vez, los puntos x1 y x2 son coordenadas latitud y longitud que debemos crear con la clase GLatLng, de esta manera:

var x1 = new GLatLng(valor_latitud, valor_longitud);

Una vez tenemos el objeto imagen de la clase GLatLngBounds, tenemos que colocarlo en el mapa con el método del mapa addOverlay(), que habíamos utilizado anteriormente para superponer elementos en mapas de google como los polígonos.

map.addOverlay(imagen);

Vemos el código completo para hacer un mapa con una imagen superpuesta.

var map = new GMap2(document.getElementById("map"));   
map.setCenter(new GLatLng(40.491022,-3.8736677),15);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

//creo los puntos de los límites de la imagen
var x1 = new GLatLng(40.489259,-3.877358);
var x2 = new GLatLng(40.4923928,-3.8675308);
//defino los límites donde voy a colocar la imagen
var limites_imagen = new GLatLngBounds(x1, x2);
//Creo un ground overlay
var imagen = new GGroundOverlay("lasrozas.jpg", limites_imagen);
//coloco la imagen o ground overlay en el mapa
map.addOverlay(imagen);

Como se ha podido comprobar, superponer una imagen es algo relativamente sencillo, aunque tenemos que definir bien los límites de la imagen para que el renderizado quede bien y no se estire demasiado la foto.

El ejemplo en marcha lo podemos ver en una página aparte.