Superponer una imagen en un mapa de Google

  • Por
Podemos superponer una imagen en un mapa de Google con los Ground Overlays, clase GGroundOverlay del API de Google Maps.
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.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

isawebs

09/6/2009
Google Maps: Alguien me puede ayudar a agregar un link a una imagen de marcador?
Este es el código, ojalá me puedan ayudar:

En este mapa Google Maps que he personalizado, aparece una imagen en cada marca que yo agregué. Pero quiero que a la imagen pueda ponerle un hipervínculo que me lleve a otro sitio, o en su defecto, poner una url donde pueda hacer click desde el globo blanco que aparece al hacer clic en el marcador. Os lo agradezco:

<?php
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ISA - Mapa</title>

<script src="http://maps.google.com/maps?file=ap...
type="text/javascript"></script>

<script type="text/javascript">

function clicMarca(marca) {
if (GBrowserIsCompatible() && cargado) {
GEvent.trigger(marca, "click");
}
}

var marca1;
var marca2;
var marca3;
var marca4;
var cargado=false;

function load() {


if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(14.604847155053898,-7.734375), 2);

function CrearMarca(punto, html){
var miMarca = new GMarker(punto);
map.addOverlay(miMarca);
GEvent.addListener(miMarca, "click", function (){
miMarca.openInfoWindowHtml(html);
});
return miMarca;
}



//estilo para las ventanas de info de las marcas
var estilo_bocadillo = "font-size: 10pt; font-family: verdana; lineheight: 120%;";

//creo marca 1
var point;
point=new GLatLng(7.127923453621531,-73.1171572208...
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Integrated Solution Associates</b><br><img height='148' width='226' border='0' src='http://www.isawebs.net/imagenes/pru...
marca1 = CrearMarca(point, htmlBocadillo);

//creo marca 2
point=new GLatLng(48.85849641062019,2.294737100601...
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Fercho en la Torre Eiffel</b><br><img height='226' width='148' border='0' alt='' src='http://www.isawebs.net/imagenes/pru...
marca2 = CrearMarca(point, htmlBocadillo);

//creo marca 3
point=new GLatLng(8.602747284770018,-71.1474609375...
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Estefi</b><br><img height='148' width='226' border='0' alt='' src='http://www.isawebs.net/imagenes/pru...
marca3 = CrearMarca(point, htmlBocadillo);

//creo marca 4
point=new GLatLng(-0.24169850190163725,-78.5742187...
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Technoecuador</b><br><img height='148' width='226' border='0' alt='' src='http://www.isawebs.net/imagenes/pru...
marca4 = CrearMarca(point, htmlBocadillo);

cargado=true;
}
}
window.onload=load
//]]>
</script>
<style type="text/css">
html,body{
margin:0px; height:100%;
font-family: verdana, arial, helvetica;
}
#map{
float:left;
margin-right:20px;
}
#enlaces{
font-size: 12pt;
margin-top: 10px;
font-weight: bold;
}
#enlaces li{
margin-bottom: 8px;
}
#pie{
clear: both;
padding: 10px;
}
</style>
</head>
<body>


<div id="map" style="height: 600px; width:800px"></div>
<div id="enlaces">
<ul>
<li><a href="javascript: clicMarca(marca1)">ISA - Bucaramanga</a></li>
<li><a href="javascript: clicMarca(marca2)">Juanfer en Francia</a></li>
<li><a href="javascript: clicMarca(marca3)">Estefi en Venezuela</a></li>
<li><a href="javascript: clicMarca(marca4)">Technoecuador - Quito</a></li>
</ul>
</div>




<div id=pie>
Realizado por <a href="http://www.isawebs.net/">ISA</a> para <a href="http://www.7pmkt.com">7P</a>


</script>
<style type="text/css">
<!--
body {
background-color: #65090F;
}
-->
</style></head>
<body onload="initialize()" onunload="GUnload()">

<br>
<br>
<center>
<div id="map_canvas" style="width: 600px; height: 800px"></div>
</center>

</body>

</html>

vito_guerrero_quesada

23/8/2010
como calculas las posiciones x1 y x2
Hola, tras leer este interesante articulo, quisiera saber como puedo pasar una foto a latitud-longitud

Es decir, yo tengo un mapa de google donde marco mi posicion, pero en el mismo mapa quiero poner fotos de puntos interesantes para visitar, los puntos los tengo guardados en una tabla donde tengo los datos de geo posicion y una foto. Las fotos por lo general son de 640 * 480 px.
Como se puede calcular x1 y x2 para no deformar la foto y que salga en la posicion q tengo guardada en la base de datos.

Un saludo y gracias