Afficher Street View dans une page web
Par Philippe Poisse le dimanche, février 3 2013, 04:54 - Programmation - Lien permanent
Un carte avec Google Maps c’est bien. Mais afficher les images issues de Street View c’est mieux. Pour ce faire un peu de CSS et de JavaScript et le tour est joué.
HTML et CSS
Le code HTML est très simple. Un div avec « map » comme identifiant suffit.
Dans le code CSS il faudra lui donner les dimensions adéquates.
Il faudra juste penser à insérer les balises « script » permettant d’appeler l’api Google Maps et la fonction insérant Street View.
Le JavaScript
Maintenant voyons comment créer le « panorama » Street View.
(function() {
window.onload = function() {
//panorama streetView
var myLatlng = new google.maps.LatLng(42.709277,2.905326);
var panoramaOptions = {
position: myLatlng,
pov: {
heading: 0,
pitch: 0,
zoom: 1
},
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("map"),panoramaOptions);
};
})();
La fonction JavaScript est finalement assez simple. D’abord il faut récupérer les coordonnées GPS du point à afficher. Elles seront passées dans la variable « myLatlng » en instanciant un nouvel objet LatLng.
Puis on configure les options pour le panorama via la variable « panoramaOptions » :
En premier on indique la position du point.
Puis on paramètre le Point Of View (pov) en passant trois options :
- Heading qui détermine l’angle (en degré) de rotation de la caméra par rapport au Nord (0, valeur par défaut). La valeur 90 équivaut à l’Est.
- Pitch qui fait monter ou descendre la caméra. La valeur est en degré. C’est surtout utile en zone montagneuse. 0 est la valeur par défaut.
- Zoom qui comme le nom l’indique permet de zoomer. La valeur par défaut est 1, on peut en choisir une entre 0 et 3.
Une fois les options configurer il suffit d’instancier un objet « panorama ». C’est le rôle de la dernière ligne de la fonction.