[TUTORIEL] Comment intégrer des cartes dans un album PhotoOnWeb (by Cyril911)

Forum de PhotoOnWeb en francais pour créer ses galeries photos en ligne
Celine [ObviousIdea]
Posts: 34
Joined: Fri Mar 04, 2011 8:07 pm
Contact:

[TUTORIEL] Comment intégrer des cartes dans un album PhotoOnWeb (by Cyril911)

Post by Celine [ObviousIdea] »

Bonjour,

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>
L'opération consiste à ajouter une balise

Code: Select all

<td>
a la fin juste après

Code: Select all

<td>
Puis de insérer le code fourni par google maps.

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>
8/ On y ajoute donc les balises (cf 7/)
au début

Code: Select all

<td>
a la fin

Code: Select all

<td>
ce qui donne le code suivant complet avant intégration dans le code de la page index.php.

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>
On remarque donc les balises <td> au début et </td> à la fin.
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>
Attention ceci est l 'endroit du code avec modification.
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