<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejercicio 22 - Google Maps</title> <script src="http://maps.google.com/maps?file=api&v=2&hl=es&key=ABQIAAAA30JtKUU8se-7KKPRGSfCMBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRZNdns2BwZvEY-V68DvlyUYwi1-Q" type="text/javascript"></script> <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { // Variables para el mapa var lat = 42.845007; var lon = -2.673; var zoom = 5; // Crear un nuevo mapa var map = new GMap2(document.getElementById("map")); // Centrarlo en un punto geográfico y con un nivel de zoom map.setCenter(new GLatLng(lat, lon), zoom); // Añadir los controles de zoom y de tipo de mapa map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); // Crear el segundo mapa var map2 = new GMap2(document.getElementById("map2")); // Calcular las antipodas del punto geográfico var antipodas = calculaAntipodas(lat, lon); // Centrarlo en el punto geográfico de las antípodas y con el mismo nivel de zoom map2.setCenter(new GLatLng(antipodas.lat, antipodas.lon), zoom); // Cuando se mueve el primer mapa, se sincroniza la posición y aspecto del segundo GEvent.addListener(map, "move", function() { var centro = map.getCenter(); var antipodas = calculaAntipodas(centro.lat(), centro.lng()); map2.setCenter(new GLatLng(antipodas.lat, antipodas.lon), map.getZoom()); map2.setMapType(map.getCurrentMapType()); }); GEvent.addListener(map, "click", function(marcador, punto) { // Crear el nuevo marcador y mostrar sus coordenadas var nuevoMarcador = new GMarker(punto); GEvent.addListener(nuevoMarcador, "click", function() { this.openInfoWindowHtml("Lat: " + this.getPoint().lat() + "<br/>Lon: " + this.getPoint().lng()); }); map.addOverlay(nuevoMarcador); // Crear el marcador correspondiente a las antípodas var antipodas = calculaAntipodas(punto.lat(), punto.lng()); var marcador2 = new GMarker(new GPoint(antipodas.lon, antipodas.lat)); GEvent.addListener(marcador2, "click", function() { this.openInfoWindowHtml("Lat: " + this.getPoint().lat() + "<br/>Lon: " + this.getPoint().lng()); }); map2.addOverlay(marcador2); }); } function calculaAntipodas(lat, lon) { var antiLat = -lat; var antiLon = 180 - Math.abs(lon); return {lat: antiLat, lon: antiLon}; } } window.onload = load; window.onunload = GUnload; </script> <style type="text/css"> #map, #map2 {border:1px solid black; float: left;} </style> </head> <body> <div id="map" style="width: 500px; height: 300px"></div> <div id="map2" style="width: 500px; height: 300px"></div> </body> </html>