Google Maps - Ground Overlay

Continuando con las entradas de Google Maps, pasamos a ver de qué forma superponer una imagen por encima de nuestro mapa. Para este ejemplo la capa que superponemos será el mapa catastral.

No me voy a parar a explicar de qué forma se pide el mapa al web service de catastro, si alguien tiene interés no me importará responder.

Para comenzar debemos conocer la clase a emplear para la superposición:

• google.maps.GroundOverlay 

El constructor nos permite establecer la URL de la imagen y los límites del mapa en los que se mostrará la imagen.

Comenzamos con el ejemplo. El 'body' de nuestra página será muy sencillo. (El mapa está configurado a 640*480 por css):

Pasemos al JavaScript. Recordad que lo primero que debemos hacer es agregar la referencia al api de Google Maps. En este caso usaré una variable 'map' para el mapa y otra llamada 'oldmap' que servirá de GroundOverlay. Inicialicemos el mapa:

var mapa = null;
var oldmap = null;
   
function loadMap(){
 var uc3m = new google.maps.LatLng(40.3311545, -3.7661425);
 var myOptions = {
  zoom: 17,
  center: uc3m,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 mapa = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

Esta función se llama en el evento onload del 'body'.

A continuación pasamos a definir la función que cargará la imagen de catastro:

//Esta función introduce la imagen del Catastro en el mapa
function overlay(){
 var bounds = mapa.getBounds()
 var ne = bounds.getNorthEast()
 var sw = bounds.getSouthWest()
    
   
 if(oldmap != null){
  oldmap.setMap(null)  //'Despinta' la imagen anterior para que no se solapen
  oldmap = null
 }
    
 oldmap = new google.maps.GroundOverlay("http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?SERVICE=WMS&SRS=EPSG:4326&REQUEST=GETMAP&bbox="+sw.lng()+","+sw.lat()+","+ne.lng()+","+ne.lat()+"&width=640&height=480&format=PNG&transparent=Yes&layers=catastro"  , mapa.getBounds());
 oldmap.setMap(mapa);
    
}

Podemos ver como primeramente se limpia la imagen anterior. A continuación cargamos el GroundOverlay con la URL de catastro y los límites de emplazamiento de la imagen, que serán los límites del mapa, haciendo coincidir el tamaño de las imágenes. Para conseguir estos límites llamamos a la función getBounds(). Por último asignamos nuestro GroundOverlay a nuestro mapa.

Lo siguiente que haremos será agregar los eventos necesarios para que la imagen catastral cambie con la interacción del mapa. Para ello cambiaremos la función loadMap(). La función queda de esta forma:

var mapa = null;
var oldmap = null;

function loadMap(){
 var uc3m = new google.maps.LatLng(40.3311545, -3.7661425);
 var myOptions = {
  zoom: 17,
  center: uc3m,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 mapa = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

 //AQUÍ INDICAMOS LOS EVENTOS QUE ESCUHARÁ EL MAPA
 google.maps.event.addListener(mapa, 'dragend',
  function(){
   overlay()
  }
 )
 
 google.maps.event.addListener(mapa, 'zoom_changed',
  function(){
   overlay()
  }
 )
 
 google.maps.event.addListenerOnce(mapa, 'tilesloaded',
  function(){
   overlay()
  }
 ) 
}

Finalmente el ejemplo Google Maps + Catastro:

Descargar ejemplo completo aquí.