Street View
Surligner sur la carte les zones ou Street View est disponible.
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.
Dans Google Maps, lorsque des rues peuvent être visualisées à l'aide de Street View, celles-ci sont bordées d'un filet bleu.
A l'aide de l'API Google Maps nous allons afficher ou masquer cette bordure bleutée sur la carte :
Pour cela, nous allons utiliser :
Dans cet exemple nous plaçons un simple bouton, qui, lorsque l'on va cliquer dessus va permettre d'afficher ou masquer les zones sur la carte ou Street View est disponible.
<?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.com Afficher-Masquer Street View Bouton</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"});
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 48.857819, la Longitude 2.295145, avec un niveau de zoom égal à 4 ... */
maCarte.setCenter(new google.maps.LatLng(48.857819,2.295145), 4);
/* ... On affiche les différents boutons et contrôles sur la carte nommée ... */
/* ... 'maCarte' à l'identique de ceux affichés sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* Initialise le système permettant de surligner en bleu les zones ou Street View est disponible */
streetViewOverlay = new google.maps.StreetviewOverlay();
/* ... On affiche sur la carte nommée 'maCarte' les zones visualisables avec Street View ... */
maCarte.addOverlay(streetViewOverlay);
/* ... 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 afficheMasqueStreeView() */
function afficheMasqueStreeView(){
/* ... Test streetViewOverlay : Si streetViewOverlay est masqué retourne 'true' sinon retourne 'false' ... */
if(streetViewOverlay.isHidden()){
/* ... Si streetViewOverlay.isHidden() retourne 'true' alors les zones visualisables avec Street View sont mises en évidence à l'aide d'un liseret bleu ... */
streetViewOverlay.show();
/* ... Sinon ... */
}else{
/* On masque le liseret bleu mettant en évidence les zones visualisables avec Street View ... */
streetViewOverlay.hide();
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
<!--
#EmplacementDeMaCarte{
position:relative;
border: none;
width:100%;
height:400px;
margin:0;
}
.cadre {
margin: 1em 0;
padding:1em 0;
height: auto;
border: 1px solid #B8D6C2;
text-align:center;
background-color: #F6FCEC;
}
-->
</style>
</head>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<div id="EmplacementDeMaCarte"></div>
<div class="cadre">
Cliquez sur le bouton ci-dessous pour afficher ou masquer les zones ou <em>Street View</em> est disponible.<br /><br />
Comparez la couverture <em>Street View</em> entre l'Europe et les Etats-Unis.<br /><br />
<!-- Bouton permettant d'afficher ou masquer les zones visualisables à l'aide de 'Street View' par -->
<!-- appel de la fonction nommée afficheMasqueStreeView() lorsqu'un click est détecté sur ce bouton -->
<input type="button" value="Afficher ou Masquer les zones Street View" onclick="afficheMasqueStreeView()" />
</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.com Afficher-Masquer Street View Bouton</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[
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 48.857819, la Longitude 2.295145, avec un niveau de zoom égal à 4 ... */
maCarte.setCenter(new GLatLng(48.857819,2.295145), 4);
/* ... On affiche les différents boutons et contrôles sur la carte nommée ... */
/* ... 'maCarte' à l'identique de ceux affichés sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* Initialise le système permettant de surligner en bleu les zones ou Street View est disponible */
streetViewOverlay = new GStreetviewOverlay();
/* ... On affiche sur la carte nommée 'maCarte' les zones visualisables avec Street View ... */
maCarte.addOverlay(streetViewOverlay);
/* ... 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 afficheMasqueStreeView() */
function afficheMasqueStreeView(){
/* ... Test streetViewOverlay : Si streetViewOverlay est masqué retourne 'true' sinon retourne 'false' ... */
if(streetViewOverlay.isHidden()){
/* ... Si streetViewOverlay.isHidden() retourne 'true' alors les zones visualisables avec Street View sont mises en évidence à l'aide d'un liseret bleu ... */
streetViewOverlay.show();
/* ... Sinon ... */
}else{
/* On masque le liseret bleu mettant en évidence les zones visualisables avec Street View ... */
streetViewOverlay.hide();
}
}
//]]>
</script>
<style type="text/css">
<!--
#EmplacementDeMaCarte{
position:relative;
border: none;
width:100%;
height:400px;
margin:0;
}
.cadre {
margin: 1em 0;
padding:1em 0;
height: auto;
border: 1px solid #B8D6C2;
text-align:center;
background-color: #F6FCEC;
}
-->
</style>
</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". -->
<div id="EmplacementDeMaCarte"></div>
<div class="cadre">
Cliquez sur le bouton ci-dessous pour afficher ou masquer les zones ou <em>Street View</em> est disponible.<br /><br />
Comparez la couverture <em>Street View</em> entre l'Europe et les Etats-Unis.<br /><br />
<!-- Bouton permettant d'afficher ou masquer les zones visualisables à l'aide de 'Street View' par -->
<!-- appel de la fonction nommée afficheMasqueStreeView() lorsqu'un click est détecté sur ce bouton -->
<input type="button" value="Afficher ou Masquer les zones Street View" onclick="afficheMasqueStreeView()" />
</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>
Dans cet exemple, lorsque la souris se déplace sur la carte on affiche les zones ou Street View est disponible. Lorsque la souris est située hors de la carte on masque les zones ou Street View est disponible.
Pour créer cet effet on ajoute à la carte deux observateurs d'événements :
<?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.com Afficher-Masquer Street View Position Souris</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"});
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 48.857819, la Longitude 2.295145, avec un niveau de zoom égal à 4 ... */
maCarte.setCenter(new google.maps.LatLng(48.857819,2.295145), 4);
/* ... On affiche les différents boutons et contrôles sur la carte nommée ... */
/* ... 'maCarte' à l'identique de ceux affichés sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* Initialise le système permettant de surligner en bleu les zones ou Street View est disponible */
streetViewOverlay = new google.maps.StreetviewOverlay();
/* ... On affiche sur la carte nommée 'maCarte' les zones visualisables avec Street View ... */
maCarte.addOverlay(streetViewOverlay);
/* ... On masque les zones visualisables avec Street View ... */
streetViewOverlay.hide();
/* ... On ajoute à la carte nommée 'maCarte' un observateur d'événement ... */
/* ... L'événement observé est 'mouseover' : détecte si la souris est sur la carte ... */
/* ... Lorsque la souris est sur la carte la fonction afficheMasqueStreeView() est appelée ... */
google.maps.Event.addListener(maCarte, "mouseover", function(){
afficheMasqueStreeView();
});
/* ... On ajoute à la carte nommée 'maCarte' un observateur d'événement ... */
/* ... L'événement observé est 'mouseout' : détecte si la souris est en dehors de la carte ... */
/* ... Lorsque la souris est en dehors de la carte la fonction afficheMasqueStreeView() est appelée ... */
google.maps.Event.addListener(maCarte, "mouseout", function(){
afficheMasqueStreeView();
});
/* ... 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 afficheMasqueStreeView() */
function afficheMasqueStreeView(){
/* ... Test streetViewOverlay : Si streetViewOverlay est masqué retourne 'true' sinon retourne 'false' ... */
if(streetViewOverlay.isHidden()){
/* ... Si streetViewOverlay.isHidden() retourne 'true' alors les zones visualisables avec Street View sont mises en évidence à l'aide d'un liseret bleu ... */
streetViewOverlay.show();
/* ... Sinon ... */
}else{
/* On masque le liseret bleu mettant en évidence les zones visualisables avec Street View ... */
streetViewOverlay.hide();
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
<!--
#EmplacementDeMaCarte{
position:relative;
border: none;
width:100%;
height:400px;
margin:0;
}
.cadre {
margin: 1em 0;
padding:1em 0;
height: auto;
border: 1px solid #B8D6C2;
text-align:center;
background-color: #F6FCEC;
}
-->
</style>
</head>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<div id="EmplacementDeMaCarte"></div>
<div class="cadre">
Passez votre souris sur ou en dehors de la carte pour afficher ou masquer les zones ou Street View est disponible.
<br /><br />
Comparez la couverture Street View entre l'Europe et les Etats-Unis.
</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.com Afficher-Masquer Street View Position Souris</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[
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 48.857819, la Longitude 2.295145, avec un niveau de zoom égal à 4 ... */
maCarte.setCenter(new GLatLng(48.857819,2.295145), 4);
/* ... On affiche les différents boutons et contrôles sur la carte nommée ... */
/* ... 'maCarte' à l'identique de ceux affichés sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* Initialise le système permettant de surligner en bleu les zones ou Street View est disponible */
streetViewOverlay = new GStreetviewOverlay();
/* ... On affiche sur la carte nommée 'maCarte' les zones visualisables avec Street View ... */
maCarte.addOverlay(streetViewOverlay);
/* ... On masque les zones visualisables avec Street View ... */
streetViewOverlay.hide();
/* ... On ajoute à la carte nommée 'maCarte' un observateur d'événement ... */
/* ... L'événement observé est 'mouseover' : détecte si la souris est sur la carte ... */
/* ... Lorsque la souris est sur la carte la fonction afficheMasqueStreeView() est appelée ... */
GEvent.addListener(maCarte, "mouseover", function(){
afficheMasqueStreeView();
});
/* ... On ajoute à la carte nommée 'maCarte' un observateur d'événement ... */
/* ... L'événement observé est 'mouseout' : détecte si la souris est en dehors de la carte ... */
/* ... Lorsque la souris est en dehors de la carte la fonction afficheMasqueStreeView() est appelée ... */
GEvent.addListener(maCarte, "mouseout", function(){
afficheMasqueStreeView();
});
/* ... 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 afficheMasqueStreeView() */
function afficheMasqueStreeView(){
/* ... Test streetViewOverlay : Si streetViewOverlay est masqué retourne 'true' sinon retourne 'false' ... */
if(streetViewOverlay.isHidden()){
/* ... Si streetViewOverlay.isHidden() retourne 'true' alors les zones visualisables avec Street View sont mises en évidence à l'aide d'un liseret bleu ... */
streetViewOverlay.show();
/* ... Sinon ... */
}else{
/* On masque le liseret bleu mettant en évidence les zones visualisables avec Street View ... */
streetViewOverlay.hide();
}
}
//]]>
</script>
<style type="text/css">
<!--
#EmplacementDeMaCarte{
position:relative;
border: none;
width:100%;
height:400px;
margin:0;
}
.cadre {
margin: 1em 0;
padding:1em 0;
height: auto;
border: 1px solid #B8D6C2;
text-align:center;
background-color: #F6FCEC;
}
-->
</style>
</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". -->
<div id="EmplacementDeMaCarte"></div>
<div class="cadre">
Passez votre souris sur ou en dehors de la carte pour afficher ou masquer les zones ou Street View est disponible.
<br /><br />
Comparez la couverture Street View entre l'Europe et les Etats-Unis.
</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>
Dans cet exemple, un double click sur la carte va permettre d'afficher ou masquer les zones ou Street View est disponible.
Pour créer cet effet :
<?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.com Afficher-Masquer Street View Double-clic Souris</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"});
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... On désactive, sur la carte nommée "maCarte", le zoom à l'aide du double-clic sur la souris ... */
maCarte.disableDoubleClickZoom();
/* ... La carte nommée "maCarte" est centrée sur la Latitude 48.857819, la Longitude 2.295145, avec un niveau de zoom égal à 4 ... */
maCarte.setCenter(new google.maps.LatLng(48.857819,2.295145), 4);
/* ... On affiche les différents boutons et contrôles sur la carte nommée ... */
/* ... 'maCarte' à l'identique de ceux affichés sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* Initialise le système permettant de surligner en bleu les zones ou Street View est disponible */
streetViewOverlay = new google.maps.StreetviewOverlay();
/* ... On affiche sur la carte nommée 'maCarte' les zones visualisables avec Street View ... */
maCarte.addOverlay(streetViewOverlay);
/* ... On ajoute à la carte nommée 'maCarte' un observateur d'événement ... */
/* ... L'événement observé est 'dblclick' : détecte si un double click est effectué sur la carte ... */
/* ... Lorsqu'un double click sur la carte est détecté la fonction afficheMasqueStreeView() est appelée ... */
google.maps.Event.addListener(maCarte, "dblclick", function(){
afficheMasqueStreeView();
});
/* ... 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 afficheMasqueStreeView() */
function afficheMasqueStreeView(){
/* ... Test streetViewOverlay : Si streetViewOverlay est masqué retourne 'true' sinon retourne 'false' ... */
if(streetViewOverlay.isHidden()){
/* ... Si streetViewOverlay.isHidden() retourne 'true' alors les zones visualisables avec Street View sont mises en évidence à l'aide d'un liseret bleu ... */
streetViewOverlay.show();
/* ... Sinon ... */
}else{
/* On masque le liseret bleu mettant en évidence les zones visualisables avec Street View ... */
streetViewOverlay.hide();
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
<!--
#EmplacementDeMaCarte{
position:relative;
border: none;
width:100%;
height:400px;
margin:0;
}
.cadre {
margin: 1em 0;
padding:1em 0;
height: auto;
border: 1px solid #B8D6C2;
text-align:center;
background-color: #F6FCEC;
}
-->
</style>
</head>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<div id="EmplacementDeMaCarte"></div>
<div class="cadre">
Double-cliquez sur le bouton gauche de votre souris pour afficher ou masquer les zones ou Street View est disponible.
<br /><br />
Comparez la couverture Street View entre l'Europe et les Etats-Unis.
</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.com Afficher-Masquer Street View Double-clic Souris</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[
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... On désactive, sur la carte nommée "maCarte", le zoom à l'aide du double-clic sur la souris ... */
maCarte.disableDoubleClickZoom();
/* ... La carte nommée "maCarte" est centrée sur la Latitude 48.857819, la Longitude 2.295145, avec un niveau de zoom égal à 4 ... */
maCarte.setCenter(new GLatLng(48.857819,2.295145), 4);
/* ... On affiche les différents boutons et contrôles sur la carte nommée ... */
/* ... 'maCarte' à l'identique de ceux affichés sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* Initialise le système permettant de surligner en bleu les zones ou Street View est disponible */
streetViewOverlay = new GStreetviewOverlay();
/* ... On affiche sur la carte nommée 'maCarte' les zones visualisables avec Street View ... */
maCarte.addOverlay(streetViewOverlay);
/* ... On ajoute à la carte nommée 'maCarte' un observateur d'événement ... */
/* ... L'événement observé est 'dblclick' : détecte si un double click est effectué sur la carte ... */
/* ... Lorsqu'un double click sur la carte est détecté la fonction afficheMasqueStreeView() est appelée ... */
GEvent.addListener(maCarte, "dblclick", function(){
afficheMasqueStreeView();
});
/* ... 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 afficheMasqueStreeView() */
function afficheMasqueStreeView(){
/* ... Test streetViewOverlay : Si streetViewOverlay est masqué retourne 'true' sinon retourne 'false' ... */
if(streetViewOverlay.isHidden()){
/* ... Si streetViewOverlay.isHidden() retourne 'true' alors les zones visualisables avec Street View sont mises en évidence à l'aide d'un liseret bleu ... */
streetViewOverlay.show();
/* ... Sinon ... */
}else{
/* On masque le liseret bleu mettant en évidence les zones visualisables avec Street View ... */
streetViewOverlay.hide();
}
}
//]]>
</script>
<style type="text/css">
<!--
#EmplacementDeMaCarte{
position:relative;
border: none;
width:100%;
height:400px;
margin:0;
}
.cadre {
margin: 1em 0;
padding:1em 0;
height: auto;
border: 1px solid #B8D6C2;
text-align:center;
background-color: #F6FCEC;
}
-->
</style>
</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". -->
<div id="EmplacementDeMaCarte"></div>
<div class="cadre">
Double-cliquez sur le bouton gauche de votre souris pour afficher ou masquer les zones ou Street View est disponible.
<br /><br />
Comparez la couverture Street View entre l'Europe et les Etats-Unis.
</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>
Dans cet exemple, un un click droit sur la carte va permettre d'afficher ou masquer les zones ou Street View est disponible.
Pour créer cet effet :
<?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.com Afficher-Masquer Street View Clic droit Souris</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"});
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 48.857819, la Longitude 2.295145, avec un niveau de zoom égal à 4 ... */
maCarte.setCenter(new google.maps.LatLng(48.857819,2.295145), 4);
/* ... On affiche les différents boutons et contrôles sur la carte nommée ... */
/* ... 'maCarte' à l'identique de ceux affichés sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* Initialise le système permettant de surligner en bleu les zones ou Street View est disponible */
streetViewOverlay = new google.maps.StreetviewOverlay();
/* ... On affiche sur la carte nommée 'maCarte' les zones visualisables avec Street View ... */
maCarte.addOverlay(streetViewOverlay);
/* ... On ajoute à la carte nommée 'maCarte' un observateur d'événement ... */
/* ... L'événement observé est 'singlerightclick' : détecte si un click droit est effectué sur la carte ... */
/* ... Lorsqu'un click droit sur la carte est détecté la fonction afficheMasqueStreeView() est appelée ... */
google.maps.Event.addListener(maCarte, "singlerightclick", function(){
afficheMasqueStreeView();
});
/* ... 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 afficheMasqueStreeView() */
function afficheMasqueStreeView(){
/* ... Test streetViewOverlay : Si streetViewOverlay est masqué retourne 'true' sinon retourne 'false' ... */
if(streetViewOverlay.isHidden()){
/* ... Si streetViewOverlay.isHidden() retourne 'true' alors les zones visualisables avec Street View sont mises en évidence à l'aide d'un liseret bleu ... */
streetViewOverlay.show();
/* ... Sinon ... */
}else{
/* On masque le liseret bleu mettant en évidence les zones visualisables avec Street View ... */
streetViewOverlay.hide();
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
<!--
#EmplacementDeMaCarte{
position:relative;
border: none;
width:100%;
height:400px;
margin:0;
}
.cadre {
margin: 1em 0;
padding:1em 0;
height: auto;
border: 1px solid #B8D6C2;
text-align:center;
background-color: #F6FCEC;
}-->
</style>
</head>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<div id="EmplacementDeMaCarte"></div>
<div class="cadre">
Cliquez une fois sur le bouton droit de la souris pour afficher ou masquer les zones ou <em>Street View</em> est disponible.<br /><br />
Comparez la couverture <em>Street View</em> entre l'Europe et les Etats-Unis.<br /><br />
</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.com Afficher-Masquer Street View Clic droit Souris</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[
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 48.857819, la Longitude 2.295145, avec un niveau de zoom égal à 4 ... */
maCarte.setCenter(new GLatLng(48.857819,2.295145), 4);
/* ... On affiche les différents boutons et contrôles sur la carte nommée ... */
/* ... 'maCarte' à l'identique de ceux affichés sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* Initialise le système permettant de surligner en bleu les zones ou Street View est disponible */
streetViewOverlay = new GStreetviewOverlay();
/* ... On affiche sur la carte nommée 'maCarte' les zones visualisables avec Street View ... */
maCarte.addOverlay(streetViewOverlay);
/* ... On ajoute à la carte nommée 'maCarte' un observateur d'événement ... */
/* ... L'événement observé est 'singlerightclick' : détecte si un click droit est effectué sur la carte ... */
/* ... Lorsqu'un click droit sur la carte est détecté la fonction afficheMasqueStreeView() est appelée ... */
GEvent.addListener(maCarte, "singlerightclick", function(){
afficheMasqueStreeView();
});
/* ... 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 afficheMasqueStreeView() */
function afficheMasqueStreeView(){
/* ... Test streetViewOverlay : Si streetViewOverlay est masqué retourne 'true' sinon retourne 'false' ... */
if(streetViewOverlay.isHidden()){
/* ... Si streetViewOverlay.isHidden() retourne 'true' alors les zones visualisables avec Street View sont mises en évidence à l'aide d'un liseret bleu ... */
streetViewOverlay.show();
/* ... Sinon ... */
}else{
/* On masque le liseret bleu mettant en évidence les zones visualisables avec Street View ... */
streetViewOverlay.hide();
}
}
//]]>
</script>
<style type="text/css">
<!--
#EmplacementDeMaCarte{
position:relative;
border: none;
width:100%;
height:400px;
margin:0;
}
.cadre {
margin: 1em 0;
padding:1em 0;
height: auto;
border: 1px solid #B8D6C2;
text-align:center;
background-color: #F6FCEC;
}
-->
</style>
</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". -->
<div id="EmplacementDeMaCarte"></div>
<div class="cadre">
Cliquez une fois sur le bouton droit de la souris pour afficher ou masquer les zones ou <em>Street View</em> est disponible.<br /><br />
Comparez la couverture <em>Street View</em> entre l'Europe et les Etats-Unis.<br /><br />
</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>
