Google XXL: Utiliser l'API Google Maps StreetView
Google XXL

Utiliser l'API Google Maps StreetView


Fonctionnement de l'API Google Maps StreetView

La documentation pour les objets StreetView dans l'API Google Maps est accessible sur cette page.
Il y a aussi des exemples qu'il est possible d'ouvrir dans une nouvelle fenêtre afin d'examiner la tête reposée le code qui est utilisé.
Les images StreetView sont lancées par un objet appelé GstreetviewPanorama qui fournit une API pour le lecteur Street View Flash® viewer.
Le principe consiste alors à :

  • Créer un conteneur à l'aide de la balise DIV ;
  • Créer un objet GstreetviewPanorama qui sera placé dans ce conteneur ;
  • Initialiser cet objet en définissant une location géographique (un point de vue ou POV "Point of View") ;
  • Détecter les navigateurs non supportés en vérifiant la valeur renvoyée par l'erreur FLASH_UNAVAILABLE.
Il est conseillé de ne pas dépasser une largeur d'images de 200 pixels de côté.

Localisation des images StreetView

En bref, le service StreetView recherche automatiquement l'existence d'un panoramique pour une valeur GlatLng donnée. On peut donc utiliser ce type de déclarations :

var monPanoramique;
function initialize() {
var TEST = new GLatLng(42.345573,-71.098326);
panoramaOptions = { latlng:TEST };
monPanoramique = new GStreetviewPanorama(document.getElementById("panoramique"), panoramaOptions);
GEvent.addListener(monPanoramique, "error", handleNoFlash);
}

Une autre fonction vous permet de vérifier l'existence du plugin Flash :

function handleNoFlash(errorCode) { if (errorCode == FLASH_UNAVAILABLE) { alert("Erreur: Flash n'est pas supporté par votre navigateur"); return; }}

Comportement de la caméra

L'objet Gpov est défini par trois propriétés :
  • Yaw : angle de rotation de la caméra (90 degrés représente l'Est) ;
  • Pitch : variation de l'angle vers le haut ou vers le bas (plus ou moins 90 degrés) ;
  • Zoom : niveau de zoom.
Par défaut, toutes ces valeurs sont sur zéro.
Voici un exemple de déclaration :

TEST = new GLatLng(42.345573,-71.098326);myPOV = {yaw:370.64659986187695,pitch:-20};svOpts = {latlng:TEST, pov:monPOV};var monPanorapique = new GStreetviewPanorama(document.getElementById("panoramique"), svOpts);

Il est aussi possible d'utiliser une méthode appelée setLocationAndPOV() dans laquelle vous allez définir à la fois la localisation géographique et le point de vue choisi :

var monPanoramique = new GStreetviewPanorama(document.getElementById("panoramique"));TEST = new GLatLng(42.345573,-71.098326);monPOV = {yaw:370.64659986187695,pitch:-20};monPanoramique.setLocationAndPOV(TEST, monPOV);

Déterminer si un lieu supporte le calque StreetView

Il suffit d'utiliser un autre objet appelé GstreetviewOverlay. Votre carte va se recouvrir de cet entrelacs dont la couleur vous est familiaire.

var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419, -122.1419), 13);svOverlay = new GStreetviewOverlay();map.addOverlay(svOverlay);

Il ne vous reste plus ensuite qu'à ajouter une réponse en image dès qu'un internaute va cliquer sur un des liserés de couleur bleue. L'objet utilisé s'appelle GStreetviewPanorama.

var monPanoramique = new GStreetviewPanorama(document.getElementById("panoramique"));var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(42.345573,-71.098326), 14);svOverlay = new GStreetviewOverlay();map.addOverlay(svOverlay);GEvent.addListener(map,"click", function(overlay,latlng) { monPanoramique.setLocationAndPOV(latlng);});

Dernière étape : il existe des méthodes avancées d'utilisation de cette classe d'objets qui vous permettent de répondre automatiquement à des requêtes de la part des internautes et dont un exemple intéressant est accessible à partir de cette page.
Il y a d'autres illustrations de cette fonctionnalité sur le blog de Google Maps API et dans cette galerie dédiée.
Cette utilisation est particulièrement intéressante puisqu'elle vous permet de visualiser votre itinéraire à la fois sur une carte et en bénéficiant de la fonction StreetView. Cliquez simplement sur le bouton Route. C'est encore mieux qu'un GPS !

Treize nouvelles agglomérations pour Google Maps StreetView

Le Blog officiel de Google Maps signale que ces treize nouvelles villes supportent la fonctionnalité StreetView :

  • Albuquerque, NM ;
  • Anchorage, AK ;
  • Austin, TX ;
  • Cleveland, OH ;
  • Fairbanks, AK ;
  • Little Rock, AR ;
  • Madison, WI ;
  • Nashville, TN ;
  • Rockford, IL ;
  • Richmond, VA ;
  • Spokane, WA ;
  • St. Petersburg, FL ;
  • Tampa, FL ;
  • Yosemite National Park, CA.

Le parc national de Yosemite se situe dans les montagnes de la Sierra Nevada, à l'est de la Californie, aux Etats-Unis. C'est un des plus beaux endroits de cette région.
Par ailleurs, la couverture de ces agglomérations a été étendue : Denver, Houston, Las Vegas, Los Angeles, Pittsburgh et la Baie de San Francisco.

2 commentaires:

  Panoramaniac

3 avril 2008 à 04:12

Informations très intéressantes et excellement documentées: un grand coup de chapeau!

  Jean-Noël Anderruthy

3 avril 2008 à 13:18

Merci pour ce petit mot sympa ;-)