Marcadores multiples en Google Maps

Publicado el 20-09-2012 | TAGS: google maps tutoriales | (5 comentarios)

En el presente capítulo de nuestro curso de Google Maps, seguiremos introduciéndonos en tareas cada vez más complejas para el uso de la estupenda API de Google.

Si tienes una página web, imagínate que quieres localizar en un mismo mapa, por ejemplo a todas las empresas que colaboran contigo, o por ejemplo a marcar las diferentes localizaciones de tus oficinas.

Para ello, podriamos incluir varios marcadores, lo cual haría que la tarea fuera tediosa, difícil de actualizar y poco útil. O bien, podriamos valernos de un documento .XML externo, que fuera creándonos automáticamente dichos marcadores, como haremos en el presente tutorial.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <markers>
  3. <marker lat="41.5136834" lng="-5.32077809" title="marcador uno"/>
  4. <marker lat="41.6206834" lng="-5.40377809" title="marcador dos"/>
  5. <marker lat="41.3606834" lng="-5.86977809" title="marcador tres"/>
  6. <marker lat="41.1106834" lng="-5.02377809" title="marcador cuatro"/>
  7. </markers>

En primer lugar, crearemos un nuevo archivo .XML, que tendrá como etiqueta padre "markers", la cual contendrá etiquetas "marker" y en cada una de ellas definiremos los atributos "lat" para la latitud, "lng" para la longitud y "title" para el título qeu mostraremos al pasar nuestro cursor por encima de dicho marcador.

Seguidamente, empezaremos a crear un nuevo archivo, al que llamaremos en nuestro ejemplo mapa_multimarcadores.html

  1. <style type="text/css">
  2. #map_canvas { height: 500px; width:500px; display:block; }
  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.  
  7. <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
  8.  
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     var latlng = new google.maps.LatLng(41.5036834, -5.743778099999986); // los parametros siempre se transmiten en este orden: (latitud,longitud)
  12.     var myOptions = {
  13.       zoom: 8,
  14.       center: latlng,
  15.       mapTypeId: google.maps.MapTypeId.ROADMAP
  16.     };
  17.     var map = new google.maps.Map(document.getElementById("map_canvas"),
  18.         myOptions);
  19.        
  20.    
  21.    
  22.    
  23.     $.get("sitemap.xml", function (xml) {
  24.     $(xml).find("marker").each(function () { /*loop*/
  25.        
  26.        var lat = $(this).attr('lat');
  27.        var lng = $(this).attr('lng');
  28.        var title = $(this).attr('title');
  29.  
  30.            
  31.      
  32.  
  33.        var marcador = new google.maps.Marker({
  34.         position: new google.maps.LatLng(lat, lng),
  35.         map: map,
  36.         title: title,
  37.         //icon: icon
  38.         })
  39.    
  40.  
  41.    
  42.    
  43.     });/**/
  44.    
  45.     });/** end loop*/
  46.    
  47.    
  48.    
  49.    
  50.    
  51.     }); /* end document ready*/
  52.    
  53.    
  54.    
  55.    
  56.  
  57.  
  58. </script>
  59.  
  60.  
  61. <div id="map_canvas"></div>

Definiremos nuestro estilo para el ancho y el alto de nuestro mapa, y seguidamente importaremos los archivos de los API de JQuery y Google Maps respectivamente.

Definiremos después nuestras opciones básicas para crear un mapa, al igual que lo hicimos en anteriores capítulos del curso.

En este caso, utilizaremos JQuery, para que tome el archivo "sitemap.xml" y nos haga una búsqueda en el mismo de todos los elementos "marker" que contenga.

Por cada uno de ellos, haremos un loop, para recoger los valores de los atributos latitud, longitud y título en cada iteración.

Asimismo, en cada ciclo del loop, crearemos una nueva instancia del metodo Marker de Google Maps, con las opciones recogidas en el loop.

De este modo, por cada ciclo, nos creará automáticamente un nuevo marcador con las coordenadas y las opciones que hemos definido.

Espero que os haya resultado sencillo y práctico. En el siguiente capítulo, seguiremos adentrándonos en este mismo ejemplo, para crear múltiples marcadores en el mapa, desde una base de datos MySQL. !Hasta la próxima¡.

Comentarios

lucas escrito el 25-10-2013

funciona, muchas gracias :DD

Montse escrito el 24-10-2013

Funciona!!! el detalle es que no saben leer código, si lo copian tal cual no funcionará deben identificar el nombre de su archivo .xml línea 23 $.get("sitemap.xml", function (xml) deben reemplazar por el nombre de su archivo .xml ejemplo: $.get("nombre_de_su_archivo.xml",function (xml) y listo!!!

David escrito el 02-10-2013

Buen aporte, era justo lo que necesitaba, lo unico que para que funcione hay que quitar el espaciio que hay al principio del archivo xml. el primer caracte debe ser el < no acepta nada mas.

Gracias
christian escrito el 05-09-2013

Lo probe y no funciona!!! :/

Jorge escrito el 26-08-2013

no funciona

Escribe tu comentario