¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Novedades visuales en Google Maps

La semana pasada tuvo lugar en San Francisco un evento anual que Google prepara. Es conocido como Google I/O y en él se explican las últimas novedades de desarrollo que Google tiene planteadas para sus productos.

Uno de los productos de Google es Google Maps y como he hablado bastante de Maps en la página… pues he pensado que sería interesante ver las novedades que nos trae Google como desarrolladores. Sorprendentemente solo tenemos una que podamos tocar nosotros.

En Google han pensado que ha llegado la hora de darle un lavado de cara a Google Maps y han creado un “visual refresh” como ellos lo llaman. Estos cambios incluyen:

  • Nuevas capas base para los mapas
  • Los controles del mapa, marcadores e InfoWindows han sido rediseñados.
  • El zoom ahora aparece arriba a la derecha en vez de arriba a la izquierda.
  • Las fuentes por defecto han cambiado.
  • La propiedad del marcadory raiseOnDrag ha sido reemplazada por crossOnDrag.
  • Se han eliminado todas las sombras. Las sombras creadas a propósito serán ignoradas.

Estos cambios se pueden ir probando optando a una beta. Entrará como modo experimental en Agosto y se convertirá en el nuevo estilo por defecto en Noviembre.

No obstante, podemos activarlo manualmente en los mapas desde ya. Veamos cómo.

Usando el nuevo Google Maps

Para ello únicamente tenemos que establecer la propiedad google.maps.visualRefresh a trueantes de que creemos el mapa. Veamos el ejemplo.

google.maps.visualRefresh = true;  
var map;

function initialize() {  
  var mapOptions = {
    zoom: 8, 
    center: new google.maps.LatLng(37.38264, -5.996295), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  }; 

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize);

No obstante, tengo que destacar que necesitas usar la versión experimental de Google Chrome, para ello cambia la URL de Maps por esta:

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false

Abajo puedes ver un ejemplo usando ambos tipos de mapas. A la izquierda antes y a la derecha después. ¿Qué pasa…? ¡Siempre he querido poder decir eso! ¡Y no soy cirujano plástico ni vendo nada en la teletienda!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!