Api Google Maps flèche Street View flèche Insérer un Street View dans une fenêtre ou info-bulle.

INSÉRER UN STREET VIEW DANS UNE INFO-BULLE

Article créé le : 21/03/2009
 

Présentation

Il peut-être intéressant d'insérer, dans une info-bulle, un Street View pour visualiser les environs immédiates du marqueur sur 360 °.

Pour cela nous allons utiliser StreetviewPanorama, et setLocationAndPOV.

A l'aide de yaw, pitch et zoom vous pourrez modifier l'angle de vue comme bon vous semble.

Carte

Géolocalisation de la tour Eiffel à Paris Latitude : 48.857865 Longitude : 2.295107

Code

Code : Avec Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte : Street View dans une info-bulle fenêtre info window infowindow</title>
  • <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Chargement du module "maps" dans sa version "2.x" */
  • google.load("maps", "2.x",{"other_params":"sensor=false"});
  • /* Déclaration des variables globales */
  • var iconeRouge;
  • var maCarte;
  • var TourEiffel;
  • var StreetView;
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* ... Détermine les paramètres nécessaires pour la création de l'icône nommé "iconeRouge" ... */
  • var baseIcone = new google.maps.Icon();
  • baseIcone.iconSize=new google.maps.Size(12,20);
  • baseIcone.shadowSize=new google.maps.Size(20,22);
  • baseIcone.iconAnchor=new google.maps.Point(6,20);
  • baseIcone.infoWindowAnchor=new google.maps.Point(5,1);
  • iconeRouge = new google.maps.Icon(baseIcone, 'http://labs.google.com/ridefinder/images/mm_20_red.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');
  • /* ... Création d'un point, nommé "TourEiffel", ayant pour latitude : 48.857865 et longitude : 2.295107 ... */
  • TourEiffel = new google.maps.LatLng(48.857865,2.295107);
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(TourEiffel, 15);
  • /* ... Création d'un nouveau, marqueur nommé "marqueur", ancré sur le point nommé "TourEiffel" ... */
  • /* ... Ce marqueur est représenté par l'icône nommé "iconeRouge". Lorsqu'il est survolé par ... */
  • /* ... votre curseur le titre suivant "Cliquer sur le marqueur pour voir le panoramique" apparaît juste en dessous ... */
  • var marqueur = new google.maps.Marker(TourEiffel, {icon: iconeRouge, title: "Cliquer sur le marqueur pour voir le Street View"});
  • /* ... Un observateur d'événement est associé au marqueur nommé "marqueur" ... */
  • /* ... L'événement détecté est le "click" sur ce marqueur. ... */
  • /* ... Lorsqu'un "click" est détecté sur ce marqueur alors ... */
  • google.maps.Event.addListener(marqueur, 'click', function() {
  • /* ... On définit "html" : Balise <div> destinée à contenir le Street View ... */
  • var html = '<div id="EmplacementStreetView" style="width: 500px; height: 250px; text-align:center">Street View en cours de chargement ...</div>';
  • /* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur", et dont le contenu sera "html" ... */
  • marqueur.openInfoWindowHtml(html);
  • /* ... Déclenche l'affichage du Street View dans l'info-bulle par appel ... */
  • /* ... de la fonction " afficheStreetView(); " après un délai d'attente de 3 secondes... */
  • setTimeout("afficheStreetView();",3000);
  • });
  • maCarte.addOverlay(marqueur);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Fonction afficheStreetView() */
  • function afficheStreetView(){
  • /* On efface le message d'attente affiché dans l'info-bulle */
  • document.getElementById("EmplacementStreetView").innerHTML="";
  • /* Le Street View va venir s'afficher à l' intérieur de la balise <div> ayant pour identifiant id="EmplacementStreetView" */
  • StreetView = new google.maps.StreetviewPanorama(document.getElementById("EmplacementStreetView"));
  • /* yaw = angle de la caméra par rapport au Nord vrai : 0 - Ouest : 90 - Sud : 180 - Est : 270 */
  • /* pitch = angle de la caméra par rapport à la rue : vue horizontale : 0 - vue zénith : -90 - vue sol : 90 */
  • /* zoom = niveau de zoom à appliquer sur l'image du Street View */
  • var myPOV = {yaw:318,pitch:-53,zoom:0};
  • /* Permet l'affichage du Street View sur le point "TourEiffel" en lui appliquant les options de visualisation "myPOV" */
  • StreetView.setLocationAndPOV(TourEiffel, myPOV);
  • /* S'il est impossible d'afficher le "StreetView", une erreur est générée et l'appel de la fonction "handleNoFlash" est déclenché */
  • google.maps.Event.addListener(StreetView, "error", handleNoFlash);
  • }
  •  
  • /* Fonction handleNoFlash() */
  • function handleNoFlash(errorCode) {
  • alert(errorCode);
  • if (errorCode == FLASH_UNAVAILABLE) {
  • alert("Erreur : Flash n'est pas supporté par votre navigateur");
  • return;
  • }
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • //]]>
  • </script>
  • </head>
  • <body>
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
  • <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
  • </noscript>
  • </body>
  • </html>

Code : Sans Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte : Street View dans une info-bulle fenêtre info window infowindow</title>
  • <!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
  • <script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Déclaration des variables globales */
  • var iconeRouge;
  • var maCarte;
  • var TourEiffel;
  • var StreetView;
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* ... Détermine les paramètres nécessaires pour la création de l'icône nommé "iconeRouge" ... */
  • var baseIcone = new GIcon();
  • baseIcone.iconSize=new GSize(12,20);
  • baseIcone.shadowSize=new GSize(20,22);
  • baseIcone.iconAnchor=new GPoint(6,20);
  • baseIcone.infoWindowAnchor=new GPoint(5,1);
  • iconeRouge = new GIcon(baseIcone, 'http://labs.google.com/ridefinder/images/mm_20_red.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');
  • /* ... Création d'un point, nommé "TourEiffel", ayant pour latitude : 48.857865 et longitude : 2.295107 ... */
  • TourEiffel = new GLatLng(48.857865,2.295107);
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(TourEiffel, 15);
  • /* ... Création d'un nouveau, marqueur nommé "marqueur", ancré sur le point nommé "TourEiffel" ... */
  • /* ... Ce marqueur est représenté par l'icône nommé "iconeRouge". Lorsqu'il est survolé par ... */
  • /* ... votre curseur le titre suivant "Cliquer sur le marqueur pour voir le panoramique" apparaît juste en dessous ... */
  • var marqueur = new GMarker(TourEiffel, {icon: iconeRouge, title: "Cliquer sur le marqueur pour voir le Street View"});
  • /* ... Un observateur d'événement est associé au marqueur nommé "marqueur" ... */
  • /* ... L'événement détecté est le "click" sur ce marqueur. ... */
  • /* ... Lorsqu'un "click" est détecté sur ce marqueur alors ... */
  • GEvent.addListener(marqueur, 'click', function() {
  • /* ... On définit "html" : Balise <div> destinée à contenir le Street View ... */
  • var html = '<div id="EmplacementStreetView" style="width: 500px; height: 250px; text-align:center">Street View en cours de chargement ...</div>';
  • /* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur", et dont le contenu sera "html" ... */
  • marqueur.openInfoWindowHtml(html);
  • /* ... Déclenche l'affichage du Street View dans l'info-bulle par appel ... */
  • /* ... de la fonction " afficheStreetView(); " après un délai d'attente de 3 secondes... */
  • setTimeout("afficheStreetView();",3000);
  • });
  • maCarte.addOverlay(marqueur);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Fonction afficheStreetView() */
  • function afficheStreetView(){
  • /* On efface le message d'attente affiché dans l'info-bulle */
  • document.getElementById("EmplacementStreetView").innerHTML="";
  • /* Le Street View va venir s'afficher à l' intérieur de la balise <div> ayant pour identifiant id="EmplacementStreetView" */
  • StreetView = new GStreetviewPanorama(document.getElementById("EmplacementStreetView"));
  • /* yaw = angle de la caméra par rapport au Nord vrai : 0 - Ouest : 90 - Sud : 180 - Est : 270 */
  • /* pitch = angle de la caméra par rapport à la rue : vue horizontale : 0 - vue zénith : -90 - vue sol : 90 */
  • /* zoom = niveau de zoom à appliquer sur l'image du Street View */
  • var myPOV = {yaw:318,pitch:-53,zoom:0};
  • /* Permet l'affichage du Street View sur le point "TourEiffel" en lui appliquant les options de visualisation "myPOV" */
  • StreetView.setLocationAndPOV(TourEiffel, myPOV);
  • /* S'il est impossible d'afficher le "StreetView", une erreur est générée et l'appel de la fonction "handleNoFlash" est déclenché */
  • GEvent.addListener(StreetView, "error", handleNoFlash);
  • }
  •  
  • /* Fonction handleNoFlash() */
  • function handleNoFlash(errorCode) {
  • alert(errorCode);
  • if (errorCode == FLASH_UNAVAILABLE) {
  • alert("Erreur : Flash n'est pas supporté par votre navigateur");
  • return;
  • }
  • }
  • //]]>
  • </script>
  • </head>
  •  
  • <!-- Une fois la page chargée la fonction initialize() est exécutée. -->
  • <!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
  • <body onload="initialize()" onunload="GUnload()">
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
  • <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
  • </noscript>
  • </body>
  • </html>