BlogBang

Comment intégrer une image haute résolution dans votre site en utilisant Google Map

Par Korben

boston2ti9 Comment intégrer une image haute résolution dans votre site en utilisant Google Map

Google Map Image Cutter est une application Java (qui tourne sous Windows et Linux) que vous allez adorer ! Elle permet d’afficher sur votre site n’importe quelle image énorme en grosse résolution, en utilisant tout simplement le moteur de Google Map !

Avant que je vous explique, petit démo :

Ah ça vous titille maintenant :-) ! Alors comment faire ?

  1. Téléchargez Google Map Image Cutter ici
  2. Lancez au choix le .sh ou le .bat
  3. Selectionnez votre image (File->Open) et cliquez sur le bouton « Create»  puis « Start» 

    4. capturegooglemapsimagecav7 Comment intégrer une image haute résolution dans votre site en utilisant Google Map

  4. L’application va alors créer un fichier HTML et pleins de petits images dans un sous répertoire. C’est votre image découpée. Pour mon exemple, 2 niveaux ont été crées permettant ainsi de zoomer sur une partie de l’image sans perte apparente de qualité
  5. Allez ensuite sur Google Map Dev pour récupérer une clé API pour votre site
  6. Editez le fichier html généré et remplacez le mot PUTAPIKEYHERE dans la ligne <script src=» http://maps.google.com/maps?file=api&v=2.x&key=PUTAPIKEYHERE»  par votre clé
  7. Uploadez le fichier html ainsi que le dossier contenant toutes les images
  8. Et intégrez la page dans n’importe quelle page de votre site avec une simple balise iframe !

J’vous l’avais dit que c’était géant !

[photo + photo]

Je vous recommande aussi la lecture des sujets suivants


Faites un lien vers cette news sur votre site



21 commentaires

  1. fabrice Reply to this comment


    C’est très sympa, si j’avais connu ce truc 2 semaines plus tôt j’aurais peut-être fait mon site avec…
    Mais maintenant que tout est fait ou presque… :)

    Posté le 8 janvier 2009 à 09:00:55

  2. Tony Reply to this comment


    C’est la meilleure de l’année celle là !!! Merci à tous les rédacteurs ;)

    Posté le 8 janvier 2009 à 09:01:36

  3. Korben Reply to this comment


    @Tony: Je suis tout seul comme rédacteur mais merci quand même au nom de tout l’équipe (d’une personne !)

    Arf !

    Posté le 8 janvier 2009 à 09:14:28

  4. Pascal Reply to this comment


    Pas mal du tout ! Google Maps comme un image viewer …

    Merci pour le tuto !

    Posté le 8 janvier 2009 à 09:49:06

  5. Homeroth Reply to this comment


    Je sens que ça va me servir ça… Merci Korben!

    Posté le 8 janvier 2009 à 09:49:07

  6. Phantasmes Reply to this comment


    Très érotique l’image que tu donne en démo, Korben…

    Posté le 8 janvier 2009 à 11:32:44

  7. Darklg Reply to this comment


    Terrible !
    Merci Korben :D

    Posté le 8 janvier 2009 à 11:52:55

  8. Plouceur Reply to this comment


    MAIS!!! C’est pour ma photo-mosaique des blogueurs francophones ca!!! Pourquoi continuer avec Zoomify si ce truc-la tient la route!? ;-)

    Posté le 8 janvier 2009 à 11:59:35

  9. Korben Reply to this comment


    @Plouceur: yesssss ! (j’suis dedans au fait ?)

    Posté le 8 janvier 2009 à 12:20:56

  10. ¥€$ Reply to this comment


    Merci Korb, ça déchire carrément plus que cette merde de SeaDragon ton truc !

    Posté le 8 janvier 2009 à 12:57:41

  11. Leg'Z Reply to this comment


    Pas mal !
    Merci beaucoup !

    Posté le 8 janvier 2009 à 13:32:51

  12. Greg Reply to this comment


    oui pourquoi pas parlé de zoomify ? c’est un outils sous Adobe photoshop CS3 qui fait la meme chose. ca marche bien aussi ;)

    Posté le 8 janvier 2009 à 14:30:18

  13. mamelouk Reply to this comment


    oui c’est assez cool comme appli, mais il y a des outils qui font ca depuis des années (zoomify comme il est dis plus haut)

    Posté le 8 janvier 2009 à 14:54:47

  14. Plouceur Reply to this comment


    @Korben: il faudrait t’inscrire pour ca. Va donc jeter un oeil, m’enfin!

    @Greg: zoomify existe independamment de Photoshop, zoomify.com

    Posté le 8 janvier 2009 à 15:13:19

  15. Plouceur Reply to this comment


    rhoooo ça fait pas les .tif :(

    Posté le 8 janvier 2009 à 22:59:43

  16. Plouceur Reply to this comment


    Si ça t’intéresse, j’ai mis la photo-mosaique en Zoomify et en GoogleMaps sur la même page! http://plouceur.com/mosaique-blogueurs/
    Merci pour le tuto!

    Posté le 9 janvier 2009 à 00:20:12

  17. Photo-Mosaique à la sauce Google Maps » Plouceur Reply to this comment


    [...] propulsée par zoomify, je vous propose la version propulsée par la techno GoogleMaps (merci Korben): les deux sont visibles sur la page de la mosaique. Alors, ça vous [...]

    Posté le 9 janvier 2009 à 13:25:44

  18. Yaitanes Reply to this comment


    Une bonne avancée pour le contenu web.
    Mais on ne peut pas télécharger (facilement) l’image, en tant qu’utilisateur, si?

    Posté le 9 janvier 2009 à 19:18:20

  19. Plouceur Reply to this comment


    @Yaitanes: non car l’image initiale n’est pas nécessaire. On ne fait ici que naviguer dans une miriade de petites images de 256×256.

    Posté le 9 janvier 2009 à 21:36:30

  20. Les liens de la semaine | ShigaBlog Reply to this comment


    [...] Comment intégrer une image haute résolution dans votre site en utilisant Google Map | Korben [...]

    Posté le 11 janvier 2009 à 12:19:32

  21. links for 2009-03-13 « Mandarine Reply to this comment


    [...] Comment intégrer une image haute résolution dans votre site en utilisant Google Map Google Map Image Cutter est une application Java (qui tourne sous Windows et Linux) que vous allez adorer ! Elle permet d’afficher sur votre site n’importe quelle image énorme en grosse résolution, en utilisant tout simplement le moteur de Google Map ! (tags: tools google photo wide-format) [...]

    Posté le 14 mars 2009 à 05:08:10

« Back to text comment