Foros del Web » Programando para Internet » Jquery »

Botón .slideToggle(); no deja ver mapa Street View containers

Estas en el tema de Botón .slideToggle(); no deja ver mapa Street View containers en el foro de Jquery en Foros del Web. Buenos días Yo oculto y visualizo un mapa "Street View containers" así: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original $ ( document ) . ready ...
  #1 (permalink)  
Antiguo 24/05/2018, 09:57
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Pregunta Botón .slideToggle(); no deja ver mapa Street View containers

Buenos días
Yo oculto y visualizo un mapa "Street View containers" así:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     $('#marco_mapa').slideToggle();
  3.         $('#ver_mapa_btn').on('click',function(){
  4.             $('#marco_mapa').slideToggle('slow');
  5.  
  6.             enlace  = $(this).attr('href');
  7.             $('html, body').animate({
  8.                 scrollTop: $(enlace).offset().top
  9.             }, 1000);
  10.     })
  11.  
  12. [HIGHLIGHT="HTML"]
  13. <a href="#mapa" id="ver_mapa_btn" title="Ver mapa" >Ver mapa</a>

Pero cuando abro el mapa se ve negro.
¿Cómo hago para que se vea el mapa?

Gracias por su ayuda

});

[/HIGHLIGHT]
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 24/05/2018, 13:50
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Creo que sucede eso porque, en la primera instrucción, justo antes de delegar el clic, cambias la visibilidad del mapa. Prueba quitando o comentando esa línea para descartar o confirmar que sea ese el motivo.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 24/05/2018, 14:34
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Hola Alexis 88
Si claro yo elimino:
Código Javascript:
Ver original
  1. $('#marco_mapa').slideToggle();
Y funciona bien pero yo lo que deseo es ocultar "#marco_mapa" al inicio.
Que yo abra la página y no este visible pero que si presiono "#ver_mapa_btn" se vea el mapa y si lo vuelvo a presionar se oculte.

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #4 (permalink)  
Antiguo 24/05/2018, 23:53
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Estuve haciendo pruebas y, por lo que vi, la carga del mapa se adapta a la del elemento HTML en el que se visualizará, pero no ocurre lo mismo cuando este último cambia de tamaño (por eso no se ven las imágenes). Sin embargo, la solución es muy simple: dentro de los paréntesis del método .slideToggle() que usas en la ejecución del clic, como segundo argumento (función que se ejecutará al terminar de ejecutarse el efecto [Fuente]), invoca a la función que realiza la carga del mapa. Por ejemplo, en la página de Google Maps, hay un código de referencia en el que se utiliza una función de nombre initialize() (en otros ejemplos se llama initMap()) la cual se encarga de la carga del mapa. Por tanto, solo necesitarías colocar ese nombre como segundo argumento entre los paréntesis:

Código Javascript:
Ver original
  1. $('#ver_mapa_btn').on('click',function(){
  2.     $('#marco_mapa').slideToggle('slow', initialize);
  3.  
  4.     //Instrucciones
  5. });

__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 24/05/2018 a las 23:59 Razón: Especificación
  #5 (permalink)  
Antiguo 25/05/2018, 09:58
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Hola Alexis 88
Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #6 (permalink)  
Antiguo 26/05/2018, 08:28
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Hola Alexis 88
Me funciona, pero cuando doy clic al botón para que se cierre pierde esta propiedad y no se cierra
Código Javascript:
Ver original
  1. $('#marco_mapa').slideToggle('slow', initMap);

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #7 (permalink)  
Antiguo 26/05/2018, 13:20
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Acabo de hacer una prueba y no se me presentó ese problema. Puedes verlo aquí para compararlo con lo que tienes hecho y y así puedas identificar y corregir lo que esté mal.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #8 (permalink)  
Antiguo 28/05/2018, 09:09
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Hola Hola Alexis 88
Hay forma de descargar de "jsfiddle" el ejercicio.

Muchas gracias por toda tu ayuda
__________________
Diseñador Gráfico publicitario
  #9 (permalink)  
Antiguo 28/05/2018, 11:24
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Hola Hola Alexis 88
Ya resolví el error con tu código.

Muchas gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #10 (permalink)  
Antiguo 28/05/2018, 11:45
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Hola Hola Alexis 88
Otra pregunta: Se le puede poner un botón para que se vea un mapa (Street view) y que luego se regrese al mapa de la calle?

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #11 (permalink)  
Antiguo 28/05/2018, 13:58
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Cita:
Iniciado por ceaped Ver Mensaje
[...] Se le puede poner un botón para que se vea un mapa (Street view) y que luego se regrese al mapa de la calle? [...]
Si mis conocimientos de inglés no me fallan, me parece que te refieres a lo mismo, a menos de que lo que quieras decir es que quieres cambiar entre las vistas que proporciona Google Maps. En ese caso, lo que tienes que hacer es invocar a la API respectiva. Es decir, si con google.maps.StreetViewPanorama obtienes la vista actual, con cualquiera de los otros tipos de mapa disponibles podrás obtener otras vistas. Lo único que tendrías que hacer es usar dos scripts: uno para la vista de calle y otro según el que elijas. Con una variable auxiliar que cambie de valor cada vez que se pulse el botón, podrás determinar qué script cargar y así cambiar el tipo de mapa.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #12 (permalink)  
Antiguo 29/05/2018, 10:27
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Hola Hola Alexis 88
Mira lo que tengo, pero cuando presiono el botón de cambiar queda en blanco.

Código Javascript:
Ver original
  1. var panorama;
  2.  
  3. function initMap() {
  4.   panorama = new google.maps.StreetViewPanorama(
  5.     document.getElementById('map'), {
  6.       position: {
  7.         lat: 37.869260,
  8.         lng: -122.254811
  9.       },
  10.       pov: {
  11.         heading: 270,
  12.         pitch: 0
  13.       },
  14.       zoom: 1
  15.     });
  16.  
  17. var vistacalle = new google.maps.Map({
  18. position: {
  19.     lat: 37.869260,
  20.     lng: -122.254811},
  21.     map: astorPlace,
  22.     icon: 'http://dominio.com/icono.png',
  23.     title: 'Nombre'
  24. });
  25.    
  26. panorama = map.getStreetView();
  27. panorama.setPosition(astorPlace);
  28. panorama.setPov(
  29. ({
  30. heading: 270,
  31. pitch: 0
  32. }));
  33. }
  34.  
  35. function toggleStreetView() {
  36. var toggle = panorama.getVisible();
  37. if (toggle == false) {
  38. panorama.setVisible(true);
  39. } else {
  40. panorama.setVisible(false);
  41. }
  42. }

Código HTML:
Ver original
  1. <div id="floating-panel">
  2. <input type="button" value="Alternar Vista de Calle" onclick="toggleStreetView();"></input>
  3. </div>

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #13 (permalink)  
Antiguo 29/05/2018, 16:03
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

No estableciste el valor de la variable astorPlace, que es un objeto literal con las coordenadas del lugar en el que se centrará la vista inicial; además, la vistaCalle es innecesaria ya que, al ocultarse la vista de panorama, la otra se hará visible.

Analiza este ejemplo y compáralo con lo que tienes hecho. No te limites a copiarlo y pegarlo.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #14 (permalink)  
Antiguo 30/05/2018, 10:06
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Hola Alexis 88
- Que pena el ejemplo que me pones no funciona.
- Yo pongo la variable "vistacalle" para poner un ícono y nombre al ícono.
- Lo que trato de hacer es que se vea primero la calle y al hacer clic en el botón se vea el mapa.

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #15 (permalink)  
Antiguo 30/05/2018, 14:30
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

¿No funciona?






Por otro lado, si lo que quieres es colocar un marcador, debes instanciar a google.maps.Marker. El uso de google.maps.Map, que es lo que usas ahora, es para generar un nuevo mapa.

Por último, para que la vista inicial sea la de calle en 360 grados (vista a nivel del suelo), a la instancia almacenada en la variable panorama debes asignarle el valor true mediante el método .setVisible(), justo como se realiza en la función que ejecuta el cambio de vista.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #16 (permalink)  
Antiguo 31/05/2018, 10:58
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.148
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: Botón .slideToggle(); no deja ver mapa Street View containers

Hola Alexis 88
Código Javascript:
Ver original
  1. panorama = map.getStreetView();
  2. panorama.setPosition(libertyStatue);
  3. panorama.setVisible(true);
  4. panorama.setPov(({
  5.         heading: 270,
  6.         pitch: 0

panorama.setVisible(true);

¡EXCELENTE!

Gracias por tu paciencia y toda tu ayuda
__________________
Diseñador Gráfico publicitario

Última edición por ceaped; 31/05/2018 a las 10:59 Razón: Editar texto

Etiquetas: mapa, slidetoggle, street, view
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 13:08.