Ver Mensaje Individual
  #2 (permalink)  
Antiguo 15/11/2012, 09:57
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 1 mes
Puntos: 192
Respuesta: Como agrego mas de un marcador a mi mapa con google maps ?

Es muy sencillo. Usá este script como guía. Te comenté parte por parte para que entiendas qué se hace:

Código Javascript:
Ver original
  1. // array de ubicaciones. Cada elemento es un array con HTML para la infoWindow y las coordenadas.
  2. var ubicaciones = [
  3.    
  4.   ['<div style="height:120px"><strong>Argentina</strong><br><em>Lorem ipsum</em><br>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit.</div>', -28.806173508854766, -57.83203125],
  5.  
  6.   ['<div style="height:120px"><strong>Brasil</strong><br><em>Lorem ipsum</em><br>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit.</div>', -14.604847155053898, -51.6796875],
  7.  
  8.   ['<div style="height:120px"><strong>Bolivia</strong><br><em>Lorem ipsum</em><br>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit.</div>', -16.299051014581817, -65.0390625]
  9. ];
  10.  
  11. //creo el marcador, con la imagen que quiero
  12. var image = new google.maps.MarkerImage('http://gmaps-samples.googlecode.com/svn/trunk/markers/pink/blank.png');
  13.  
  14. //creo el mapa, le asigno el elemento (div con id=map_canvas) y paso las configuraciones (zoom, centrado, tipo de mapa)
  15. var map = new google.maps.Map(document.getElementById('map_canvas'), {
  16.   zoom: 3,
  17.   center: new google.maps.LatLng(-25.324167,-61.347656),
  18.   mapTypeId: google.maps.MapTypeId.ROADMAP
  19. });
  20.  
  21. //creo el infowindow
  22. var infowindow = new google.maps.InfoWindow();
  23.  
  24. //declaracion de variables para cada marcador
  25. var marker, i;
  26. var markers = [];
  27.  
  28. //recorro el array de ubicaciones definido al principio y agrego un marker para cada una
  29. for (i = 0; i < ubicaciones.length; i++) {  
  30.   marker = new google.maps.Marker({
  31.     position: new google.maps.LatLng(ubicaciones[i][1], ubicaciones[i][2]),
  32.     map: map,
  33.     icon: image
  34.   });
  35.  
  36.  //Creo el infowindow para cada marker y se lo asigno al evento click
  37.  markers.push(marker);
  38.   google.maps.event.addListener(marker, 'click', (function(marker, i) {
  39.     return function() {
  40.       infowindow.setContent(ubicaciones[i][0]);
  41.       infowindow.open(map, marker);
  42.     }
  43.   })(marker, i));
  44. }
  45.  
  46. //fin

Acá estaría aplicado:
http://jsbin.com/obujaz/2/edit

Espero te sirva.
__________________
nahueljose.com.ar