Trabajando con el API de Google Maps

Estás en Inicio / Editorial / Servicios Web

13.12.2007

Trabajando con el API de Google Maps

Por Reynier Matos Padilla | 19,390 Lecturas
Archivado en: Servicios Web, APIs

Mediante el API que nos ofrecen Google Maps los desarrolladores del servicio podremos hacer uso de sus bondades. En este artículo pretendemos explicar los aspectos más relevantes de este API.

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

Califica esta nota:

(8 votos, promedio: 5 de 5)

Loading ...

Sobre el autor

Reynier Matos Padilla
Administrador de sistemas y diseñador web. Con experiencias en tecnologías ASP.NET, PHP, Javascript, CSS, DHTML, AJAX, servicios web, y XML.

Comentarios

41 comentarios en total.

Toni 13.12.2007 - 05:21 - #

Muy buen articulo, es de gran utilidad, muchas gracias. Salud.
Guille - Sector86 13.12.2007 - 08:45 - #

excelente articulo, me lo quedo en mi coleccion de imprescindibles
enrique varela 13.12.2007 - 09:50 - #

Muy buen artículo. Los que no disponíamos de él no tuvimos más remedio que rompernos la cabeza.
En http://www.sycitv.com/c_cita.htm tenéis una web que utiliza la API de google maps para las citas previas de inspección técnica de vehículos en Galicia (España).
Saludos
Alejandro Carmona 13.12.2007 - 11:19 - #

Demasiado interesante este articulo. Y tambien quisiera preguntar ¿si esto es posible realizarse sobre celulares, ya sea que googlemaps contiene una libreria especifica o si exite algun metodo???. De antemano gracias
Reynier Matos Padilla 13.12.2007 - 12:22 - #

Alejandro; en este post del foro del API de Google Maps alguien pregunta pregunta eso mismo.

Te invito que veas la respuesta aquí.
Reynier Matos Padilla 13.12.2007 - 12:28 - #

Alejandro;
Abajo te dejo la URL de un post en el grupo del API de Google Maps donde alguien hace esa pregunta y
Pamela, empleada de Google, le responde.

http://groups.google.com/group/Google-Maps-API/browse_thread/thread/975d88598b4e1a9f
banco potencia 13.12.2007 - 12:29 - #

Muy bien explicado. Perfecto. Gracias
anunciolibre 13.12.2007 - 13:04 - #

Buena explicación. A ver si sabes como poner también en la ventana que se abre las estiquetas de como llegar, ir hasta aquí etc…tendrias articulo completo. Gracias por anticipado.
Andrea 14.12.2007 - 07:38 - #

Muy bueno tu articulo y muy bien explicado, quisiera hacer una pregunta, al mostrar la etiqueta descriptiva como se hace para mostrar “Obtener Indicaciones: Hasta aquí - Desde aquí…..”.
Muchisimas gracias por adelantado.
Reynier Matos Padilla 14.12.2007 - 11:07 - #

Para crear rutas con el API debemos utilizar las clases:

-GDirections
-GRoute
-GStep

Para trazar líneas podemos utilizar la clase GPolygon o GPolyline; son semejantes, pero con la primera es posible agregar un color y opacidad de relleno.

Puede obtener todos los detalles sobre el uso de estas clases en la referencia del API de Google Maps en esta URL:
http://www.google.es/apis/maps/documentation/reference.html
anunciolibre 17.12.2007 - 04:02 - #

Gracias por la información. Porque en la página de Google no queda claro. Probare a implementar -GDirections -GRoute -GStep. Un saludo
Ernesto Vega 17.12.2007 - 05:39 - #

Muy buen artículo. Mi pregunta sobre el tema del google maps es como publico en el servidor, para que pueda verlo más gente sin que pida el API KEY cada vez que acceda a la pagina?
saludos,
Ernesto Vega 17.12.2007 - 05:59 - #

Me respondo, encontre la respuesta, debo obtener la api key y utilizarla en un “solo” website.
Gracias de todos modos,
Libre 17.12.2007 - 10:35 - #

alguien podria ayudarme con alguna pagina en la que se hable mas de este tema?
Stephanie Falla Aroche 17.12.2007 - 15:15 - #

@Libre, si revisas al final del artículo encontrarás una lista de lecturas recomendadas, que te ayudarán a extender el tema.
Luis Leighton 17.12.2007 - 19:48 - #

Gracias,
tu información es mucho más simple y explícita que la de Google maps. Sin duda me servirá.
Saludos.
Libre 19.12.2007 - 15:37 - #

Esta muy bueno, gracias por compartirlo!
webmaster zonau 21.12.2007 - 12:53 - #

ayuda! he incluido el mapa lo ke ahora deseamos es interactuar con la api. de tal forma que pueda ver dos de mis mapas de google maps en una misma ventana
wolten 07.01.2008 - 10:45 - #

Muy buen articulo, me sirvio de mucho…puedes verlo en mi website.
Cweb 07.01.2008 - 19:30 - #

Como puedo poner un boton como el de adicionar marcas en la edición de google maps?
Reynier Matos Padilla 10.01.2008 - 12:34 - #

Cweb

Puedes usar una función javascript que le agregue una nueva marca a tu mapa. Ejecutas esta función mediante el evento OnClick() de un label, imagen o botón.

Aquí te dejo una función de ejemplo que hace lo que quieres. Espero que te sea útil.

function agregarmarca() {
if (GBrowserIsCompatible()) {
//(…)
var point = new GLatLng(-19.000514,46.603516);
map.addOverlay(new GMarker(point));
}
ssuudobal 13.01.2008 - 05:08 - #

Buenas, no se si llego a tiempo, para recibir respuesta pero bueno. ¿Hay alguna manera en la API de hacer que al buscar una dirección le obligue a que busque sólo en una ciudad en concreto? Es decir, si busco calle Goya y estoy en Madrid, que no la busque en Mexico, que es la primera que pilla.

Gracias
G-or-G 16.01.2008 - 04:36 - #

hola, perfecto el código, pero no me aparecen los botones de zoom. ¿saben cómo puedo solucionarlo?
Francisco Pinedo 16.01.2008 - 10:17 - #

Muy util, te felicito.

El Señor Jesus te de mas sabiduria para con ella ayudar a muchas personas como tu lo haces.

Bendiciones
Reynier Matos Padilla 17.01.2008 - 07:25 - #

G-or-G:

¿Te aseguraste de poner en el código el API Key que solicitaste a Google?
Nuria 17.01.2008 - 11:40 - #

Fenomenal el artículo. Me lo guardo. Gracias
Nuria 17.01.2008 - 11:41 - #

Fenomenal al artículo. Me lo guardo. Gracias
alejandro baur 17.01.2008 - 16:06 - #

necesito saber como aplicar a mi API existente el nuevo boton terreno, y como hacer para que el boton satelite, tenga incorporado el tilde para seleccionar el modod hibrido. grax!
Kenneth 30.01.2008 - 13:55 - #

Hola, tengo problemas en mi mac, sigo los pasos anteriores y funciona perfecto en FF y IE6 sobre windows, pero no en safari(mac), agradesco la ayuda
Andres 31.01.2008 - 02:58 - #

Buenos dias, estoy intentando inscluir un mapa de google en un jsp. Lo tengo que poner entre varias capas con javascript. La programacion que he hecho es correcta y en mozilla firefox, funciona bien, pero en el explorer me aparece un mensaje de error diciendo que “no se puede cargar el sitio” y “operacion anulada”

Alguien sabe por que sale el error ??

Muchas gracias
Andres 31.01.2008 - 08:29 - #

Bueno, lo acabo de resolver. El problema era que haciamos la llamada al script dentro del body. Por si a alguien le pasa lo mismo… que ponga el script despues del body.

Saludosss
Catalina 18.02.2008 - 09:46 - #

Tengo una duda, trabajo con google maps y he hecho de todo, lo que me falta es trazar la linea pero por puntos.
Me explico. Tengo ya la linea, pero quiero que no se marque una linea inmediata, necesito que se marque coordenada por coordenada, así se ve cuanto avanza el vehículo. Eso lo logre, hice una función y le puse setTimeout(”trazarRuta()”,100);, pero la sobreescribe, osea marca la linea 1, luego la linea 1 (nuevamente) y la linea 2, luego la linea 1, linea 2 y linea 3..etc…

Alguien sabe como hacer para que no se sobreescriba.

var iGlbl =0;
function trazarRuta( dataBuff )
{
M=dataBuff[iGlbl].split(”\r”);
pGlbl[iGlbl]=new GLatLng(M[LATRUTA],M[LONRUTA]);

setTimeout(”trazarRuta(dataBuff)”,100);

var polyline = new GPolyline(pGlbl, “#FF0000″, 4);

mapgGlbl.addOverlay(polyline);

iGlbl++;

}
deif 18.02.2008 - 13:21 - #

hola amigos, una consulta… como hago para mover el mapa con vinculos externos. Mi idea es que haciendo click en un vinculo, yo le pueda pasar las coordenadas y el mapa se mueva sin tener que recargar la pagina…gracias!
EDUARDO 01.03.2008 - 16:47 - #

Hola, esta muy bueno el tutorial, ojala le hubieran puesto un punto mas en el mapa porque la verdad que ese sencillo paso de poder agregar mas puntos al mapa me esta liando por completo.

En el archivo de descarga he agregado otro punto, con distintas coordenadas, pero nada.

A seguir intentando.
alan 04.03.2008 - 13:39 - #

genial aporte! manos a la obra
will prieto 14.03.2008 - 17:39 - #

hola necesito alguien con conocimientos en api google, es urgente mi email es wprieto@qualitatem.com o por mesenger wilprieto@hotmail.com o skype wilprieto es un poco urgente 15/03/2008
David 07.04.2008 - 05:43 - #

Estoy intentando integrar la API de Google Maps en una web, pero no lo consigo. Lo he realizado en otras y nunca he tenido problemas hasta ahora.
La única diferencia es que en esta ocasión el dominio incorpora entre sus letras la “ñ”.
El proveedor es 1and1.
¿Alguien pude ayudarme?.
Kabrator 24.04.2008 - 09:25 - #

Buenas! me ha sido de mucha ayuda todo tu escrito, ahora tengo un problema que no se si tiene solucion…
Uso loadFromWaypoints para hacer una ruta de x puntos (ya se que el maximo es 25), habria alguna forma de que en vez de salirme de la A a la Z los puntos, poder editarlos y poner lo que yo quiera? y que en vez de salirme un zoom del punto, me salieran los datos que quisiera yo poner?
Muchas gracias
Hazel 28.05.2008 - 14:36 - #

Muy buen articulo. Oye y como podria hacerle si en mi aplicacion quiero incluir un link que abra la pagina de Google Maps con cierta direccion que le pase como parametro? Necesito todavia la API Key?
gracias
Guilleman 08.06.2008 - 00:12 - #

Esta muy interesante y util el articulo, en verdad
Diego 11.06.2008 - 17:43 - #

Muy Buen artículo!.

Trackbacks

5 trackbacks en total.

Trabajando con el API de Google Maps

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

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

¿Cómo establecemos el nivel de Zoom inicial?

¿Cómo añadir controles?

¿Cómo cambiar el tipo de mapa?

¿Cómo insertar marcas a nuestro mapa?

¿Cómo agregar etiquetas a nuestra marca?

Archivo de ejemplo:

Lecturas recomendadas

Sobre el autor

Comentarios

Trackbacks

Editorial

Otras Notas Relacionadas

Boletín