Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/03/2016, 12:28
Avatar de madman_18
madman_18
 
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 7 meses
Puntos: 14
Pregunta Problema al generar mapa con Google Api

Hola a todos!

Peleándome una vez más con la api de google me pasa un par de cosas que no se muy bien por qué puede ser:

Mi mapa lo genero dinámicamente porque tengo que recoger los datos de latitud y longitud de la base de datos. Bien, eso lo he logrado pero al mostrar el contenedor (lo tengo oculto hasta que le den a un botón y entonces se me mostraría el mapa) y pulsar sobre un marcador, el mapa se me desplaza como si estuviese el marcador en otra zona puesto.

Os pongo unas imágenes...
Esta corresponde a cuando carga el bloque


Esto cuando pulso sobre el marcador (si veis en la zona izquierda es donde está el marcador...es pulsar y automáticamente se me desplaza hasta ahí)


Esto son los problemas principales...pero a parte (supongo que entra más en tema de CSS, si hace falta abrir un nuevo post me lo comentáis y lo pongo )

No se por qué me ocurre esto justo cuando intento ver el contenido de la ficha info del marcador



Os pongo la parte de javascript en la que genero el mapa....no le veo nada raro en lo que es la construcción pero si se me escapa algo...
Lo único "extraño" es que tengo que hacer un parseFloat para que no me casque ahí el mapa...por lo demás no le veo nada raro.
Código Javascript:
Ver original
  1. var parametros = JSON.parse(data);
  2.             var divContainer = document.getElementById('mapa-inicial');
  3.             var bounds = new google.maps.LatLngBounds();       
  4.             if (parametros.length!==0){
  5.                 var tamanioArray = (parametros.length-1);
  6.                 var ultimoRest = parametros[tamanioArray];     
  7.             }else{
  8.                 var ultimoRest = parametros[0];
  9.             }
  10.             var latCenter = parseFloat(ultimoRest["lat"]);
  11.             var lonCenter = parseFloat(ultimoRest["lon"]);
  12.             var opciones = {};
  13.             opciones={
  14.                 zoom:16,
  15.                 mapTypeId:google.maps.MapTypeId.SATELLITE,
  16.                 center:new google.maps.LatLng(latCenter,lonCenter),
  17.                 scrollwheel:true,
  18.                 scaleControl:true,
  19.                 draggable:true
  20.             };
  21.             var mapa = new google.maps.Map(divContainer,opciones);         
  22.             var i;
  23.             for (i=0;i<parametros.length;i++){
  24.                 var marker="";
  25.                 var contenido="";              
  26.                 contenido="Cada parametro ejemplo";
  27.                 var infoWindow=new google.maps.InfoWindow({content: contenido});
  28.                 marker = new google.maps.Marker({
  29.                     position: new google.maps.LatLng(parseFloat(parametros[i]["lat"]),parseFloat(parametros[i]["lon"])),
  30.                     map:mapa
  31.                 });
  32.                 google.maps.event.addListener(marker,'click',function(){
  33.                     infoWindow.open(mapa, marker);
  34.                 });            
  35.             }

Gracias por la ayuda de antemano!!!
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"