Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Como agrego mas de un marcador a mi mapa con google maps ?

Estas en el tema de Como agrego mas de un marcador a mi mapa con google maps ? en el foro de Frameworks JS en Foros del Web. hola a todos quiera saber la menra de agregar digamos tres coordenas para que me generen tres marcadores mi scritp es este <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script> ...
  #1 (permalink)  
Antiguo 14/11/2012, 15:44
 
Fecha de Ingreso: febrero-2011
Mensajes: 167
Antigüedad: 9 años, 8 meses
Puntos: 9
Como agrego mas de un marcador a mi mapa con google maps ?

hola a todos quiera saber la menra de agregar digamos tres coordenas para que me generen tres marcadores mi scritp es este



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
<script>
window.onload = function(){
var n=1;
//carga inicialmente el mapa
var options = {
zoom: 13
, center: new google.maps.LatLng(-12.0777778,-76.9111111)
, mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), options);

var marker = new google.maps.Marker({
position: map.getCenter()
, map: map
, title: 'Pulsa aquí'
, title: 'Pulsa aquí'
, icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/pink/blank.png'
} SERIA AQUI? );
var popup = new google.maps.InfoWindow({
content: 'Este es el Marcador 1'
});
google.maps.event.addListener(marker, 'click', function(){
popup.open(map, marker);
});
};
//da coordenadas al marcador 1 a la funcion mueve_mapa()
function marcador1(){
mueve_mapa(-12.0777778,-76.9111111,'Este es el Marcador 1');
}
//da coordenadas al marcador 2 a la funcion mueve_mapa()
function marcador2(){
mueve_mapa(-12.0489, -77.0010,'Este es el Marcador 2');
}
//da coordenadas al marcador 3 a la funcion mueve_mapa()
function marcador3(){
mueve_mapa(0.0000, 0.0000,'Este es el Marcador 3');
}
function mueve_mapa(lat,long,mensaje){
var options = {
zoom: 13
, center: new google.maps.LatLng(lat, long)
, mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker({
position: map.getCenter()
, map: map
, title: 'Pulsa aquí'
, icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/pink/blank.png'
});
var popup = new google.maps.InfoWindow({
content: mensaje
});
google.maps.event.addListener(marker, 'click', function(){
popup.open(map, marker);
});
}
</script>
  #2 (permalink)  
Antiguo 15/11/2012, 08:57
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 9 años, 7 meses
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

Etiquetas: funcion, google, javascript, js, mapa, maps, marcador
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:41.