Cómo crear una marca en un mapa de Google Maps, al hacer clic sobre el mapa, y a continuación mostrar una ventana o bocadillo de información con las coordenadas de la marca.
Es un ejemplo sencillo en el que veremos cómo tratar un evento clic sobre el mapa, la colocación de una marca y posteriormente la presentación de una ventana de información. También trataremos con la clase GLatLng para extraer las coordenadas de un punto.
Puedes hacerte una idea exacta de lo que se va a explicar en este artículo accediendo a una página con ejemplo en funcionamiento.
Esta nueva guía para el trabajo con los mapas de Google se engloba dentro del Manual del Api de Google Maps que estamos publicando en DesarrolloWeb.com.
En un artículo anterior aprendimos a colocar una marca en un mapa de Google como respuesta al clic de un usuario, por lo que esta parte la daremos por conocida.
Primero podemos crear una marca, aunque todavía no la mostremos en el mapa de Google, puesto que sólo querremos que aparezca en el momento que el usuario haga clic en el mapa.
Para crear una marca necesitamos un punto (objeto de la clase GLatLng), así que de momento vamos a obtener un punto a partir del centro configurado en el mapa de Google. Cuando se haga clic, antes de mostrar la marca, reposicionaremos ese punto para colocar la marca en el lugar donde se ha hecho clic. Por tanto, de momento el punto donde creemos esta marca da un poco igual.
var point;
point=map.getCenter();
Luego creamos la marca en el punto que habíamos guardado antes.
var marker = new Gmarker(point);
Después hay que añadir un evento al mapa para que, cuando se pulse, se reposicione la marca, se muestre en el mapa y aparezca un bocadillo o ventana de información con las coordenadas donde se ha colocado la marca.
GEvent.addListener(map, "click", function (overlay,point){
marker.setPoint(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("<div style='font-size: 8pt; font-family: verdana'>Mi marca situada en<br>Latitud: " + point.lat() + "<br>Longitud: " + point.lng() + "</div>");
});
Comento algunas líneas de este código:
marker.setPoint(point);
Con esto cambiamos la posición de la marca.
map.addOverlay(marker);
Con esa otra línea hacemos que la marca se muestre en el mapa (puesto que hasta ahora se había creado la marca pero no se mostraba en ningún sitio)
Por último se incluye la siguiente linea dentro de la función del evento:
marker.openInfoWindowHtml("<div style='font-size: 8pt; font-family: verdana'>Mi marca situada en<br>Latitud: " + point.lat() + "<br>Longitud: " + point.lng() + "</div>");
Esto es para que, a la vez que se muestra una marca, también aparezca una ventana de información, con las coordenadas de la misma.
Al construir el bocadillo con la información utilizamos los métodos del punto donde hizo clic el usuario point.lat() y point.lng() para conseguir las coordenadas del mapa, es decir, la latitud y longitud.
Para terminar, vamos a mostrar el código completo para crear una marca en el mapa al hacer clic.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE-GOOGLE-MAPS "
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 5);
var point;
point=map.getCenter();
var marker = new GMarker(point);
GEvent.addListener(map, "click", function (overlay,point){
marker.setPoint(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("<div style='font-size: 8pt; font-family: verdana'>Mi marca situada en<br>Latitud: " + point.lat() + "<br>Longitud: " + point.lng() + "</div>");
});
}
}
window.onload=load
//]]>
</script>
<style type="text/css">
html,body{
margin:0px; height:100%;
}
</style>
</head>
<body>
<div id="map" style="height: 300px; width:500px"></div>
</div>
</body>
</html>
Puede verse el ejemplo en marcha en una página aparte.
Gema Maria Molina Prados
Equipo DesarrolloWeb.com