Api Google Maps Version 2
Street-view
INSÉRER UN STREET VIEW DANS UNE INFO-BULLE

Api Google Maps Version 2  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

Attention :

L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.

TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.

L'API Google Maps Javascript Version 3 est désormais la version officielle.

  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=Inserez_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=Inserez_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>

 

API Google Maps - API Google Earth - Fichiers KML KMZ - Aide Didacticiel Documentation Exemple Tutoriels Trucs et Astuces en Français sur TouraineVerte.com
Formation et tutoriels sur les cartes API Google Maps | Formation et tutoriels sur les cartes API Google Earth | Formation et tutoriels sur les Fichiers KML KMZ
Développeur freelance auto-entrepreneur carte Google Maps Earth API | http://www.TouraineVerte.com | © 2010 - Plan du site | fadamaps37@touraineverte.com