Google Maps en Páginas Web
Características de Google Maps
La característica que sin duda más llama la atención del funcionamiento de Google Maps es su interactividad.
Podemos pinchar una y otra vez en el mapa de Google Maps para movernos por el mundo, hacer zoom y elegir el tipo del mapa sin necesidad de recargar la página, todo ello de forma fácil e intuitiva.
Este tipo de aplicación web se encuadra dentro de la tecnología que Adaptive Path ha dado por denominar AJAX (Asynchronous Javascript + XML).
Google Maps Key
El primer paso para usar Google Maps es obtener una clave o key para el dominio donde lo vamos a insertar Google Maps, que se nos concede cuando nos damos de [alta el servicio Google Maps]. Esta key de Google Maps es única para cada usuario y dominio, y es restrictiva en lo que se refiere a su uso.
Configurar Google Maps
Primero incluimos la librería donde está el API Javascript para los mapas de Google.
<script src="http://maps.google.com/maps?file=api&v=2&key=TU KEY GOOGLE MAPS" mce_src="http://maps.google.com/maps?file=api&v=2&key=TU KEY GOOGLE MAPS" type="text/javascript"></script>
//funcion que carga Google Maps
<script type="text/javascript"><!--
function load()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("mapa_google"));
map.openInfoWindowHtml(new GLatLng(latitudGoogle,longitudGoogle),Midireccion);
map.addControl(new GSmallMapControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(latitudGoogle,longitudGoogle), 17);
}
}
// --></script>
//Capa donde se muestra google maps
<div id="mapa_google"></div>Calcular la Longitud y la Latitud
Para calcular las geocoordenadas longitud y latitud que te pide Google Maps, utiliza el siguietne enlace.
Enlace para [calcular las coordenadas]
Parámetros de Google Maps
map.setMapType(G_SATELLITE_TYPE);
setMapType nos permite especificar el tipo de mapa que queremos visualizar. Como puede verse en los selectores situados arriba a la derecha en el mapa, podemos elegir entre las vistas "Map" (mapa vectorial), "Satellite" (fotografía de satélite) y "Hybrid" (combina ambas vistas). En nuestro caso, ya que Google todavía no dispone de mapas vectoriales para España, hemos elegido la vista de satelite que nos muestra la fotografía aérea de la zona.
Además existen otras 2 vistas de google maps.
• Street View vista del mapa a pie de calle y desplazarse por ellas.
• Tráfico: esta vista es idéntica a la vista de mapa (mira más abajo), pero también ofrece información sobre el tráfico si está disponible en el área mostrada en ese momento. El color rojo indica un tráfico denso, el amarillo tráfico lento, el verde velocidad normal y el gris indica que no hay datos disponibles acerca del tráfico.
map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl());
addControl nos permite incorporar elementos de control al mapa, tal y como son el control de zoom que vemos a la izquierda y el selector de tipo de mapa.
Dependiendo de nuestras necesidades podemos incorporar estos controles, o incluso versiones de menor tamaño (GSmallMapControl) para mapas en tamaño reducido. Por defecto el mapa se muestra sin controles.
map.centerAndZoom(new GPoint (latitud,longitud), 3);
Con esta sentencia indicamos a nuestro GMap qué lugar queremos que muestre, mediante el método centerAndZoom.
Los parámetros son un GPoint (que generamos a continuación a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar, de 1 a 16, siendo el nivel 1 el más cercano y el 16 el más alejado.
Google Maps ubica los puntos en los mapas a partir de su latitud y longitud.
Esta información debemos suministrarla nosotros, y para ello lo más adecuado es usar alguno de los servicios de geocoding disponibles en la red. Uno de ellos es por ejemplo el de InfoSports, en el que con simplemente pulsar en cualquier punto del mapa obtendremos la latitud y longitud deseadas para ese punto.
Existen otros servicios de geocoding disponibles de forma gratuita en la red que no exigen buscar el punto físico en el mapa, tales como Geocoder.us y geonames.org, en los que podemos realizar búsquedas a partir del nombre de la ubicación que buscamos.
Podemos crear marcadores de diversos puntos en el mapa.
var point = new GPoint (latitud, longitud); var marker = new GMarker(point); map.addOverlay(marker); map.centerAndZoom(point, 3);
Creamos en punto con Gpoint. Creamos un marcador en el punto correspondiente y centramos el mapa en dicho punto.
Vistas adicionales:
Street View: En algunas ubnicaciones puedes ver imágenes a pie de calle y desplazarte por ellas.
Tráfico: esta vista es idéntica a la vista de mapa (mira más abajo), pero también ofrece información sobre el tráfico si está disponible en el área mostrada en ese momento. El color rojo indica un tráfico denso, el amarillo tráfico lento, el verde velocidad normal y el gris indica que no hay datos disponibles acerca del tráfico.
Enlace al [manual de referencia de la API de Google Maps]
Asistente de Google Maps
Otra opción es añadir el mapa de google con el [asistente de Google Maps]
Añadir una Ubicación, Lugar o Dirección a Google Maps
Busca el lugar que te gustaría añadir en Google Maps, para averiguar si ya se ha incluido. Si no está incluido, haz clic en Añadir un lugar al mapa en el panel de la izquierda.
Se mostrará un marcador en el centro del mapa. Arrastra el marcador a la ubicación correcta o escribe una dirección. Haz clic en Siguiente. Añade los detalles del lugar y haz clic en Guardar.
Si eres el propietario de una empresa, puedes añadir tu empresa a Google Maps y verificarla utilizando [Local Business Center]. Si quieres añadir un lugar o una empresa de la que no eres el propietario, observa este [vídeo sobre cómo añadir lugares a Google Maps] (en inglés).
Comentarios Total 1 comentarios
raul -
Publicado: 15/03/2010 11:31:11
muy bueno, siempre quise saber cómo se mostraba el mapa de google en otras páginas...
