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.
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.
<?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>
<?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>
