Google Maps es un servicio gratuito que nos ofrece Google con mapas desplazables del mundo entero, fotos satelitales, la ruta más corta entre diferentes ubicaciones y muchas características interesantes. Es semejante a Google Earth; una aplicación para Windows, Mac y Linux; pero con la diferencia que Google Maps es fácilmente integrable a cualquier sitio web.

¿Cómo integro un mapa de Google Maps a mi web?

Insertar un mapa en nuestro sitio web es muy simple haciendo uso de la API de Google Maps. Lo primero es solicitar nuestra API Key, debemos especificar en qué URL vamos a utilizar nuestro mapa.

Aunque es recomendable solicitar una para la dirección http://localhost con esta hagamos los ajustes necesarios y una vez que nuestro código esté listo cambiar la API Key por la de nuestro sitio en Internet para publicar la página.

Aquí tenemos una muestra del código que nos proporciona Google Maps para que utilicemos. Es importante destacar que debemos remplazar el texto resaltado en el código: COLOCAR_AQUI_NUESTRA_KEY por nuestro API Key, para que funcione correctamente. 

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=COLOCAR_AQUI_NUESTRA_KEY"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>

A continuación utilizaremos este código para explorar algunas, de las múltiples características que podemos explotar con el API de Google Maps.

¿Cómo iniciar el mapa en coordenadas específicas?

En el código que nos ofrece Google Maps para utilizar en nuestra web está predeterminada la ubicación de Palo Alto en Estados Unidos; pero podemos cambiarla estableciendo nuevas coordenadas. En el código siguiente establecimos la ubicación del mapa en la isla Madagascar, al sur de África:

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 13);
      }
}

Hasta ahí todo está muy bien, pero cómo obtenemos las coordenadas de la ubicación que deseamos. Para esto entremos a www.maps.google.es y posicionémonos donde queremos que aparezca nuestro mapa, luego copiemos el vínculo que aparece en la parte superior derecha del mapa con el texto: “Enlazar con esta página”, que sería algo como esto: 

http://maps.google.es/?ie=UTF8&ll=-19.435514,48.603516&spn=17.554213,29.882813&z=5&om=1

En el parámetro ll se almacena la latitud y longitud, respectivamente, de la ubicación que estamos observando. Copiamos esos números, los pegamos en la parte del código del API que explicaba anteriormente y hemos logrado cambiar las coordenadas iniciales de nuestro mapa.

¿Cómo establecemos el nivel de Zoom inicial?

También podemos especificar el nivel de zoom que deseamos que tenga nuestro mapa al mostrarse. Logramos esto variando el segundo parámetro del método setCenter. Por defecto está establecido en 13, pero en el código que mostramos a continuación lo hemos establecido en 5. Mientras más pequeño sea el número más cerca estaremos del mapa. 

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
      }
}

¿Cómo añadir controles?

Quizás nos interese que nuestro mapa tenga controles de zoom o navegación. Pues a continuación explicaremos cómo insertarlos. Simplemente agregaremos una línea dentro de nuestra instrucción IF, con el método addControl de nuestro objeto map, especificando qué tipo de control queremos insertar, como se muestra en el código:

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
      }
    }

En el ejemplo anterior hemos agregado a nuestro mapa un selector del tipo de mapa (GMapTypeControl), un control de desplazamiento con una barra de zoom (GLargeMapControl), la escala del mapa (GScaleContro) y un mini-mapa en una esquina que nos indica la región que estamos visualizando (GOverviewMapControl). Para mayor información sobre los controles que podemos incluir vea la ayuda de la API.

¿Cómo cambiar el tipo de mapa?

Con el control para seleccionar el tipo de mapa que agregamos podemos seleccionar entre: Mapa, Satélite e Híbrido; pero podemos especificar con cuál queremos que se muestre inicialmente nuestro mapa utilizando el método setMapType del objeto map, que puede tomar los valores: G_MAP_TYPE (Mapa), G_SATELLITE_TYPE (Satélite) y G_HYBRID_TYPE (Híbrido).

En nuestro código de ejemplo insertamos una línea para especificar que nuestro mapa inicie en modo Híbrido.

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        map.setMapType(G_HYBRID_TYPE);
      }
    }

¿Cómo insertar marcas a nuestro mapa?

Las marcas son muy útiles para resaltar ubicaciones. Con la función GMarker() podremos crear una marca en el punto que le pasamos como parámetro y la función addOverlay() nos sirve para adicionar la marca al mapa.

En el código siguiente hemos agregado una marca en la posición -19.000514, 46.603516. Aproximadamente el centro de la isla Madagascar.

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        map.setMapType(G_HYBRID_TYPE);
        var point = new GLatLng(-19.000514,46.603516);
        map.addOverlay(new GMarker(point));		
      }

En el código anterior hemos utilizado la función GLatLng() para declarar un punto en la ubicación que deseamos poner la marca, luego hemos creado una marca con GMarker() y la hemos agregado a nuestro mapa haciendo uso de addOverlay().

¿Cómo agregar etiquetas a nuestra marca?

Siempre es útil que las marcas tengan un texto descriptivo, sobre todo cuando tenemos más de una en nuestro mapa. A continuación explicaremos cómo introducirle una descripción a nuestras marcas.

En el código siguiente utilizamos una función para agregar una etiqueta a nuestra marca. En la variable address guardamos el texto descriptivo de nuestra etiqueta y utilizando la función addtag creamos la marca en el punto point y adicionamos un listener de evento del tipo clic para que se muestre la etiqueta al hacer clic sobre la marca y finalmente agregamos la marca al mapa utilizando addOverlay().

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        map.setMapType(G_HYBRID_TYPE);
        function addtag(point, address) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() { 
	marker.openInfoWindowHtml(address); } );
        return marker;
        }
        var point = new GLatLng(-19.000514,46.603516);
        var address = '<b>MADAGASCAR</b><br/><i>Centro de Madagascar</i><br /><a href="http://www.centrodemadagascar.com">Web del Centro de Madagascar</a>';
        var marker = addtag(point, address);
       map.addOverlay(marker);
      }
    }

Con estos últimos retoques al código ya tenemos nuestro archivo listo para ser publicado en el servidor web y que los internautas exploren el planeta a través del mapa que hemos configurado.

A modo de resumen aquí les dejo algunos sitios que implementan el API de Google Maps en sus páginas, así como otros no menos interesantes relacionados con el tema. Si conocen proyectos que utilicen el API, compartan con nosotros el vínculo en un comentario.

  • Google Maps de Noche: Combinando el API de Google Maps con fotos satelitales nocturnas de la NASA, se ha logrado esta vista espectacular.
  • Google Maps Mania: Este es un blog que colecciona todo sobre Google Maps, además muestra los últimos proyectos que se están desarrollando con el API.
  • Últimos Terremotos: Nos muestra los sismos más recientes ocurridos en el planeta, con el nivel de magnitud, la fecha y un enlace con los detalles.
  • Ranking de Hospitales: Nos informa el ranking de los Hospitales valorados según las enfermedades que atienden, además dándole nuestra dirección nos muestra la manera más rápida de llegar.
  • Localizador de Gimnasios: Este mapa localiza el gimnasio más cercano.

Archivo de ejemplo:

Puede descargar el archivo que hemos configurado durante este artículo. Siéntase libre de modificarlo según sus necesidades. Recuerde escribir su propia API Key en el código HTML antes de utilizarlo.

Lecturas recomendadas