Accueil

13. Ajouter la couche StreetView

Ecrit par fabien le 17/11/2008.
| |



Introduction

L'API Google Maps propose le service Street View qui permet de naviguer virtuellement dans les rues. Avant de voir comment faire dans le prochain tutoriel, nous allons voir ici quelle est l'emprise des images.

Initialisation

Reprendre la carte du tutoriel n°2.

Superposition de l'emprise

Construire un overlay de type StreetView : 
var svOverlay = new GStreetviewOverlay();

L'ajouter à la carte : 

map.addOverlay(svOverlay);



Code complet

<!DOCTYPE html "-//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">
  <head>
    <title>
     [Google Maps] 13. Ajouter la couche StreetView
   </title>
   <style type="text/css">
     html { overflow:hidden; height:100%; } 
     body { height:100%; margin:0; }
     #map { width:100%; height:100%; }
   </style>
   <link rel="icon" type="image/png" href="./favicon.png"/>
   <script src="http://maps.google.com/maps?file=api&v=2&key=votre_clé_ici" type="text/javascript"></script>
   <script type="text/javascript">
 
     var map = null;
 
     function initialize() {
       if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById('map'));
         map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),15);
         map.addControl(new GMapTypeControl());
         map.removeMapType(G_HYBRID_MAP);
         map.addMapType(G_PHYSICAL_MAP);
         map.setMapType(G_PHYSICAL_MAP);
         map.addControl(new GOverviewMapControl());
         map.addControl(new GScaleControl());
         map.addControl(new GLargeMapControl());
         map.enableScrollWheelZoom();
	   var svOverlay = new GStreetviewOverlay();
	   map.addOverlay(svOverlay);
 
      }
      else{
       alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
      }
    }
  </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map"></div>
   </body>
</html>



Démonstration

Résultat pleine page


Remarques

Toujours se référer à l'API Google Maps - Google Maps API Reference pour les différentes classes, méthodes et options utilisées.

Les photos StreetView ne sont pas disponibles partout sur la Terre.


Conclusion

Les méthodes relatives à StreetView commencent ici : http://code.google.com/apis/maps/documentation/reference.html#GStreetviewPanorama.


Auteur : Fabien - fabien.goblet [ at ] gmail.com





Retour en haut