Aujourd'hui, je vous apprend comment intégrer une cartographie a un album.
Voici le résultat final.
http://albums.photoonweb.com/cyril911/20071222_Sortie_en_bateau/
Conditions nécessaires:
* Avoir un logiciel client FTP ( je vous recommande Filezilla ).
---------------------------------------
Etape 1 :
1/ Aller sur le site du google maps
voici le lien pour ceux qui ce perdent facilement :
http://maps.google.fr/
2/ Aller à l'endroit ou l'on veux la cartographie
3/ choisir le type de vision : Satellite ou carte simple.
4/ Sur la page, l'on peux voir en haut à droite de la carte le lien
" Obtenir l’URL de cette page "
Cliquer dessus et une nouvelle fenêtre s'ouvre.
5/ De préférence, choisir la taille moyenne.
6/ Un code html est généré en étape 3 de cette fenêtre.
Copier le code dans un bloc notes, on le réutilisera plus tard.
Etape 2 :
1/ Utiliser votre client FTP (exemple Filezilla) et connectez vous sur votre compte.
2/ plusieurs répertoire s'affiche, dont ceux de vos albums.
Ouvrir le répertoire/album que vous voulez modifier.
3/ dedans il y a un fichier index.php
Le récuperer sur votre ordinateur.
4/ Ouvrir index.php avec le bloc notes
5/ Des lignes de code apparaissent.
Il ne faut pas s'affoler.
6/ Vers la fin du code on peut lire le morceau suivant:
Code: Select all
<noscript>
<object classid="clsid :D 27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%"
height="100%" wmode="transparent">
<param name="movie" value="viewer.swf">
<param name="quality" value="best">
<param name="wmode" value="transparent">
<embed src="viewer.swf" quality="best" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</object>
</noscript>
</td>
</tr>
Code: Select all
<td>
Code: Select all
<td>
7/ Voici le code fourni par google maps :
Attention, ce code intègre la position GPS du lieu de la carte.
Il est donc normal que vous ayez pas les mêmes valeurs.
Code: Select all
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.fr/maps?f=q&hl=fr&geocode=&q=martinique&ie=UTF8&ll=14.641528,-61.024174&
amp;spn=1.834672,2.548828&t=h&z=9&output=embed&s=AARTsJp8j45l59bZ4YGizsoKVwHs2iZooQ"></iframe><br
/><small><a
href="http://maps.google.fr/maps?f=q&hl=fr&geocode=&q=martinique&ie=UTF8&ll=14.641528,-61.024174
&spn=1.834672,2.548828&t=h&z=9&source=embed" style="color:#0000FF;text-align:left">Agrandir le
plan</a></small>
au début
Code: Select all
<td>
Code: Select all
<td>
Code: Select all
<td><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.fr/maps?f=q&hl=fr&geocode=&q=martinique&ie=UTF8&ll=14.641528,-61.024174&
amp;spn=1.834672,2.548828&t=h&z=9&output=embed&s=AARTsJp8j45l59bZ4YGizsoKVwHs2iZooQ"></iframe><br
/><small><a
href="http://maps.google.fr/maps?f=q&hl=fr&geocode=&q=martinique&ie=UTF8&ll=14.641528,-61.024174
&spn=1.834672,2.548828&t=h&z=9&source=embed" style="color:#0000FF;text-align:left">Agrandir le
plan</a></small></td>
ce sont des balises pour créer une colonne supplémentaire dans un tableau.
Etape 3: intégration dans le code de index.php et renvoi sur le ftp
1/ le code de l'étape2 8/ est à ajouter juste après la balise </noscript> de l'étape2 6/.
Ce qui donne au final :
Code: Select all
<noscript>
<object classid="clsid :D 27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%"
height="100%" wmode="transparent">
<param name="movie" value="viewer.swf">
<param name="quality" value="best">
<param name="wmode" value="transparent">
<embed src="viewer.swf" quality="best" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</object>
</noscript>
</td><td><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.fr/maps?f=q&hl=fr&geocode=&q=martinique&ie=UTF8&ll=14.641528,-61.024174&
amp;spn=1.834672,2.548828&t=h&z=9&output=embed&s=AARTsJp8j45l59bZ4YGizsoKVwHs2iZooQ"></iframe><br
/><small><a
href="http://maps.google.fr/maps?f=q&hl=fr&geocode=&q=martinique&ie=UTF8&ll=14.641528,-61.024174
&spn=1.834672,2.548828&t=h&z=9&source=embed" style="color:#0000FF;text-align:left">Agrandir le
plan</a></small></td>
</tr>
Ce code ne représente pas la totalité du code de la page index.php
2/ le plus dur est fait, il suffit d'enregistrer la page index.php
Puis de la renvoyer sur le ftp pour remplacer l'ancien index.php
Voici le résultat final :
http://albums.photoonweb.com/cyril911/20071222_Sortie_en_bateau/
Good luck.
PS: pour ceux qui ont un peu plus de connaissances, l'intégration d'une vidéo de type Youtube and Co fonctionne également.
Petite idée pour les plus débrouillards :
-S'enregistrer avec une caméra ou webcam
-Le publier sur Youtube (il me semble que l'on peut choisir de la rendre visible ou pas sur youtube).
-entrer le code fourni par youtube et le placer a la place du code du tutoriel.
Auteur : Cyril911