Cargar Google Maps v3

28/Ago/2012 Google , , , , , 8 Comentarios

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:

  1. <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.

  1. <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.

  1. 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:

  1. var mapOptions = {
  2. zoom: 12,
  3. center: new google.maps.LatLng(40.674389,-4.700432),
  4. mapTypeId: google.maps.MapTypeId.ROADMAP
  5. };

Todo este código lo vamos a poner en un método initialize.

  1. function initialize(){
  2. var mapOptions = {
  3. zoom: 12,
  4. center: new google.maps.LatLng(40.674389,-4.700432),
  5. mapTypeId: google.maps.MapTypeId.ROADMAP
  6. };
  7. map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  8. }

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.

  1. 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:

  1. html, body, #map_canvas {
  2. height: 100%;
  3. }

Ya tenemos cargado nuestro mapa con Google Maps v3.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

8 comentarios en “Cargar Google Maps v3”

Víctor Cuervo

Juan

Thanks a lot for the tutorial, but the source link doesn´t work!

Víctor Cuervo

Paty

Muchas gracias!! 😀

Víctor Cuervo

carlos

Hola saludos tengo un problema y es que el mapa dentro del div no se ve completo se ve mas pequeño y cuando uso zoom cambia de tamaños …lo que quiero es que el mapa tome el tamaño de la división

Víctor Cuervo

Jorge

No es verdad la etiqueta no funciona de esta manera..

Saludos

tengo de ejemplo…

Y no funciona

Slds.

Víctor Cuervo

Víctor Cuervo

@Alexander Diaz,

Bastaría con tener la capa del mapa dentro de la celda.

<td><div id="map_canvas" style="width: 50%; height: 50%"></div></td>
Víctor Cuervo

Alexander Diaz

Si se quisiera adicionar el mapa dentro de una combinacion de celdas en una tabla, que carga información de una base de datos, que modificaciones se deben realizar ó tener en cuenta?

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*