Seguimos con el desarrollo de mapas de Google, vemos los tipos de mapa o tipos de vista, satélite, calles y mapa híbrido.
Al desarrollar con Google Maps podemos escoger el tipo de mapa que verán los usuarios, entre las distintas vistas predefinidas como son la vista satélite, vista de calles o vista híbrida (satélite y calles en modo semi-transparente.
Para definir el tipo de mapa en un mapa de Google tenemos el método setMapType() de la clase GMap2. El método setMapType() recibe el tipo de mapa que se desea ver. En principio existen los siguientes tipos de mapa:
G_NORMAL_MAP
Es para un mapa normal, que es el mapa político, con los nombres de localizaciones. Este mapa es el definido por defecto. En principio aparecen los distintos países, pero si ampliamos veremos las ciudades importantes, carreteras, etc y si hacemos más zoom sobre una población veremos los nombres de las calles, plazas, barrios, etc.
G_SATELLITE_MAP
Este mapa permite ver el mundo con imágenes tomadas desde satélite.
G_HYBRID_MAP
Este mapa combina la vista satélite y la vista normal. Sobre las fotos satélite se pintan encima las distintas localizaciones, calles, etc.
Veamos un mapa de Google en el que definimos el tipo de mapa. Mostramos una vista satélite en este caso.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//función para cargar un mapa de Google.
//La llamamos cuando la página se ha terminado de cargar. Evento onload
function load() {
//comprobamos si el navegador es compatible con los mapas de google
if (GBrowserIsCompatible()) {
//instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar el mapa
var map = new GMap2(document.getElementById("map"));
//centramos el mapa en una latitud y longitud deseadas
map.setCenter(new GLatLng(41.375987390149106, 2.1778035163879395), 17);
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Con este código tendremos una vista satélite de Barcelona centrada en la plaza donde está la estatua de Colón señalando con el dedo. Un par de cosas que hay que ver:
Ahora, si deseamos un mapa híbrido, sólo tendremos que cambiar la línea:
map.setMapType(G_SATELLITE_MAP);
Por esta otra línea, donde especificamos otro tipo de mapa:
map.setMapType(G_HYBRID_MAP);
También podemos probar a quitar esa línea donde especificamos el tipo de mapa. Veremos como sale entonces el mapa de calles. Es lo mismo que si especificásemos el tipo de mapa normal.
map.setMapType(G_NORMAL_MAP);
Para definir el tipo de mapa en un mapa de Google tenemos el método setMapType() de la clase GMap2. El método setMapType() recibe el tipo de mapa que se desea ver. En principio existen los siguientes tipos de mapa:
G_NORMAL_MAP
Es para un mapa normal, que es el mapa político, con los nombres de localizaciones. Este mapa es el definido por defecto. En principio aparecen los distintos países, pero si ampliamos veremos las ciudades importantes, carreteras, etc y si hacemos más zoom sobre una población veremos los nombres de las calles, plazas, barrios, etc.
G_SATELLITE_MAP
Este mapa permite ver el mundo con imágenes tomadas desde satélite.
G_HYBRID_MAP
Este mapa combina la vista satélite y la vista normal. Sobre las fotos satélite se pintan encima las distintas localizaciones, calles, etc.
Veamos un mapa de Google en el que definimos el tipo de mapa. Mostramos una vista satélite en este caso.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//función para cargar un mapa de Google.
//La llamamos cuando la página se ha terminado de cargar. Evento onload
function load() {
//comprobamos si el navegador es compatible con los mapas de google
if (GBrowserIsCompatible()) {
//instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar el mapa
var map = new GMap2(document.getElementById("map"));
//centramos el mapa en una latitud y longitud deseadas
map.setCenter(new GLatLng(41.375987390149106, 2.1778035163879395), 17);
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Con este código tendremos una vista satélite de Barcelona centrada en la plaza donde está la estatua de Colón señalando con el dedo. Un par de cosas que hay que ver:
- En la línea que carga el API de Google Maps tenemos que sustituir "AQUI-TU-CLAVE" por la clave de usuario del API proporcionada en Google al registrarnos para usar sus mapas en nuestro sitio web. http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE
- La línea map.setMapType(G_SATELLITE_MAP); es donde cargamos el tipo de vista.
| Nota: Existen otros artículos anteriores donde hemos explicado temas adicionales de los mapas de Google que deberías conocer para entender este código.: Google Maps API 2 |
Ahora, si deseamos un mapa híbrido, sólo tendremos que cambiar la línea:
map.setMapType(G_SATELLITE_MAP);
Por esta otra línea, donde especificamos otro tipo de mapa:
map.setMapType(G_HYBRID_MAP);
También podemos probar a quitar esa línea donde especificamos el tipo de mapa. Veremos como sale entonces el mapa de calles. Es lo mismo que si especificásemos el tipo de mapa normal.
map.setMapType(G_NORMAL_MAP);
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...