Google

Insérer un calcul d’itinéraire Google Maps sur son blog ou sur son site

Je me creuse la tête depuis quelques temps pour insérer un calculateur d’itinéraire sur le site que je suis entrain de construire pour la future activité de mon épouse afin que les clients puissent trouver et imprimer le trajet leur permettant de nous rendre visite.

Je me suis dans un premier temps rendu sur le site calculateur-itineraire.com qui permet sans grande compétence d’éditer le script, qui l’héberge et qui vous communique par mail l’adresse à insérer dans les balises <i frame> afin de faire apparaître le résultat sur votre site.

Si cette solution est pratique, elle présente quelques inconvénients :

  • la barre « Annonces Google » que je ne souhaite pas faire apparaitre mais calculateur-itineraire.com est en droit de prétendre à une certaine rémunération en échange du service rendu,
  • l’impossibilité d’effectuer tous les paramétrages que l’on peut souhaiter pour une bonne intégration sur son site.

A force de recherches, j’ai trouvé différents scripts que j’ai modifié jusqu’à obtenir le résultat escompté mais l’insertion dans une page WordPress du site de mon épouse ne me satisfaisait pas.

Au final, j’ai crée une page html que j’ai uploadé à la racine de son site puis, dans la page du site prévue à cet effet, j’ai inséré une balise <i frame> qui m’a enfin donnée satisfaction. Vous pouvez testez ci-après ce calculateur qui vous mènera tout droit là où plusieurs personnes se bousculent tous les cinq ans pour y vivre.

 Pour pouvoir insérer une carte de ce type sur votre site, il vous faut dans un premier temps avoir un compte Google mais entre Picasa, Gmail et Google+, c’est peut-être déjà le cas. Une fois connecté à ce compte, vous devez récupérer une clé Google Maps API en vous rendant sur la page dédiée. La clé vous est délivrée instantanément, vous n’avez qu’à la copier quelque part pour ne pas l’égarer.

Vous devez ensuite identifier les coordonnées de votre point d’arrivée en recherchant l’adresse dans Google Maps puis en effectuant un clic droit sur l’endroit précis pour choisir « Plus d’info sur cet endroit », ce qui permet l’affichage des coordonnées dans la barre de recherche.

Copiez ces coordonnées, nous en aurons besoin pour la personnalisation de votre script.

Ouvrez un éditeur de texte et copiez le script suivant. Les zones de texte en rouge devront impérativement être modifiées:

<html>
<head>
<title>Calculateur d'itinéraire</title>
<meta http-equiv="Content-Type" content="application/xhtml+html; charset=utf-8" /
<meta name="Identifier-URL" content="http://votre.site.com">
<META NAME="Author" CONTENT="VDC">
<META NAME="OWNER" CONTENT="VDC">
<META name="Rating" content="general">
<META name="revisit-after" content="15 days">
<META name="robots" content="index, follow">
<META name="Robots" content="All">

<META http-equiv= »Content-Language » content= »fr »>
<LINK REL= »SHORTCUT ICON » HREF= »favicon.ico »>
<style type= »text/css »>
body { font-family: Arial, Verdana, sans serif; font-size: 11px; margin: 2px; }
table.iti { background-color: FFFFFF; font-size: 11px; margin: 4px; }
table.directions th { background-color:#C5DDE7; font-size: 15px;}
table.directions td { font-size: 11px;}
img { color: #000000; }
#map_canvas { width: 396px; height: 460px; border: 0px solid #333333 ; margin: 0px;}
#directions { width: 2196px; height: 460px; border: 0px solid #333333 ; margin: 2px; overflow: auto; width: auto; text-align: left; font-size: 9px; }
</style>
<style type= »text/css » media= »print »>
.print { display:none; }
#directions { width: 460px; height: auto; border: 0px solid #333333; margin: 2px; text-align: left; font-size: 9px; }
</style>
<script src= » http://maps.google.com/?file=api&amp;v=2.x&amp;key=ZZZZZZZZZzzZZZZ1zzZZZZz1zZZZZzZzzZZzzZzZZzz1ZzZzzzZZZZZzzZZZZzz1ZzZZZZZzZzz_ZzzzzZzzZZ  » type= »text/javascript »></script>
<script type= »text/javascript »>
var map;
var gdir;
var geocoder = null;
var addressMarker;
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById(« map_canvas »));
gdir = new GDirections(map, document.getElementById(« directions »));
GEvent.addListener(gdir, « load », onGDirectionsLoad); <!– Charge la partie pour les distances –>
GEvent.addListener(gdir, « error », handleErrors); <!– Charge la partie pour les messages d erreurs –>
map.setCenter(new GLatLng(48.870897,2.316931), 6);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.enableScrollWheelZoom();
var point = new GLatLng(48.870897,2.316931);
map.addOverlay(new GMarker(point));
}
}
function setDirections(fromAddress, toAddress, locale)
{
gdir.load(« from:  » + fromAddress +  » to:  » + toAddress, { « locale »: locale });
}
function handleErrors()
{
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert(« Aucune location géographique correspondante n’a pu être trouvée pour l’une des adresses spécifiées.\nCe qui peut être du à une adresse récente, ou incorrecte.\nN’oubliez pas d’ajouter dans l’adresse le pays (en anglais).\nError code:  » + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert(« La demande d’itinéraire n’a pu être calculée avec succès, aucune raison de l’échec n’est connu.\n Error code:  » + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert(« The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code:  » + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert(« La clé (Key) n’est pas valide ou ne correspond pas au nom de domaine. \n Error code:  » + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert(« La demande d’itinéraire n’a pu être correctement parsé.\n Error code:  » + gdir.getStatus().code);
else alert(« Une erreur inconnue est survenue. »);
}
function onGDirectionsLoad()
{
var reg=new RegExp(« &nbsp; », « g »);
kilometrage = gdir.getDistance().html;
document.getElementById(« km »).value = kilometrage.replace(reg,’ ‘);
}
</script>
</head>

<BODY BGCOLOR= »FFFFFF » TEXT= »#000000″ leftmargin= »0″ rightmargin= »0″ topmargin= »0″ bottommargin= »0″ marginheight= »0″ marginwidth= »0″ onLoad= »initialize(); » onUnload= »GUnload() »>
<form id= »monFormulaire » method= »post » action= »# » onSubmit= »setDirections(this.from.value, this.to.value, ‘fr’); return false »>
<table width= »496″ border= »0″>
<tr valign= »top »>
<td align= »right » width= »40″><strong>Départ:</strong></td><td align= »left » width= »400″><input type= »text » id= »fromAddress » name= »from » size= »40″></td>
<td align= »right » rowspan= »3″ width= »40″ valign= »middle »><input name= »gogogo » type= »submit » value= »Itinéraire » /><br><A href= »javascript:window.print() »><img src= »printer.gif » width= »32″ height= »32″ border= »0″ alt= »Imprimer l’itinéraire » title= »Imprimer l’itinéraire »></A></td>
</tr>
<tr><td align= »right »><strong>Arrivée:</strong></td><td align= »left »><input type= »text » name= »ArriveeAlt » size= »40″ value= »L’Élysée » disabled><input type= »hidden » id= »toAddress » name= »to » value= »48.870897,2.316931« ></td></tr>

<tr><td align= »right »><strong>Kms :</strong></td><td><input type= »text » id= »km » value= » » size= »9″ disabled >&nbsp;N’oubliez pas d’ajouter le pays (en anglais) !</td></tr>
<tr><td colspan= »3″>
<center>
<br>
</table>
<table width= »500″ border= »0″ cellspacing= »1″ cellpadding= »0″>
<tr><th width= »196″>Itinéraire détaillé</th><th width= »296″>Carte</th></tr>
<tr><td><div id= »directions »></td><td><div id= »map_canvas »></div></td></tr>
</table>
</form>

</BODY>
</HTML>

http://votre.site.com est à remplacer par l’adresse de votre site

ZZZZZZZZZzzZZZZ1zzZZZZz1zZZZZzZzzZZzzZzZZzz1ZzZzzzZZZZZzzZZZZzz1ZzZZZZZzZzz_ZzzzzZzzZZ est à remplacer par la clé Google Maps API qui vous a été fournie

48.870897,2.316931 (en trois endroits) est à remplacer par les coordonnées du point d’arrivée

L'Élysée est à remplacer par le nom de la destination tel que vous souhaitez qu’il apparaisse sur le calculateur d’itinéraire.

Vous pouvez également modifier les codes couleurs, rajouter des bordures et choisir l’épaisseur de ces dernières (je les ai mises à « 0 »), modifier les dimensions d’affichage, etc.

Enregistrez vote fichier sous le nom gmap.html dans le dossier de votre choix. Enregistrez également dans ce dossier l’image ci-dessous :

Ouvrez votre fichier gmap.html dans votre navigateur internet afin de voir s’il correspond à vos attentes et modifiez vos réglages en conséquence.

Une fois vos réglages terminés, uploadez le fichier gmap.html et l’image printer.gif à la racine de votre site.

Pour insérer ce calculateur dans ce billet de mon blog WordPress, je me suis mis en mode HTML

afin d’entrer mes balises <i frame> indiquant l’adresse de mon fichier gmap.html aux dimensions de mon choix :

<p style="text-align: center;"><iframe src="/gmap.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="500" height="500"></iframe></p>

Je ne sais s’il existe ou non des moyens plus simples pour insérer ce calculateur d’itinéraire mais j’ai enfin obtenu le résultat escompté.

EDIT : Le script ayant subio quelques modifications à cause de la mise en page, vous pouvez le télécharger ICI.

Amusez-vous bien

Un lanceur Google+ « Uploader » d’images dans le dock Unity d’Ubuntu

A l’heure où Google+ fait le buzz, voici un lanceur plus que pratique pour les utilisateurs de Google + sous Ubuntu 11.04 Natty Narwhal.

Pour en bénéficier, vous devez dans un premier temps installer GoogleCL soit en passant par la logithèque, soit en ouvrant un terminal et en entrant la commande :

sudo apt-get install googlecl

Une fois GoogleCL installé, ouvrez un terminal et entrez la commande :

google picasa list

Renseignez comme demandé votre nom d’utilisateur (machin@gmail.com). Votre navigateur va alors vous ouvrir une page vous proposant d’autoriser l’accès à votre compte par cette application.

Il reste maintenant à télécharger le lanceur Google+ en cliquant sur l’icône ci-dessous

Décompressez ce dossier dans votre home.

Comme nous devons modifier ce lanceur, nous allons l’éditer en ouvrant un terminal à l’aide de la commande :

gedit ~/.googleplus/google+.desktop

Remplacez les deux « clapico » par le nom de votre session Ubuntu puis enregistrez et fermez l’éditeur de texte.

Rendez vous ensuite dans votre home afin de rechercher le dossier .googleplus précédemment décompressé . Celui-ci étant caché, il vous faudra appuyer simultanément sur les touches [Ctrl] et [H] pour le faire apparaître.

Ouvrez le

Faites un clic droit sur le fichier google+.desktop puis dans propriétés sélectionnez l’onglet « Permissions » et cochez la case « Autorisez l’exécution du fichier comme un programme ».  Le fichier google+.desktop devrait s’être transformé en Google+

Il ne reste plus qu’à le faire glisser dans votre dock.

Non seulement ce lanceur vous propose d’accéder directement à la rubrique choisie mais vous pouvez aussi faire glisser des images directement dans la nouvelle îcone afin de les « Uploader » sur vote compte Picasa.

Une fois l’image transférée, votre navigateur s’ouvrira automatiquement sur l’album Picasa.

Amusez-vous bien.

Source : OMG Ubuntu

Gérez vos photos Picasa sous Ubuntu avec Picapy

Picapy est une application libre sous licence GNU GPL développée en Python permettant de gérer ses albums Picasa sans utiliser ni le navigateur, ni le logiciel Picasa proposé par Google.Picapy permet de visionner facilement albums et photos

Les photos peuvent non seulement être visualisées en cliquant sur la vignette correspondante mais également téléchargées sur votre PC.

Picapy propose un bouton permettant d’uploader ses photos sur un album déjà existant ou de créer un nouvel album.

Picapy n’est pas présent dans les dépôts officiels Ubuntu, ne suivez la procédure d’installation qu’en toute connaissance de cause.

Ouvrez un terminal et copiez la commande ci-dessous afin d’ajouter le dépôt de l’application :

sudo add-apt-repository ppa:atareao/atareao

Mettez la liste des dépôts à jour et lancez l’installation à l’aide de la commande

sudo apt-get update && sudo apt-get install picapy

Pour lancer Picapy, allez dans Applications puis Internet

Vous n’aurez plus qu’à renseigner votre identifiant et votre mot de passe Picasa.

Si vous souhaitez collaborer à Picapy pour les traductions, idées, améliorations, etc., le projet est ouvert dans Launchpad.

Amusez-vous bien.

Source : El Atareao

Chrome OS, QIPM ?

Préambule : l’objet de ce billet n’est pas d’entrer dans la polémique « Google tout puissant ».

Cela fait maintenant une semaine que j’ai installé cette OS dans ma VirtualBox mais je crois que cela me suffit pour me poser la question : Quel Intérêt Pour Moi ?Bien entendu, cette question ainsi que sa réponse n’engagent que moi mais, utiliser un Netbook qui ne serait en fait qu’un navigateur internet couplé à un lecteur audio/vidéo, je trouve cela extrêmement réducteur.

De plus, pour exploiter complètement ce système, je dois avoir en permanence une connexion à internet même si Google Gears me permet de l’utiliser en mode « hors ligne » et si comme moi vous êtes amenés à vous déplacer régulièrement, vous savez ce qu’il en est des points d’accès wifi en France ou de la 3G lorsque vous prenez le TGV.

D’une manière générale, le Netbook est pratique pour les utilisateurs voyageurs de part (selon les modèles et les OS) son démarrage rapide, sa taille et son poids mais ces personnes l’utilisent en principe à des fins professionnelles et ont besoins d’applications spécifiques à leur métier or il ne sera pas possible d’intégrer des logiciels spécifiques à Google OS.

Si ce produit n’évolue pas rapidement, je me demande à qui il peut bien s’adresser.

Au fait, QIPV ?

Chrome OS : qu’en penser ?

Tout d’abord merci à Korben pour son billet très complet sur Chrome OS et sur les liens permettant de le télécharger.
Quand je le lis, je vois un décorticage du produit et non une propagande pour Google. Je reste néanmoins effaré par la peur qu’on certains à voir leurs informations exploitées par Google. On le sait, Google est une machine à cibler des catégories pour les publicitaires et fait dans du « général » mais, qu’en est il de réseaux sociaux comme Facebook ou tout un chacun y raconte sa vie privée avec ses besoins, ses envies et ses projets ?
Google nous propose aujourd’hui une distibution basée sur le cloud , pourquoi pas ? La perfection n’existant pas en ce bas monde, ce système comme tous les autres aura des points forts et des points d’effort comme il aura ses admirateurs et ses détracteurs qui auront les uns et les autres autant de bonnes raisons d’apprécier que de détester ce produit.
Un des avantages, à mon sens de ce produit est que la médiatisation plus la force de communication de Google va (enfin) permettre au commun des mortels (le non geek) de se rendre compte qu’il n’y a pas que Windows dans la vie, qu’il existe des logiciels Open Source et que l’on peut, suivant le système utilisé vivre très bien sans logiciels piratés.
C’est pour cette raison que j’ai décidé de le tester dans ma VirtualBox afin de juger moi-même.

Comme je vis au fin fond de la campage, en Haute-Loire avec un super débit de 1Mb et que l’outil sera sur une VirtualBox avec 950 Mo de mémoire de base, je pourrai me rendre compte par moi-même de l’effacité du cloud computer dans des conditions non urbaines.
Non, je ne crierai pas avant d’avoir mal et je vous raconterai mon retour d’expérience dès que possible.

Blog en pause

pause

Traducteur

    Translate to:

Archives

Tout ouvrir | Tout fermer

Réseaux Sociaux

 

L’April