Insérer StreetView dans l’infobulle

Voici un exemple d’utilisation de la classe GStreetviewPanorama au sein de l’infobulle rattachée à un marker.

Pour afficher le streetView, cliquez sur le marker de votre choix. Si streetView n’est pas disponible pour la vue en cours, un message le signalera dans l’infobulle.

Dans cet exemple, les markers sont déplaçables. Vous pouvez donc déplacer un marker puis cliquer sur celui-ci afin d’afficher l’infobulle contenant le streetView à l’endroit où se trouve le marker une fois relâché.

CODE


<script type="text/javascript">
   /* Fonction chargée d'appeler StreetView une fois l'infobulle ouverte */
   function displayStreetView(lat,lng){
      document.getElementById("streetView").innerHTML = '';
      /* On efface le message d'attente */
      StreetView = new GStreetviewPanorama(document.getElementById("streetView"));
      /* Déclaration de l'objet streetview */
      GEvent.addListener(StreetView, "error", handleNoFlash);
      /* Fonction "handleNoFlash" à appeler si erreur */
      var options = {yaw : 380, pitch : 0, zoom : 0};
      /* Options du streetView :
      yaw : angle de vue horizontal de la caméra
      pitch : angle de vue vertical de la caméra
      zoom : niveau de zoom pour la vue Street View
      */
      StreetView.setLocationAndPOV(new GLatLng(lat,lng), options);
   }

   /* Affiche le message d'erreur à la place du streetView */
   function handleNoFlash(errorCode) {
      var msg = "Streetview n'est pas disponible pour cette localisation...";
      document.getElementById("streetView").innerHTML = msg;
      return;
   }  

   /* Déclaration de la carte */
   var map = new GMap2(document.getElementById('map'),
   { size: new GSize(635,700), mapTypes: [G_HYBRID_MAP]});
   var myPoints = [];
   var bounds = new GLatLngBounds();

   /* Déclaration des points à afficher sur la carte */
   myPoints.push( new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push( new GLatLng(48.8123155, 2.2381535)); // Meudon
   myPoints.push( new GLatLng(48.3906042, -4.4869013)); // Brest
   myPoints.push( new GLatLng(50.6371834, 3.0630174)); // Lille

   /*Affichage des points sur la carte */
   for(var i = 0; i < myPoints.length; i++){
      bounds.extend(myPoints[i]);
      var thisMarker = addThisMarker(myPoints[i]);
      map.addOverlay(thisMarker);
   }

   /* Association événements / markers */
   function addThisMarker(point){
      var marker = new GMarker(point, {draggable : true});
      GEvent.addListener(marker, "click", function(latlng) {
         var lat = latlng.lat();
         var lng = latlng.lng();
         marker.openInfoWindowHtml('<div id="streetView" style="width: 500px;
	 height: 250px; text-align:center">Street View en cours de chargement ...</div>');
         setTimeout("displayStreetView('"+lat+"','"+lng+"');",2500);
      });
      GEvent.addListener(marker, "dragstart", function() {
         marker.closeInfoWindow();
      });
     GEvent.addListener(marker, "dragend", function(latlng) {
         var lat = latlng.lat();
         var lng = latlng.lng();
         marker.openInfoWindowHtml('<div style="font-family:arial; font-size: 11px;">
	 <h4 align="center" style="margin: 2px;">Informations liées au point</h4>
	 <b>Latitude</b> :'+lat+'<br /><b>Longitude </b>:'+lng+'</div>');
      });
      return marker;
   } 

   /* Récupération des limites de la carte */
   var newZoom = map.getBoundsZoomLevel(bounds);

   /* Récupération du nouveau centre de la carte */
   var newCentre = bounds.getCenter();

   /* Ajout des outils de contrôle sur la carte */
   map.addControl(new GOverviewMapControl());

   /* Affichage de la carte */
   map.setCenter(new Centre, newZoom);

</script>

10 Réponses à “Insérer StreetView dans l’infobulle”

  1. Alex67cv :

    Bonjour,j’aurais une petite question…qui peut vous paraitre idiote mais bon…Est ce que le code indiquer au dessus doit être integrer dans une de mes pages web ou je desire faire afficher une carte avec ses fonctions là…ou bien dois je créer une page web pour y placer ce code la?
    Car j’ai la carte Google maps en fichier externe HTML sur mon site mais j’aimerais bien pouvoir integrer une carte sur ma page ‘index.php’ avec donc ses fonction la qu’il y a plus haut?
    Merci d’avance pour vos réponse,
    Cordialement

  2. webmaster :

    Bonjour Alex67cv,

    Si tu souhaites ajouter street view sur une map, tu peux tout simplement récupérer le code proposé ci-dessus et le coller dans une de tes pages.
    Il faut juste penser à ajouter un div ayant pour id map (div qui contiendra la carte) et bien vérifier que tu fais appel au script de Google Map avec ta clé d’api :

    <script src=”http://maps.google.com/maps?file=api&v=2.x&key=API_KEY…..></script>

    J’espère avoir répondu à ta question,

    Cordialement,

  3. Alex67cv :

    Re,vous avez bien répondu à la question dont je me posais…mais impossible à faire ce que je voulais,je n’arrive ni à intégrer une carte dans une de mes pages web en .php et pareil pour le code qui permet de calculer et de faire afficher l’itinéraire…quand je mets un lien vers page.html qui contient les codes ça va…mais impossible à intégrer ces codes la à une de mes pages en php…j’ai du mal à comprendre quoi faire avec les codes fournis par le site ‘Touraine verte’…je sais pas si leurs codes fournis sont à mettre dans une de mes pages web ou à mettre dans une nouvelle page en HTML nommée ‘tel ou tel’….alors j’ai essayé les 2 façons et la 2ème façon marche mais alors c’est uniquement possible que si je pointe un lien de ma page.php vers la page externe .html…j’ai mal à la tête là sincèrement…j’ai tout essayé…je réessayerai peut-être un autre jour si j’en ai le courage…pourtant j’ai normalement aucun problème avec tout ça, ayant créé plusieurs sites et manipulé/modifié beaucoup de codes et ayant fait la refonte de beaucoup de sites…mais là, je bloque et n’arrive à rien ou alors j’ai rien compris…
    Merci pour votre réponse qui à été rapide.
    Cordialement

  4. webmaster :

    Alex67cv,

    Je ne saisis pas vraiment ton problème… Mais si tu disposes d’une URL où est hébergée ton application Google Map, je pourrai peut-être y jeter un oeil pour te dire ce qu’il en est.

    Cdlt,

  5. Alex67cv :

    Bonjour,tout d’abord merci d’accepter de prendre le temps pour ce problème là…
    Alors au fait,le problème est que j’aimerais intégrer à ma Maps dont je vous donnerais l’url plus bas le Calcul d’itinéraire que la personne cherchera et qui s’afficherait sur la même page + dans l’idéal intégrer votre code pour que quand la personne clique sur le marqueur (qu’il faudrait que j’intègre aussi bien sur) et bien que les infos souhaitées s’affichent..
    Au faite je créer ce site pour mon cousin qui est Auto-entrepreneur/Artisan Électricien…et donc j’aimerais faire en sorte que la personne,dès qu’elle tape l’adresse de la Société voit où elle se trouve,et qu’il y ait un marqueur où les Infos sur la Société seraient affichés…comme quand on cherche quelque chose dans Google Maps…
    Et le + serait qu’elle puisse avoir un itinéraire du point A au point B qui est la Société bien évidemment…
    Je sais que c’est faisable puisque j’ai trouvé tous les codes qu’ils fallaient…
    La fonction ‘géo-marqueur’ et la fonction ‘Calcul d’itinéraire’…

    Je voulais tout d’abord intégrer une mini map sur la page ‘index.php’ du site et y mettre ses fonctions là…mais ça me parait tellement compliqué que ce n’est pas bien grave…

    Du moment qu’il y aurait ses fonctions là sur la même page où la Map se trouve…
    En espérant que vous ayez bien saisit les problèmes que je rencontre…et ne pas vous avoir trop encombrer avec ce long texte et explications..

    Encore un grand merci pour votre aide.
    Cordialement.

    Voici l’url : energie-arc-en-ciel.perso.sfr.fr/maps-localisation.html

    PS: Tout le site mis à part cette page là est en ‘php’…donc peut être est ce pour ça qu’il m’était impossible d’intégrer ça à une de mes pages web du site…

  6. webmaster :

    Bonjour Alex67cv,

    Je te conseille de suivre les différents tutoriaux présents sur ce site pour ajouter dans un premier temps quelques fonctions de la Google map à ta carte.
    Les scripts présents sont prêts à l’emploi, expliqués et fonctionnels.

    Cdlt,

  7. Philippe777 :

    Bonjour,
    J’ai réalisé il y a quelques temps un site cartographique en utilisant
    la plateforme GoogleMap.
    Je désire maintenant la mettre à jour avec les nouvelles fonctionnalités de GoogleMap dont streetview
    Ma clé googleMap était ainsi déclarée

    Donc 2 et non 2.x
    Dois-je redemander une clé pour mon site pour la version 2.x
    Ou Puis-je conserver les mêmes infos clés en remplaçant dans mon code 2 par 2.x ?

    Merci d’avance

    Philippe

  8. webmaster :

    Bonjour Philippe777,

    Non, il n’est pas nécessaire de demander une nouvelle clé pour utiliser une autre version de l’api Google map. Cette clé sert à identifier le site web qui l’utilise.

    La version utilisée, quant à elle, n’en dépend pas.

    Cordialement,

  9. Dreamer :

    Bonjour
    Je fais fonctionner le script sans soucis enfin un seul mais petit !!
    Quand on a un seul “marker”, le zoom se retrouve au maximum, d’où ma question :
    - Peut-on inclure dans le code la valeur du zoom ou donner les dimensions ou limites du rectangle vu par le visiteur ??

    A+

  10. Serge B. :

    J’ai un problème pour installer le code ci dessus :
    Je l’ai copié / collé entre les balises head

    Mais que faut-il mettre dans la balise body ???

    Rien ne s’affiche, donc j’ai du oublié quelque chose, si quelqu’un peut m’aider…

    Merci

Laisser une réponse

Security Code: