Incluir un mapa de tipo físico

Hacemos un Google Map físico, con el tipo de mapa G_PHYSICAL_MAP y aprendemos a definir los tipos de mapa que aparecen en el control de selección de tipos de mapas de Google.

23/7/08 - En este artículo vamos a mostrar cómo trabajar con un tipo de mapa de Google especial, presentado hace poco en el sistema de Google Maps. Se trata del mapa físico, que muestra la tierra con un dibujo de su superficie que representa las montañas, ríos y otros accidentes geográficos.

El mapa físico ha sido presentado hace relativamente poco tiempo. Al menos cuando iniciamos este manual del API de Google Maps no existía. Por tanto, en los artículos publicados anteriormente no habíamos hablado de la posibilidad de integrar un mapa físico. Lo veremos ahora.

En el control de selección de tipo de mapa no aparece por defecto el tipo de mapa físico, con lo que no se puede seleccionar por el usuario, a no ser que nosotros hagamos algo para habilitarlo. Los tipos de mapas disponibles para el usuario por defecto a la hora de trabajar con Google Maps son los que habíamos visto con anterioridad:

• G_NORMAL_MAP: es un mapa político, de países, ciudades con sus calles, etc.
• G_SATELLITE_MAP: mapa de imágenes de satélite.
• G_HYBRID_MAP: Un mapa que superpone la vista de calles encima de la vista satélite.

Por eso cuando colocamos el control para cambiar el tipo de mapa, nos aparecen tres botones, para cambiar entre cualquiera de estos tipos de mapas.

Ahora bien, nosotros podemos aumentar la disponibilidad de tipos de mapas de Google, para incluir nuevos mapas, como el mapa físico (G_PHYSICAL_MAP), otros mapas existentes, cualquiera que puedan sacar en el futuro, o incluso mapas creados por nosotros mismos.

Para indicar el tipo de mapa que deseamos que se muestre se hace de esta manera:

map.setMapType(G_PHYSICAL_MAP);

Definir los tipos de mapa del control de selección de tipos de mapa

Ahora, para incluir otros tipos de mapas en el control de selección de tipo de mapa, debemos utilizar el método addMapType() de la clase GMap2, indicando como parámetro el nombre del tipo de mapa que queremos incluir. Por ejemplo:

map.addMapType(G_PHYSICAL_MAP);

Esto parece que no es un paso obligatorio para poder mostrar un tipo de mapa, sino para que aparezca en el control y el usuario lo pueda seleccionar. Es decir, para hacer un mapa de Google físico con map.setMapType(G_PHYSICAL_MAP) no es necesario que lo haya incluido previamente con map.addMapType(G_PHYSICAL_MAP);

Ahora, para quitar un tipo de mapa del control, lo hacemos a través del método removeMapType() de la clase GMap2, indicando un parámetro con el nombre del tipo de mapa que queremos deshabilitar del control. Por ejemplo:

map.removeMapType(G_HYBRID_MAP);

Ejemplo de mapa de Google con dibujo tipo físico

Para acabar voy a mostrar cómo crear un mapa de Google físico, que además tenga un control que permita cambiar entre los tipos de mapa político, satélite y físico.

function load() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));   
      map.setCenter(new GLatLng(40.201022,-3.8736677),6);
      map.addMapType(G_PHYSICAL_MAP);
      map.removeMapType(G_HYBRID_MAP);
      map.addControl(new GMapTypeControl());
      map.setMapType(G_PHYSICAL_MAP);
   }
}

El código que podemos ver incluye llamadas a los métodos: addMapType(G_PHYSICAL_MAP), para indicar que en el control de selección de tipo de mapa se debe incluir el mapa físico. map.removeMapType(G_HYBRID_MAP), para eliminar del control de selección de tipos de mapas el mapa híbrido. El método addControl(new GmapTypeControl()) para incluir en la interfaz el control de usuario para cambiar el tipo de mapa. Y por último setMapType(G_PHYSICAL_MAP), para definir que el mapa que debe mostrarse desde el principio debe ser el mapa físico.

Podemos ver el ejemplo en marcha en una página aparte.

Puedes ver el código fuente de la página para ver el código del ejemplo completo.

+ 1 manual relacionado
+ 2 categorias relacionadas

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en Ajax
+ Entrar en Google Maps

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba