Google Earth, ciudades en 3D (Madrid ya está!!!)

No se por qué hace dos días se me ocurrió volver a instalar el Google Earth, de esas cosas que llevaba sin utilizar muchos, pero MUCHOS años…… Y sinceramente, vi que más o menos seguía igual, con unas pocas diferencias más o menos significativas:

  • Ahora se puede explorar las profundidades marinas (estuve viendo en 3D el titanic).
  • Hay muchas más ciudades en 3 dimensiones.
  • Se puede visitar no sólo la Tierra, sino también la luna, Marte y las constelaciones.

Pero bueno, a lo que vamos, casualmente, una ciudad que ha sido añadida hace menos de dos semanas al apartado de ciudades en 3 dimensiones ha sido Madrid. En el blog del equipo de Google Earth podéis verlo.

Y ya sin más, os dejo el resultado de estar 1 horilla jugando con la aplicación:

¿¿Sabéis a donde pertenece cada fotografía??

Google Maps, cómo insertar una marca en un mapa

Insertar una marca en un mapa de Google Maps puede decirse que es el primer paso que ha de tomarse antes de intentar hacer ninguna otra tarea con su API. El código que os presento hoy es el siguiente:

function load() {
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 17);
      map.addControl(new GLargeMapControl());
      map.setMapType(G_SATELLITE_MAP);
      var point = new GPoint (-3.7034815549850464, 40.41689826118782);
      var marker = new GMarker(point);
      map.addOverlay(marker);
   }
}

Si nos ponemos a explicar el código veremos que hemos seguido varios pasos:

  1. Creación del mapa.
  2. Configuración del centro y tipo de mapa,…
  3. Creación del punto.
  4. Creación de una marca con el punto que habíamos creado.
  5. Añadir esa marca al mapa mediante .addOverlay.

El resultado es el siguiente.

Google Maps: Distancias entre dos puntos

Hace unos días me encontraba ante el problema de cómo obtener la distancia entre dos puntos con la tecnología de Google Maps.

La solución que al final implementamos es la que puedes ver en esta página.

Tiene dos funciones principales, que son:
Initialize, que se ejecutará nada más cargar la página.

function initialize() {
  geocoder = new GClientGeocoder();
}

ShowLocation, que se ejecutará en el momento en que pulsemos el botón de calcular las distancias. Se encargará de tomar las direcciones, obtener el punto donde se encuentran y llamar a la función calculateDistance.

function showLocation() {
  geocoder.getLocations(document.forms[0].address1.value, function (response) {
    if (!response || response.Status.code != 200){
      alert("Lo siento, pero hemos sido incapaces de geolocalizar la primera dirección");
    } else {
      location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
      geocoder.getLocations(document.forms[0].address2.value, function (response) {
        if (!response || response.Status.code != 200){
          alert("Lo siento, pero hemos sido incapaces de geolocalizar la segunda dirección");
        } else {
          location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
          calculateDistance();
        }
      });
    }
  });
}

calculeDistance es la función que se encarga de calcular dicha distancia en kilómetros y en millas y sustituir el p con id results por una cadena con dicha información.

function calculateDistance(){
  try{
    var glatlng1 = new GLatLng(location1.lat, location1.lon);
    var glatlng2 = new GLatLng(location2.lat, location2.lon);
    var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
    var kmdistance = (miledistance * 1.609344).toFixed(1);
    document.getElementById('results').innerHTML = 'Dirección 1: ' + location1.address + ' (' + location1.lat + ':' + location1.lon + ')
Dirección 2: ' + location2.address + ' (' + location2.lat + ':' + location2.lon + ')
Distancia: ' + kmdistance + ' kilómetros (o ' + miledistance + ' millas)';
  } catch (error) {
    alert(error);
  }
}

Nota: Recuerda que si quieres exportarla a tu máquina local o a tu propia web necesitas modificar la clave API.

Trabajar con Google Maps

Pues estos últimos días he estado enfrascado en la creación de mapas y de rutas usando la tecnología de google maps y la verdad es que esta herramienta es muy potente a la vez que sencilla. Mi idea es que conforme pase el tiempo, intentaré poner distintos ejemplos de google maps, desde los típicos a algunos ya mas rebuscados.

Lo primero que tenéis que hacer para que la API de Google Maps funcione en vuestros ordenadores es solicitar una API KEY. Aceptas los términos y rellenas la dirección URL del sitio web (en mi caso www.yises.com). A continuación Google mostrará tres ejemplos  de inserción de la clave, uno para javascript, otro para flash y otro para http. Si os dais cuenta, en las tres hay un apartado llamado key que será del tipo:  key=ABQIAAAAqCGY1L_J5Qin2jIux7DfIxRVmw_V8GGFQldr7a9dtnHBU7OYZhQWtc-C26KFtKXSxbJ4J-gldxzzgA (En mi caso eso es lo que ha aparecido).

¿Qué importancia tiene? Pues para que los ejemplos de mi página o de cualquier otra página valgan en las vuestras es necesario que sustituyais la key existente por la que obtengais.