Archives de la catégorie : API Google Maps

Google Street View intégré dans Google Maps API

Cette fois c’est la bonne. Google Street View est officiellement documenté dans l’API Google Maps.

GSV1

GSV1b

Les composants de cette fonctionnalité sont assez simples à utiliser.

Voici les principales possibilités offertes :

  • Création d’un panorama (en déterminant les coordonnées géographiques de ce dernier)
    var fenwayPark = new GLatLng(42.345573,-71.098326);
    panoramaOptions = { latlng:fenwayPark };
    var myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);

    Exemple

  • Déterminer la vue, l’orientation, le zoom précis du panorama à afficher. Google nomme cela un POV (Point Of View)

    fenwayPark = new GLatLng(42.345573,-71.098326);
    myPOV = {yaw:370.64659986187695,pitch:-20};
    svOpts = {latlng:fenwayPark, pov:myPOV};
    var myPano = new GStreetviewPanorama(document.getElementById("pano"), svOpts);
  • Un layer spécial îndiquant les zones où Street View est disponible peut être affiché sur votre carte Google Maps. Exemple

  • Toutefois, un service peut vous indiquer si les données Street View sont disponibles pour un lieu précis.

    Exemple

Pour voir ce qu’il est possible de faire, je vous conseille la galerie d’exemples proposés par Google.

Je vous conseille de voir cet exemple, permettant de simuler un itinéraire préalablement calculer :

GSV3

L’API Google Maps ajoute une nouvelle corde à son arc. C’est une nouvelle voie qui est offerte aux créateurs de mashups. L’intéraction entre la carte et la vue Street View peut être vraiment bien gérée afin d’apporter une expérience utilisateur nouvelle.

Ce qui serait vraiment intéressant serait de pouvoir intégrer des marqueurs dans la vue Street View.

Comme ceci :

 gsv_imagine

Street View deviendrait alors un vrai support d’informations géolocalisées.

Pour le moment ces données Street View ne sont disponibles "que" dans 43 villes aux USA.

GSV2

Mais il semblerait que de nouvelles vues sont entrain d’être prises en Australie, Nouvelle Zélande, Suisse ou Japon (via Zorgloob)… et peut être même Paris.

Mise à jour : je vous conseille ce tutorial de Google XXL.

StreetView dans Google Maps API?

…enfin presque.

Sur le Forum Google Maps API, des développeurs ont analysé la nouvelle version de l’API qui a été publiée (version 2.103). Ils ont trouvés de nouvelles classes et méthodes javascript commençant par GStreetview.

La documentation non officielle et des exemples sont disponibles sur le site de Mike Williams.

streetviewAPI

Je vous rappelle que les données StreetView sont disponibles dans les villes suivantes :

streetviewAPI2

(iva GoogleMapsMania et Mapperz)

Google Static Maps API

Google vient de lancer “Google Static Maps API“. Il ne s’agit pas d’une nouvelle feature de Google Maps API, mais véritablement un nouveau moyen de diffuser des carte plus facilement.

Les API cartographiques que l’on connait comme Google Maps API, Virtual Earth ou ViaMichelin Maps & Drive, ne sont destinées qu’à des sites web car utilisant des technologies Javascript de type AJAX. Seul un vrai navigateur web peut interpréter ce type de language. Une des révolutions de l’iPhone d’Apple est d’intégrer un dérivé du navigateur Safari sur le device et de pouvoir ainsi utiliser ce type de technologie. C’est un des premiers appareils a pouvoir le faire.

Mais qu’en ait il de 99,99% des téléphones formant le reste du marché? Les téléphones même perfectionnés ne peuvet afficher que des site web simple “statique” en HTML et image… comme sur le web il y a 10 ans. Les nouveaux OS pour téléphones mobiles comme Androïd ou les navigateurs dédiés comme Opéra Mini intégrent la possibilité des technologie d’affichage plus performantes. Mais pour l’instant ils ne sont pas encore lancés sur le marché.

Donc pour l’instant, il est encore difficile d’afficher sur votre site mobile des cartes adaptées pour votre téléphone mobile. Sans oublié que les capacités d’affichage des images sur les navigateurs des téléphones mobiles limitent la lisibilité. De plus l’écran est réduit, ne facilitant pas la lecture d’une carte détaillée.

Yahoo! déjà présent

Yahoo a depuis longtemps répondu à ce type de problématique avec  “Map Image API” de Yahoo! Maps Web Services. Il s’agit d’un Web Service de type REST où dans la requête vous indiquez le centre de la carte (adresse ou coordonnées géographiques), la taille (10 à 2000 pixels de hauteur et largeur), le format de l’image (png ou gif). Le système reste très simple et peut répondre à certaines problématiques mais pas vraiment au besoin “mobile”.

Voici un exemple (j’ai indiqué le centre, le zoom, la taille de la carte):

Google Static Maps API, qu’en est il?

Google Static Maps API fonctionne sur le même principe. Cette API vous permet de générer une carte statique, une image, depuis les serveurs de Google. Comme pour l’API Javascript vous devez avoir une API Key.

Attention, il y a tout de même une limite journalière de 1000 requêtes en sachant que le comptage se fait uniquement pour des cartes différentes. Vous pouvez demander l’affichage de 50000 cartes identiques sur une journée, ce qui est assez intéressant en fin de compte. L’image est au format GIF.

A partir de cette URL : http://maps.google.com/staticmap?parameters vous allez construire directement l’URL de la carte.

Voici les paramètres disponibles pour la création d’une carte statique :

  • center : le centre de la carte en coordonnées géographiques latitude, longitude
    ex : ¢er=48.861433,2.334112
  • zoom : le niveau d’échelle de votre carte (entre 0 et 19)
    ex : &zoom=16
  • size :  la taille de carte en largeurxhauteur
    NB : la limite est de 512×512 pixels.
    ex : &size=400×320
  • maptype :  le type de la carte. 2 possibilités (pour l’instant??), roadmap avoir pour les cartes classique et mobile pour avoir une carte vraiment adaptée aux écrans de mobiles (meilleur lisibilité)
    ex : &maptype=mobile
  • markers :  pour déterminer les marqueurs présents sur votre carte. Ils sont listés sur la valeur du paramètre markers.
    Il n’est pas indiqué une limite du nombre de marqueurs affichables. Un marqueur se définit par sa latitude, sa longitude, sa couleur (optionel) et une lettre pour le distinguer (optionnel). Ces quatres élément sont séparés par une virgule. Si il y a plusieurs marqueurs, on les distingue avec le caractère |
    ex : markers=48.861433,2.334112,blues|48.865491,2.321098,green
    Les couleurs des marqueurs sont : red (rouge), blue (bleu) ou green (vert).
    La lettre n’est pas séparée par une virgule (?? étrange) : markers=48.861433,2.334112,bluesr|48.865491,2.321098,greeneNB: vous pouvez ne pas indiquer de centre et de zoom si vous avez des marqueurs. La carte la plus adaptée pour afficher les icônes sera fournie.

Exemples

Voici quelques exemples :

  • Carte simple (centre/zoom)
    http://maps.google.com/staticmap?
    center=48.861666,2.32129
    &zoom=14
    &size=400×320
    &key=VOTREAPIKEY
     
  • Carte avec un simple marqueurhttp://maps.google.com/staticmap?center=48.861666,2.32129&zoom=14&size=400×320&markers=48.861666,2.32129key=VOTREAPIKEY
  • Carte avec marqueurs et un centre/zoomhttp://maps.google.com/staticmap?center=48.861666,2.32129&zoom=14&size=400×320&markers=48.861433,2.334112,bluer|48.865491,2.321098,greene&key=VOTREAPIKEY
  • Si je retire le centre et le zoom en laissant les marqueurs :http://maps.google.com/staticmap?size=400×320&markers=48.861433,2.334112,bluer|48.865491,2.321098,greene&key=VOTREAPIKEY
  • La même que la précédente en version mobilehttp://maps.google.com/staticmap?size=400×320&markers=48.861433,2.334112,bluer|48.865491,2.321098,greene&key=VOTREAPIKEY
     

En comparant les 2 cartes (version roadmap et version mobile), on peut se rendre compte que les voies sont moins larges pour une meilleure lisibilité des espaces. Les noms de rues sont écrits plus gros.

Conclusion

C’est une excellente initiative de la part de Google de proposer ce nouveau mode de requêtes de carte. Les requêtes sont très simples à formater et fournissent directement l’image. Pas de XML à parser pour avoir l’URL.

Cette nouvelle API est particulèrement adaptée aux supports mobile et ouvre donc de nouvelles persectives. Comme je le disais, les applications utilisant la cartographie dans le contexte mobile vont voir le jour plus facilement grâce à ce type d’outils. Cela va permettre d’effectuer un premier pas vers le mobile pour tous les mashups créés grâce à l’API Google Maps (ou autre). Mais attention, aucune intéraction n’est encore possible sur ces cartes. De plus les vues hybrides/satellites ne sont pas (encore) disponibles.

Points positifs :
- Multi plateforme et standard (pas de Javascript)
- Version mobile disponible
- Requêtes simples

Points négatifs :
- 1000 cartes uniques par jour (limité pour un site à fort trafic avec données dynamiques à afficher)
- Format unique d’image : GIF
- Taille des cartes un peu limite (512*512) pour certains cas

Découvrez un “Mashup Master”

Laissez moi vous présentez Olivier Gosselin, un ingénieur logiciel, qui a pas mal d’idées derrière la tête.

Il a créé de nombreux mashups cartographiques en se basant sur Google Maps, mixant tout cela avec les données de différents site web et API.

Même si certains de ces mashups semblent “simples”, il faut apprécier les idées ingénieuses qui sont ici exploitées… et qui peuvent amenées vers de nouveaux usages ou de même, de nouveaux mashups.

La liste de ses mashups (tous en anglais) sont présentés sur sa page personnelle : Olivier Gosselin.


  • Local News : Découvrez l’actualité directement depuis la carte
    Ce mashup utilise les API Google Maps, Geonames et Hostip.info.

  • Mapified Kayak : Utilisation du métamoteur de recherche de voyages Kayak, offrant la possibilité de rechercher plusieurs destinations de voyages d’un clic.
    Ce mashup utilise les API Google Maps et Kayak.

  • Mapified Rss : Géolocalisez n’importe quel flux RSS en surlignant les pays cibles.
    Ce mashup utilise les API Google Maps, Geonames et les flux RSS de Google News.

  • Mapified Stock Indices : Visualisez les variations quotidiennes d’indices boursiers asiatiques sur une carte Google Maps. Les couleurs et tailles d’icônes sont proportionnelles aux variations et aux capitalisations.
    Ce mashup utilise les API Google Maps, Geonames et Dapper.

  • Overflown Countries : Obtenez la liste de tous les pays survolés et les distances lors d’un déplacement à vol d’oiseau.
    Ce mashup utilise les API Google Maps et Geonames.

  • Road Trip in the USA and elsewhere : Obtenez la liste des zones administratives traversées lors d’un voyage routier. Elles sont affichées sur la carte pour les USA (états et comtés) et la France (régions et départements) mais la liste est disponible pour tous pays ou Google supporte la génération d’itinéraires. ANIMATION disponible du trajet.
    Ce mashup utilise les API Google Maps, Geonames, Topocoding et Google Chart.

  • Where Are Trains? : Mon mashup préféré dans cette liste. Suivez en temps-réel le déplacement des TGV quittant ou arrivant à Paris de manière animée. Le déplacement est déduit de l’heure de départ et d’arrivée du train.
    Ce mashup utilise les API Google Maps et Dapper.

  • GoogleMaps vs YahooMaps : 2 cartes sur la même page pour comparer facilement les cartes disponibles entre Google Maps et Yahoo Maps.
    Ce mashup utilise les API Google Maps et Yahoo Maps.

Avec son autorisation, je me permets de vous proposer ses 10 bonnes pratiques concernant la conception de mashups, que je trouve vraiment très pertinents :

Soyez malin! La philosophie des mashups est d’apporter une plus-value en fusionnant intelligemment des services web existants. Cherchez les ‘briques’ dont vous avez besoin sur le net et n’apportez que le ciment. Un assez bon annuaire des API est disponible sur programmableweb.com.

Si vous créez une ‘brique’ dans une optique non-commerciale, vous devriez la partager parce qu’il est fort probable que quelqu’un puisse un jour en avoir besoin pour créer un nouveau mashup qui pourrait vous inspirer par la suite. Regardez les bonus ci-dessus par exemple. N’imaginez pas que les moteurs de recherche référenceront correctement ces briques (tout du moins au début). Enregistrez-les sur des sites ou forums de référence. Pour les mashups Google Maps, la communauté Google Earth est un bon début.

Créez un mashup que vous souhaitez utiliser idéalement tous les jours et par conséquent un mashup utile Un fameux comme Flickrvision est joli à regarder quelques minutes mais AMHA n’a pas grand intérêt.

Utilisez un Integrated Development Environment (IDE) dédié au développement web, donc avec assitant de codage pour JavaScript, HTML, et CSS, un surligneur syntaxique pour ces mêmes langages, et un notificateur d’erreurs et d’avertissements à la volée. Personnellement j’utilise l’édition communautaire du Studio Aptana.

Installez les extensions pour Firefox utiles au débogage: Firebug et IETab.

Appliquez les bonnes pratiques Yahoo! Performance et installez YSlow pour Firebug. Vous pouvez également utiliser les outils gratuits en ligne de Pingdom.

Installez localement un serveur web packagé comme XAMPP.

Pour l’utilisation multi-domaine de XMLHttpRequest, utilisez un proxy and déployez le chez un hébergeur supportant la bibliothèque cURL. Un peu de bon sens doit vous faire ajouter quelques lignes de PHP pour sécuriser son utilisation.

Utilisez un gestionnaire de configuration comme Subversion et tracez les versions dans la page du mashup pour tenir vos utilisateurs informés des sorties.

Donnez un moyen à vos utilisateur de vous faire un retour (email, formulaire,..).

Bravo à Olivier, je lui décerne le titre honorifique de “Mashup Master“. :-)

Oufumer.fr : trouvez les lieux aménagés pour les fumeurs

Vous savez sûrement qu’à partir du 1er Janvier 2008, les lieux publics où il sera autorisé de fumer seront strictement réglementé (Décret n°2006-1386 du 15 novembre 2006)

Oufumer.fr propose aux fumeurs un maximum d’adresses de lieux où ils pourront fumer, dans le respect de la loi et de celui des autres citoyens.

oufumer

Simple et pratique, ce site propose la localisation directement sur une carte Google Maps des lieux aménagés pour les fumeurs.

A tout un chacun, fumeur ou non, désireux de s’informer et d’échanger des informations sur les lieux aménagés pour recevoir les fumeurs. Tout le monde peut également participer à la vie de ce site en ajoutant des lieux pouvant recevoir les fumeurs.