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

[ceaped]

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

Código Javascript:

$(document).ready(function(){
    $('#marco_mapa').slideToggle(); 
        $('#ver_mapa_btn').on('click',function(){
            $('#marco_mapa').slideToggle('slow');
 
            enlace  = $(this).attr('href');
            $('html, body').animate({
                scrollTop: $(enlace).offset().top
            }, 1000);
    })
 
[HIGHLIGHT="HTML"]
<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]

[Alexis88]

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.

[ceaped]

Hola Alexis 88
Si claro yo elimino:

Código Javascript:

$('#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

[Alexis88]

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_mapa_btn').on('click',function(){
    $('#marco_mapa').slideToggle('slow', initialize);
 
    //Instrucciones
});
 

[ceaped]

Hola Alexis 88
Gracias por tu ayuda

[ceaped]

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:

$('#marco_mapa').slideToggle('slow', initMap);
 

Gracias por tu ayuda

[Alexis88]

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.

[ceaped]

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

Muchas gracias por toda tu ayuda

[ceaped]

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

Muchas gracias por tu ayuda

[ceaped]

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

[Alexis88]

Iniciado por ceaped

[...] 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.

[ceaped]

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

Código Javascript:

var panorama;
 
function initMap() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      position: {
        lat: 37.869260,
        lng: -122.254811
      },
      pov: {
        heading: 270,
        pitch: 0
      },
      zoom: 1
    });
 
var vistacalle = new google.maps.Map({
position: {
    lat: 37.869260,
    lng: -122.254811},
    map: astorPlace,
    icon: 'http://dominio.com/icono.png',
    title: 'Nombre'
});
    
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(
({
heading: 270,
pitch: 0
}));
}
 
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
 

Código HTML:

<div id="floating-panel">
<input type="button" value="Alternar Vista de Calle" onclick="toggleStreetView();"></input>
</div>
 

Gracias por tu ayuda

[Alexis88]

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.

[ceaped]

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

[Alexis88]

¿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.

[ceaped]

Hola Alexis 88

Código Javascript:

panorama = map.getStreetView();
panorama.setPosition(libertyStatue);
panorama.setVisible(true);
panorama.setPov(({
        heading: 270,
        pitch: 0
 

panorama.setVisible(true);

¡EXCELENTE!

Gracias por tu paciencia y toda tu ayuda