Crear un mapa en Google Maps

Publicado el 03-09-2012 | TAGS: google maps tutoriales | (0 comentarios)

Con este post iniciamos una serie de tutoriales que versarán sobre el uso de la API Google Maps.

En este primer tutorial empezaremos con algo básico, pero que nos ayudará a seguir avanzando en el uso de esta increible herramienta gratuíta que nos ofrece Google.

La primera tarea será crear un mapa y mostrarlo con las dimensiones que deseemos.

Como herramienta de trabajo podemos utilizar cualquier simple editor de texto y como lenguajes y librerias utilizaremos CSS, la librería JQuery y la versión 3 de Google Maps.

Creamos un archivo, al que llamaremos por ejemplo mapa.html

  1. <style type="text/css">
  2.  #miMapa { height: 400px; width:400px; }
  3. </style>
  1. <script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  2. <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
  3. </script>
  4. <script type="text/javascript">
  5.   $(document).ready(function () {
  6.     var zamora = new google.maps.LatLng(41.5036834, -5.743778099999986); // los parametros siempre se transmiten en este orden: (latitud,longitud)
  7.     var Options = {
  8.       zoom: 10,
  9.       center: zamora,
  10.       mapTypeId: google.maps.MapTypeId.ROADMAP
  11.     };
  12.     var map = new google.maps.Map(document.getElementById("miMapa"),
  13.         Options);
  14.        
  15.  
  16.   });
  17.  
  18. </script>

En primer lugar, definimos nuestras reglas de estilo, dándole a nuestro mapa unas dimensiones de 400 x 400 píxels.

Después cargamos los archivos de JQuery y del API Google Maps, haciendo referencia a ellos mediante una URL absoluta.

Una vez que nuestro documento está preparado, empezamos a definir nuestro mapa.

En este ejemplo, el mapa se mostrará centrado en Zamora (mi ciudad). Primeramente, instanciamos el objeto "LatLng" de la clase google.maps, para definir la latitud y la longitud en la que se encontrará situado nuestro mapa.

Seguidamente, definimos las opciones del mismo. En este caso vamos a poner las opciones más básicas, aunque podeis manejar otras, echándole una ojeada al manual de referencia de Google Maps V3.

Por último, instanciamos el objeto Map, pasándole como único parámetro el ID del elemento en donde situaremos nuestro mapa. En nuestro caso, lo situaremos en el DIV con el ID "miMapa".

!Y listo¡, así de fácil hemos creado nuestro primer mapa en Google Maps. Podeis ver el ejemplo en marcha desde aquí.

Espero poder seguir lo más pronto posible con el siguiente tutorial de este mini curso sobre Google Maps.

Si quereis que trate algún tema específico sobre Google Maps, podeis dejar vuestros comentarios o poneros en contacto.

Escribe tu comentario