Discussion :

[stevensavior]

Salut à tous.

J'essaie d'afficher streetview dans un div qui se redimensionne par un clic:
- A l'ouverture de la page streetview est affiché dans une petite fenêtre en bas à gauche de l'écran



- Avec le clic sur un bouton streetview occupe toute la largeur de la page avec une hauteur donnée.

Le problème que quand la Div contenant streetview occupe toute la largeur, ce dernier ne se redimensionne pas automatiquement comme on peu le voir ici:



Voila la fonction javascript pour redimensionner la div contenant l'objet streetview:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function fun() {          
 
    var div1 = document.getElementById("div_streetview");
 
        if (div1.style.width != "400px") {
            w = div1.style.width;
            h = div1.style.height;
            div1.style.width = "400px";
            div1.style.height = "250px";				
		}
        else
        {
            div1.style.width = w;
            div1.style.height = h;				
		}
        return false;
}

Puis je fais appel à la fonction par un onclick sur mon bouton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="fun()"

J'ai vu qu'il existait l'évènement resize pour la classe StreetViewPanorama mais je trouve très peu d'exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

google.maps.event.trigger(panorama, 'resize')

Je l'ai donc intégré de cette facon mais sans résultat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// On initialise StreetView et on l'affiche dans le div 'div_streetview'
var optionsPanoramiqueStreetView = {
	position: centrePigman,
	pov: {
		heading: 300,
		pitch: 0,
		zoom: 1,
	}
};
 
var panoramiqueStreetView = new google.maps.StreetViewPanorama(document.getElementById('div_streetview'), optionsPanoramiqueStreetView);
 
google.maps.event.addListener(panoramiqueStreetView, "position_changed", function() {
google.maps.event.trigger(panoramiqueStreetView, 'resize');
});
 
map.setStreetView(panoramiqueStreetView);

Il est à noter que si je déplace pegman sur la carte ou que je clique sur les flèches de déplacement dans streetview, alors à ce moment là streetview occupe toute la largeur du div.

Merci de votre aide

[stevensavior]

C'est bon j'ai trouvé.

Voilà pour ceux que ça intéresse:

Il fallait ajouter la propriété setVisible(true) dans la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function fun() {          
 
    var div1 = document.getElementById("div_streetview");
 
        if (div1.style.width != "400px") {
            w = div1.style.width;
            h = div1.style.height;
            div1.style.width = "400px";
            div1.style.height = "250px";
	    panoramiqueStreetView.setVisible(true);
		}
        else
        {
            div1.style.width = w;
            div1.style.height = h;
	    panoramiqueStreetView.setVisible(true);
		}
        return false;
}

Placez avant la fonction initialize()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var panoramiqueStreetView = new google.maps.StreetViewPanorama(document.getElementById('div_streetview'));

Dans la fonction initialize() enlever le var devant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var panoramiqueStreetView = new google.maps.StreetViewPanorama(document.getElementById('div_streetview'), optionsPanoramiqueStreetView);