Api Google Maps flèche Street View flèche Surligner sur la carte les zones ou Street View est disponible.

VISUALISER SUR LA CARTE LES ZONES
OU STREET VIEW EST DISPONIBLE

Article créé le : 18/04/2009
 

Présentation

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 :

  • GStreetviewOverlay() : Initialise le système permettant de surligner en bleu les zones ou Street View est disponible,
  • addOverlay : Affiche sur la carte les zones visibles avec Street View (zone bleutée),
  • isHidden() : Retourne true si les zones visualisables avec Street View, sont maquées,
  • show() : Affiche les zones visualisables avec Street View, si elles étaient maquées,
  • hide() : Masque les zones visualisables avec Street View, si elles étaient affichées.

Avec un bouton

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.

Carte

Cliquez sur le bouton ci-dessous pour afficher ou masquer les zones ou Street View est disponible.

Comparez la couverture Street View entre l'Europe et les États-Unis.

Code

Code : Bouton 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.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=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"});
  • /* 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>

Code : Bouton 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.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=Insérez_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>

Passage de la souris sur la carte

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 :

  • mouseover : qui affichera ou masquera les zones ou Street View est disponible lorsque la souris sera positionnée sur la carte,
  • mouseout : qui affichera ou masquera les zones ou Street View est disponible lorsque la souris sera positionnée en dehors de la carte,

Carte

Passez votre souris sur la carte pour afficher ou masquer les zones où Street View est disponible.

Code

Code : Souris sur ou en dehors de la carte 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.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=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"});
  • /* 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>

Code : Souris sur ou en dehors de la carte 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.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=Insérez_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>

Par double click sur la carte

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 :

  • on neutralise le zoom par double click sur la carte (activé par défaut),
  • puis on ajoute à la carte un observateur d'événement : dblclick qui affichera ou masquera les zones ou Street View est disponible lorsqu'un double click sera effectué sur la carte.

Carte

Doube-cliquez sur la carte avec le bouton gauche de votre souris

pour afficher ou masquer les zones où Street View est disponible.

Code

Code : Double-clic sur la souris 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.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=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"});
  • /* 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>

Code : Double-clic sur la souris 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.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=Insérez_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>

Par click droit sur la carte

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 :

  • on ajoute à la carte un observateur d'événement : singlerightclick qui affichera ou masquera les zones ou Street View est disponible lorsqu'un click droit sera effectué sur la carte.

Carte

Cliquez sur la carte avec le bouton droit de votre souris

pour afficher ou masquer les zones où Street View est disponible.

Code

Code : simple click droit sur la souris 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.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=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"});
  • /* 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>

Code : simple click droit sur la souris 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.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=Insérez_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>