14.22. Ejercicio 22 (Introducción a AJAX)

<!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&amp;v=2&amp;hl=es&amp;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>
Descargar ZIP con la solución completa