Hace ya tiempo que vimos como cargar Google Maps en nuestra página web, si bien este ejemplo estaba basado en Google Maps v2. Versión a la cual Google ha dejado de dar soporte, siendo ahora oficial Google Maps v3.
Es por ello que en las siguientes líneas veremos como podemos cargar Google Maps v3 en nuestra página web.
Antes de empezar mencionar que entre las características de Google Maps v3 encontramos:
- Adecuación al HTML5.
- Soprote para dispositivos móviles
- Nueva redefinición del API
- Nuevas funcionalidades para la gestión de mapas
- Soportes multidioma
- …
Manos a la obra… lo primero que tenemos que hacer es cargar la librería:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
Como podemos ver ya no se necesita el uso de la clave para cargar Google Maps.
La estructura de la página será muy similar a anteriores versiones, ya que lo que tendremos que disponer será de una capa DIV para la carga del mapa.
<div id="map_canvas" style="width: 50%; height: 50%"></div>
Ahora pasaremos a crear nuestro código Javascript. Lo que vamos a hacer es crear un objeto de tipo google.maps.Map. A este constructor le vamos a pasar una referencia de la capa sobre la que se va a cargar y las opciones del mapa.
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
Como podemos apreciar en el código le hemos pasado un campo mapOptions. Dicho campo reune las propiedades relativas al mapa, como el punto central del mapa, el tipo de mapa a cargar, el zoom a aplicar,… el código nos queda de la siguiente forma:
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.674389,-4.700432),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Todo este código lo vamos a poner en un método initialize.
function initialize(){
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.674389,-4.700432),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
Y es que este método initialize lo vamos a ejecutar nada más cargar la página. Es por ello, que a la ejecución del evento onLoad de la página le asociamos este método.
google.maps.event.addDomListener(window, 'load', initialize);
Por último tenemos que tener unas consideraciones para el funcionamiento de Google Maps v3 y es que tanto el BODY como el HTML del documento dónde carguemos el mapa tienen que tener una altura de 100%. Es por ello que vamos a añadir el siguiente estilo:
html, body, #map_canvas {
height: 100%;
}
Ya tenemos cargado nuestro mapa con Google Maps v3.
