Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

11 Google Maps, Google Earth et SketchUp 3D Sur les anciennes cartes – papier –

11 Google Maps, Google Earth et SketchUp 3D Sur les anciennes cartes – papier –, on illustrait les contrées qui n’avaient pas encore été explorées avec des dragons. En clair, ces illustrations signiﬁaient : "Rechercher des infor- mations sur cet endroit ? Pourquoi ? Personne ne veut y aller. On y trouve des bêtes dan- gereuses !" Aujourd’hui, les dragons ont disparu, du moins sur la terre. Et nous n’avons plus aucun mal à replier les cartes… enﬁn lorsque nous utilisons des services en ligne comme ceux de Google. Google Maps Google Maps (http://maps.google.fr) est une carte du monde virtuelle (voir Figure 11.1). Vous pouvez visiter presque n’importe quel endroit de la terre, zoomer dessus et voir à quoi il res- semble (sans bouger de votre siège et à moindres frais). Google combine entre autres des noms de lieux, des informations par satellite ou en relief, des photos panoramiques de rues, avec des données sur des restaurants, des directions et – pour les États-Unis – des informations en temps réel sur le traﬁc. La zone de recherche est sufﬁsamment ﬂexible pour vous permettre de trouver des villes ou pays spéciﬁques, mais aussi des noms d’entreprises, des restaurants… Des couches spéciales – les ﬁchiers KML (Keyhole Markup Language) – peuvent s’afﬁcher au- dessus de Google Maps pour ajouter des informations tierces. Grâce à la fonction Mes cartes, vous pouvez ajouter vos propres repères, directions ou zones à Google Maps et modiﬁer votre texte dans la zone d’information du repère. Google vous Figure 11.1 Google Maps. Il y a trois boutons en haut : Plan, Satellite et Relief. Dans certains cas, les boutons sont plus nombreux. GOOGLE APPS ET AUTRES APPLICATIONS 340 permet aussi d’intégrer Google Maps sous forme de widget programmable dans votre blog ou votre page d’accueil. Google Maps est aussi disponible pour les téléphones portables. Il propose des directions et, pour certaines villes des États-Unis, l’affichage en temps réel du trafic pour éviter les embouteillages. Pour télécharger Google Maps pour votre téléphone portable ou votre PDA, allez sur http://google.fr/gmm depuis le navigateur web de votre téléphone. Si votre téléphone est pris en charge, vous pourrez l’installer. Google Earth Google Earth (http://earth.google.fr), illustré à la Figure 11.2, est l’homologue de bureau de Google Maps. Après l’avoir lancé, vous verrez que son globe 3D rotatif est beaucoup plus inté- ressant que la vue plane en 2D de Google Maps. La version basique de Google Earth est gra- tuite, mais la version payante vous permet de générer des vidéos avec certains effets comme un zoom sur un lieu précis – le type d’effets que vous voyez dans les reportages à la télévision. Google Latitude Google Latitude vous permet de localiser vos amis en temps réel sur une carte et de rester en contact avec eux. C’est une fonctionnalité de Google Maps pour mobile qui peut être utilisée sur différents télé- phones portables dont l’iPhone et les appareils BlackBerry, entre autres. Il fonctionne sur la base d’invi- tations que vous envoyez et que vous acceptez, mais vous gardez le contrôle total de vos données personnelles. Vous pouvez ensuite voir vos amis sur votre téléphone portable. Ce service Google est gratuit mais votre opérateur téléphonique vous facturera les frais de communication, faites donc atten- tion au type d’abonnement que vous possédez avant de l’utiliser. Figure 11.2 Lancer Google Earth. 341 GOOGLE MAPS, GOOGLE EARTH ET SKETCHUP 3D De nos jours, Google Earth propose la prise en charge la plus complète des ﬁchiers KML – y compris les animations. De nombreuses organisations ont des données que vous pouvez superposer sur le globe en cochant les cases respectives du volet Infos pratiques. Wikipédia ajoute des informations relatives au lieu depuis l’encyclopédie en ligne ; Météo vous permet d’afﬁcher les nuages et les prévisions ; le magazine National Geographic propose aussi des informations régionales, y compris des photos. Google Earth 5.0 vous permet désormais de plonger à la découverte des océans du monde entier grâce à ses partenaires comme la BBC et le magazine National Geographic, mais aussi d’explorer des représentations d’épaves en 3D, comme celle du Titanic. Des scientiﬁques et des spécialistes des environnements sous-marins font des commentaires sur ces fonds, sur les effets du changement climatique ou encore sur les espèces menacées. Google SketchUp Google SketchUp (http://sketchup.google.com) est un programme 3D pour les architectes ou les particuliers souhaitant créer un modèle 3D. Comme Google Earth, SketchUp n’est pas une application web et doit être installée (voir Figure 11.3). SketchUp est très facile à utiliser, même si vous ne pouvez pas tout faire avec. Quel que soit le modèle 3D créé dans SketchUp, vous pouvez ensuite l’inclure dans Google Earth. Figure 11.3 L’éditeur SketchUp 3D. GOOGLE APPS ET AUTRES APPLICATIONS 342 Il peut être intéressant de consulter les didacticiels vidéo en ligne sur http://sketchup.goo- gle.com/tutorials.html. Lorsque votre création est achevée, vous pouvez la télécharger sur le site Banque d’images 3D de Google, qui est un répertoire de modèles 3D partagés. Vous pouvez éga- lement importer un modèle trouvé dans cette banque d’images dans vos propres créations. 114 Insérer une carte Google sur votre site Prenez votre carte Google et exécutez-la, sans être sur le site de Google Maps. Le plus simple pour intégrer une carte Google sur votre site est d’aller sur http://maps.goo- gle.fr. Pointez sur un lieu – vous pouvez aussi zoomer dessus et passer en vue Satellite par exemple –, puis cliquez sur Lien en haut. Une boîte de dialogue s’afﬁche et vous permet de copier un code HTML à coller dans votre site (voir Figure 11.4). Vous pouvez aussi person- naliser la taille de la carte en cliquant sur Personnaliser dans cette fenêtre. Le code que vous obtenez est composé entre autres d’un cadre incorporé. Un cadre incorporé est une fenêtre dans le navigateur qui contient le service d’un site externe, dans ce cas, Google Maps. La Figure 11.5 en présente un exemple et le code HTML est illustré à la Figure 11.6. Figure 11.4 La boîte de dialogue d’intégration de Google Maps. Figure 11.5 Inclure le code d’intégration dans une page web. 343 GOOGLE MAPS, GOOGLE EARTH ET SKETCHUP 3D Si vous voulez utiliser du code HTML validé, vous devez ajuster certains attributs HTML de Google et définir votre type de document en "transitoire." Pour valider votre code HTML, tapez l’adresse de votre page web dans le programme de validation officiel du World Wide Web Consortium, sur http://validator.w3.org. Vous pouvez alors repérer des erreurs syntaxiques dans votre code. Pour en savoir plus sur le HTML et le CSS, visitez http://w3.org/TR/html4/ et http://w3.org/TR/CSS21/. Astuce Pour contrôler davantage votre carte et son apparence, vous pouvez utiliser l’API Google Maps. En plus du code HTML basique, vous devez avoir des connaissances en JavaScript. Allez sur la page http://code.google.com/apis/maps/ et cliquez sur Sign up for a Google Maps API key pour obtenir une clé API Google Maps. Lisez et approuvez les conditions d’utilisation, tapez l’adresse de votre page d’accueil et cliquez sur le bouton de création de la clé API (Generate API key). Non seulement vous obtenez votre clé – n’oubliez pas d’en faire une copie –, mais Google vous propose aussi des exemples de code pour commencer. Analysons ce code : <!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> Figure 11.6 Les fichiers HTML et CSS en arrière-plan d’une page web. GOOGLE APPS ET AUTRES APPLICATIONS 344 <title>Exemple d’API JavaScript Google Maps</title> <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR-KEY" type="text/JavaScript"></script> <script type="text/JavaScript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html> Ce code HTML produira une page vide ne contenant qu’un petit widget de carte. Dans la section head du code, vous verrez que la bibliothèque JavaScript Google Maps est référencée (remplacez YOUR-KEY par votre clé). La partie body comprend un élément div. En langage HTML, div est un diviseur générique qui englobe tout, ici, une carte. L’élément body déﬁnit aussi un événement onload qui implique la fonction load(), qui s’exécute quand la page a ﬁni de charger son code HTML et les images. Dans la fonction load(), vous voyez qu’il y a une petite vériﬁcation pour conﬁrmer que le navigateur est compatible avec les widgets Google Maps. Si c’est le cas, un nouvel objet carte est créé – il recherche l’élément div men- tionné avant avec l’id "map" – et centré à un emplacement spéciﬁque (latitude/longitude) avec un certain niveau de zoom. Pour l’instant, ce code ne fait rien de plus que l’intégration d’un simple cadre incorporé. Mais si vous avez compris cet exemple basique, vous pouvez ajouter des fonctionnalités avancées en lisant les didacticiels, la documentation et les exemples sur http://code.goo- gle.com/apis/maps/documentation/. Admettons par exemple que vous vouliez ajouter un repère sur la carte. Sous la commande map.setCenter() de l’exemple précédent, vous pouvez écrire le code JavaScript suivant : var point = new GLatLng(37.4313, -122.1229); map.addOverlay(new GMarker(point)); Vous voulez peut-être aussi ajouter une fenêtre d’information quand l’utilisateur clique uploads/Geographie/ 2332-chap11.pdf