Marcadores en Google Maps

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

Continuamos con el mini curso de Google Maps tomando como punto de partida el archivo que creamos en el anterior tutorial en el que habiamos creado nuestro mapa centrado en una localización específica.

La siguiente tarea será añadir un marcador al mismo y crear una ventana de información al hacer click en el punto marcado.

Del mismo modo que en el anterior ejemplo, podemos ayudarnos de unsimple editor de texto. Crearemos un archivo al que llamaremos en este caso mapa2.html.

  1. <style type="text/css">
  2.      #miMapa { height: 400px; width:400px; }
  3.     </style>
  4.  
  5.     <script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  6.     <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
  7.     </script>
  8.     <script type="text/javascript">
  9.       $(document).ready(function () {
  10.         var zamora = new google.maps.LatLng(41.5036834, -5.743778099999986); // los parametros siempre se transmiten en este orden: (latitud,longitud)
  11.         var Options = {
  12.           zoom: 10,
  13.           center: zamora,
  14.           mapTypeId: google.maps.MapTypeId.ROADMAP
  15.         };
  16.         var map = new google.maps.Map(document.getElementById("miMapa"),
  17.             Options);
  18.            
  19.            
  20.             //creamos nuestro marcador
  21.             var marcador = new google.maps.Marker({
  22.             position: new google.maps.LatLng(41.5036834, -5.743778099999986),
  23.             map: map,
  24.             title: 'Marcador situado sobre Zamora',
  25.             animation: 'DROP',
  26.             icon: 'star-3.png'
  27.             });
  28.            
  29.            
  30.             //ahora creamos nuestra ventana de información
  31.              var ventana = new google.maps.InfoWindow({
  32.              content: "Aquí mostramos el texto que aparecerá en nuestra ventana."
  33.              });
  34.              google.maps.event.addListener(marcador, 'click', function() {
  35.              ventana.open(map, marcador);
  36.              });
  37.            
  38.      
  39.       });
  40.      
  41.     </script>
  1. <div id="miMapa"></div>

Como comentamos anteriormente, partimos del mapa que creamos anteriormente. Para crear el marcador, en primer lugar, hemos asignado a la variable marcador una nueva instancia del objeto Marker de Google Maps, pasándole como opciones la posición del marcador, que en este caso será la misma que la localización central de nuestro mapa, el mapa al que se le aplicará, y un título que aparecerá cada vez que situemos el cursor de nuestro ratón encima del marcador.

Como opciones adicionales, el marcador tendrá una animación (animation), en este caso tiene el valor de DROP, en el que el marcador cae desde la parte superior del mapa y rebota en el punto marcado. Las opciones de animación en este caso serían DROP y BOUNCE.

Otra de las opciones adicionales será la posibilidad de que nuestro marcador tenga un icono (icon) personalizado. Para ello, nos valdremos de una excelente herramienta para elegir y modificar la amplia colección de iconos para Google Maps en la web http://mapicons.nicolasmollet.com/.

Solamente debemos descargarnos el icono más adecuado y escribir la ruta hacia el mismo.

Nuestra segunda tarea consistirá en crear una ventana informativa a nuestro marcador. Para ello, haremos uso de la clase InfoWindow. Asignaremos a la variable ventana una nueva instancia de la clase, pasándole como única opción el texto que deseamos que muestra en la ventana informativa.

Sólo nos queda crear un llamador o listener para que cuando hagamos click a nuestro marcador aparezca la ventana. Para ello, hacemos uso del manejador de eventos addListener, pasándole como parámetros en primer lugar nuestro marcador, en segundo lugar el evento que dispara la acción, en este caso "click" y en tercer lugar una función que llamará a la clase infoWindow para que abra la ventana, pasándole en esta función los parámetros del mapa al que se aplicará y del marcador que hemos creado.

Podeis ver el resultado desde el siguiente enlace.

Con este tutorial, hemos avanzado un poco más en el conocimiento del API Google Maps V3, aunque sus posibilidades son amplias y solo nuestra imaginación puede ser el límite para crear todo tipo de funcionalidades.

En el siguiente tutorial, veremos como poder cargar varios marcadores desde un documento XML. Espero que os vaya resultando sencillo y práctico ;).

Escribe tu comentario