Foros del Web » Programando para Internet » Javascript »

Problema con Google Maps

 Estas en el tema de Problema con Google Maps en el foro de Javascript en Foros del Web. Hola a todos! Creo que este post va aquí si no estoy confundido jeje. Querría consultaros cómo podría modificar propiedades sobre el google Maps que ...
  #1 (permalink)  
Antiguo 21/02/2013, 04:12
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Pregunta Problema con Google Maps
Hola a todos!

Creo que este post va aquí si no estoy confundido jeje.

Querría consultaros cómo podría modificar propiedades sobre el google Maps que muestro en mi página.

Tengo el siguiente problema: cuando abro la página, y carga el mapa se me visualiza así:
http://es.zimagez.com/zimage/fallo10.php

Sin embargo, cuando hago click en el icono que señala la situación del sitio, me aparece bien:

http://es.zimagez.com/zimage/buena1....or zimagez.com

Os pongo el código con el que genero el mapa, y si pudierais echarme una mano os lo agradezco (he cambiado algunos parametros como las longitudes y la url del mapa).

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5. <link href='http://fonts.googleapis.com/css?family=Merienda' rel='stylesheet' type='text/css'>
  6. <style type="text/css">
  7.   html { height: 100% }
  8.   body { height: 100%; margin: 0px; padding: 0px }
  9.   #mapa_contenedor { height: 100%;font-family: 'Merienda', sans-serif;}
  10.   .contenedor_infoMapas{width:300px;height:140px;}
  11.   .tabla_empresa{font-family: 'Merienda', sans-serif;}  
  12.   #titulo_empresa{color: #4B8CF7;font-size: 14px;}
  13.   #describe_empresa{font-size: 12px;margin-top: -10px;}
  14.   #contentInfoWindow{width: 800px;height:500px;}
  15. </style>
  16. <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
  17. <script type="text/javascript">
  18.   function initialize() {      
  19.     // SE GENERA EL MAPA
  20.     var mapita = new google.maps.LatLng(37.358697,-5.221102);
  21.     /*****************/    
  22.     // SE LE DAN LAS OPCIONES ZOOM - CENTER (DONDE ESTARÍA EL "CENTRO" DEL MAPA) - TIPO DE MAPA
  23.     var opciones = {
  24.         zoom: 17,
  25.         center: new google.maps.LatLng(datos de longitud,datos de longitud),
  26.         mapTypeId: google.maps.MapTypeId.SATELLITE //visor modo satelite
  27.         /*mapTypeId: google.maps.MapTypeId.ROADMAP //tipo carretera*/
  28.     };
  29.     /***************************************************************************************/    
  30.     // DIV DONDE SE VA A CREAR EL MAPA Y SE CREA EL MAPA
  31.         var div = document.getElementById('mapa_contenedor');
  32.         var map = new google.maps.Map(div,opciones);
  33.     /*****************************************************/
  34.     // SE GENERA EL MARCADOR Y SE PONE EN EL MAPA
  35.     var marcador = new google.maps.Marker({
  36.        position: new google.maps.LatLng(datos de longitud,datos de longitud),
  37.        map: map
  38.     });
  39.     /********************************************/
  40.     // DATOS QUE SE QUIERE EN LA VENTANA INFO
  41.     var contenido = '<div class=contenedor_infoMapas>\n\
  42.                    <table class=tabla_empresa>\n\
  43.                     <tr>\n\
  44.                         <td id=titulo_empresa><b><a href=url del mapa target=_blank> minombre</a></b></td></tr></table><br/>\n\
  45.                     <table id=describe_empresa>\n\
  46.                         <tr>\n\
  47.                            <td>dato1</td>\n\
  48.                         </tr>\n\
  49.                         <tr>\n\
  50.                             <td>dato3</td></tr><tr><td>dato2</td>\n\
  51.                         </tr>\n\
  52.                         <tr>\n\
  53.                             <td><a href=# title="Contacte con nosotros">el email</a></td>\n\
  54.                         </tr>\n\
  55. </div>\n\
  56. </table>';
  57.    /*****************************************/
  58.    /*SE CREA EL OBJETO VENTANA INFO*/
  59.    var infowindow = new google.maps.InfoWindow({
  60.         content: contenido
  61.     });   
  62.    //CON ESTO SE LE AÑADE EL EVENTO CLICK SOBRE EL MARCADOR POR SI LO CIERRAN MOSTRARÍA EL MAPA DE NUEVO.
  63.    google.maps.event.addListener(marcador, 'click', function() {
  64.        infowindow.open(map, marcador);
  65.     });    
  66.     infowindow.open(map, marcador); //PARAMETROS : 1- EL MAPA YA CONSTRUIDO, 2- EL MARCADOR ESTO LO ABRE AL CARGAR EL MAPA
  67. }
  68. </script>
  69. </head>
  70. <body onload="initialize()">
  71.   <section id="mapa_contenedor" style="width:100%;height:100%"></section>
  72. </body>
  73. </html>
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #2 (permalink)  
Antiguo 21/02/2013, 08:50
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 14 años
Puntos: 155
Respuesta: Problema con Google Maps
...no entiendo tu problema, que fallo ves???
  #3 (permalink)  
Antiguo 21/02/2013, 08:55
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con Google Maps
Cita:
Iniciado por ipraetoriux Ver Mensaje
...no entiendo tu problema, que fallo ves???
verás...el problema está que cuando me carga el mapa, no me aparece centrado a donde está el marcador de la ubicación que si no estoy confundido se marca con esta parte del código:

Código Javascript: 
Ver original
  1. center: new google.maps.LatLng(datos de longitud,datos de longitud)

Y los datos de latitud y longitud son los correctos (al menos es donde google situa el lugar xD).... y no entiendo por qué sí se me centra cuando pulso sobre el propio marcador....
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #4 (permalink)  
Antiguo 21/02/2013, 09:17
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 14 años
Puntos: 155
Respuesta: Problema con Google Maps
...bien estas confundiendo conceptos...cuando vos generas un mapa, se genera lo que se llama BOUNDS(limites) de visualización, estos limites dependen de varios factores, entre ellos la propiedad center y zoom. Con "center: new google.maps.LatLng(datos de longitud,datos de longitud)"...vos estas centrando la capa del mapa, no el marker...por eso ves el marker desplazado...lo que tenes que hacer, es extender esos bounds e incluir el marker...eso lo haces asi...



Código Javascript: 
Ver original
  1. ...
  2. ...
  3. ...
  4. var bounds = new google.maps.LatLngBounds();
  5.  
  6. var marcador = new google.maps.Marker({
  7.        position: new google.maps.LatLng(datos de longitud,datos de longitud),
  8.        map: map
  9.     });
  10.  
  11. bounds.extend(new google.maps.LatLng(lat del marker, lng del marker));
  12. map.setCenter(bounds.getCenter());
  13. map.fitBounds(bounds);
  14. ...
  15. ...
  16. ...
  #5 (permalink)  
Antiguo 21/02/2013, 10:19
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con Google Maps
Ok muchas gracias! ahora sí me centra el mapa y el marker!

Pero ahora me surge una nueva pregunta....¿por qué al aplicar el código que me has mencionado, me está sacando el zoom al máximo?

He modificado la opción zoom pero se queda al máximo de zoom.... :S
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #6 (permalink)  
Antiguo 21/02/2013, 16:35
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 14 años
Puntos: 155
Respuesta: Problema con Google Maps
...pues utiliza el metodo setZoom aplicado al mapa, y le das un numero de cuanto zoom quieres....seria despues del codigo que te pase antes...

Código Javascript: 
Ver original
  1. map.setZoom(5)
  #7 (permalink)  
Antiguo 22/02/2013, 01:21
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con Google Maps
Cita:
Iniciado por ipraetoriux Ver Mensaje
...pues utiliza el metodo setZoom aplicado al mapa, y le das un numero de cuanto zoom quieres....seria despues del codigo que te pase antes...

Código Javascript: 
Ver original
  1. map.setZoom(5)
Sí, lo he establecido pero se me queda al máximo siempre

He probado a quitarlo de opciones y a dejarlo, a parte de poner el map.setZoom(17); y nada....

Pongo el código por si hay alguna errata....

Código Javascript: 
Ver original
  1. // SE GENERA EL MAPA
  2.     var mapita = new google.maps.LatLng(37.35,-5.221102);
  3.     var bounds = new google.maps.LatLngBounds();
  4.     /*****************/    
  5.     // SE LE DAN LAS OPCIONES ZOOM - CENTER (DONDE ESTARÍA EL "CENTRO" DEL MAPA) - TIPO DE MAPA
  6.     var opciones = {};
  7.     opciones = {
  8.         zoom: 17,
  9.         center: mapita,
  10.         mapTypeId: google.maps.MapTypeId.SATELLITE
  11.     };
  12.     /***************************************************************************************/    
  13.     // DIV DONDE SE VA A CREAR EL MAPA Y SE CREA EL MAPA
  14.         var div = document.getElementById('mapa_contenedor');
  15.         var map = new google.maps.Map(div,opciones);        
  16.     /*****************************************************/
  17.     // SE GENERA EL MARCADOR Y SE PONE EN EL MAPA
  18.     var marcador = new google.maps.Marker({
  19.         position: mapita,
  20.         map: map,
  21.         draggable:false,
  22.         animation: google.maps.Animation.BOUNCE,
  23.         title: 'Nos encontramos aquí'        
  24.     });
  25.     /********************************************/
  26.     // DATOS QUE SE QUIERE EN LA VENTANA INFO
  27.     var contenido = '<div class=contenedor_infoMapas>\n\
  28.                    <table class=tabla_empresa>\n\
  29.                     <tr>\n\
  30.                         <td id=titulo_empresa><b><a href=https://maps.google.es/maps?q=Agr%C3%ADcola+Lantejuela+S.+Coop.+And.,+Sevilla&hl=es&ie=UTF8&ll=37.358697,-5.221102&spn=0.006839,0.016512&sll=40.396764,-3.713379&sspn=13.411907,33.815918&oq=agr%C3%ADcola+lantejuela+sevilla&hq=Agr%C3%ADcola+Lantejuela+S.+Coop.+And.,&hnear=Sevilla,+Andaluc%C3%ADa&t=h&z=17 target=_blank> minombre</a></b></td></tr></table><br/>\n\
  31.                     <table id=describe_empresa>\n\
  32.                         <tr>\n\
  33.                            <td>dato1</td>\n\
  34.                         </tr>\n\
  35.                         <tr>\n\
  36.                             <td>dato3</td></tr><tr><td>dato2</td>\n\
  37.                         </tr>\n\
  38.                         <tr>\n\
  39.                             <td><a href=# title="Contacte con nosotros">el email</a></td>\n\
  40.                         </tr>\n\
  41. </div>\n\
  42. </table>';
  43.    /*****************************************/
  44.    /*SE CREA EL OBJETO VENTANA INFO*/
  45.    var infowindow = new google.maps.InfoWindow({content: contenido});   
  46.     bounds.extend(mapita);
  47.     map.setCenter(bounds.getCenter());
  48.     map.fitBounds(bounds);
  49.     map.setZoom(17);
  50.    //CON ESTO SE LE AÑADE EL EVENTO CLICK SOBRE EL MARCADOR POR SI LO CIERRAN MOSTRARÍA EL MAPA DE NUEVO.
  51.    google.maps.event.addListener(marcador, 'click', function(){
  52.        infowindow.open(map, marcador);
  53.        marcador.animate('none');
  54.     });

Edito: Pongo todo el código por si hay algún error o algo :S
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
Última edición por madman_18; 22/02/2013 a las 01:40 Razón: Amplio el código
  #8 (permalink)  
Antiguo 22/02/2013, 05:51
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con Google Maps
Lo que no entiendo es qué puede estar pasando.....

La ubicación del sitio que debo mostrar en el mapa son las siguientes :

37.352706,-5.220013 Si se ponen en el Googlemaps lo carga sin problemas la ubicación.

Ahora bien....si meto estos datos a la hora de crear el mapa, es como si encontrase dicho lugar más abajo.

Si pongo las direcciones 37.394211,-5.275697 es cuando, en la web se me muestra el sitio que quiero.....¿por qué puede ser?!?!?!?!
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #9 (permalink)  
Antiguo 22/02/2013, 06:52
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con Google Maps
¿A alguien se le ocurre el por qué??? :( :( :( :(
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #10 (permalink)  
Antiguo 22/02/2013, 07:26
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 14 años
Puntos: 155
Respuesta: Problema con Google Maps
...haber en cuanto al zoom quita estas dos lineas...

Código Javascript: 
Ver original
  1. map.fitBounds(bounds);
  2.     map.setZoom(17);

..en cuanto a que se ve mas abajo, a que te refieres???...ves la marca corrida un poco???...
  #11 (permalink)  
Antiguo 22/02/2013, 08:22
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con Google Maps
Cita:
Iniciado por ipraetoriux Ver Mensaje
...haber en cuanto al zoom quita estas dos lineas...

Código Javascript: 
Ver original
  1. map.fitBounds(bounds);
  2.     map.setZoom(17);

..en cuanto a que se ve mas abajo, a que te refieres???...ves la marca corrida un poco???...
He hecho lo que me has dicho, y ahora en cuanto al zoom se aplica el que le asigno...pero no me aparece cuando carga el mapa justo donde se situa el marcador.

Me explico......Cuando carga el bloque donde tengo el mapa, carga una cosa así:

http://img405.imageshack.us/img405/4131/cargainicio.png

Si lo desplazas un poco hacia arriba, es donde está el marcador, aquí pongo la imagen:

http://img27.imageshack.us/img27/9564/carga2j.png

Y el resultado que querría que me mostrase, es el siguiente, con el marcador justo en el centro:

http://img266.imageshack.us/img266/3153/resultadoqq.png

Perdona si no me expliqué bien :)
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #12 (permalink)  
Antiguo 22/02/2013, 10:19
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con Google Maps
Una anotación jeje....

No entiendo por qué, si muestro mi html en una nueva ventana, sí me aparece el mapa centrado...Sin embargo, si dentro de una página que tengo, inserto ahí el mapa, ya es cuando ocurre el descuadre...

A mí se me está yendo la cabeza ya con el dichoso mapita.... jeje
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #13 (permalink)  
Antiguo 25/02/2013, 03:30
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con Google Maps
¿Alguna idea de por qué puede estar pasándome esto?
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"

Etiquetas: google, mapa, maps
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:25.