Rémi

[TUTO] Intégrer Google Map à une page

Messages recommandés

Rémi    148

Bonjour les Zwiiens !

Je viens de voir sur le chat que ça parlait d'intégrer Google Map dans Zwii, pour simplifier la tâche aux futurs visiteurs du forum, voici les étapes pour intégrer une carte Google Map à l'une de vos pages Zwii :

1.thumb.png.b00bf31565faac84ba847972f72bfe42.png

  • Cliquez sur le lien "Partager" :

2.png.85b241a192b7dfa6fb519070ac688e5c.png

  • Dans la fenêtre qui s'ouvre cliquez sur l'onglet "Intégrer la carte" puis copiez le code
  • Allez dans l'édition d'une page sur votre site Zwii
  • Dans l'éditeur de texte cliquez sur l'onglet "Insérer" puis sur "Média"
  • Dans la fenêtre qui s'ouvre cliquez sur l'onglet "Intégrer" puis collez le code dans le champ
  • Validez et enregistrez votre page !

Et voilà, rien de plus simple ! :grin:

Bonus : rendre l'iframe responsive 

Dans le code de l'iframe que vous avez copié vous devez ajouter dans l'attribut style le code suivant :

width:100%;height:auto;

Exemple, le code :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2625.1735282799027!2d2.368173514951367!3d48.85490130890764!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e6720091d44f6f%3A0x1577465e1d166089!2s10+Boulevard+Richard+Lenoir%2C+75011+Paris!5e0!3m2!1sfr!2sfr!4v1489742086597" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Devient :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2625.1735282799027!2d2.368173514951367!3d48.85490130890764!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e6720091d44f6f%3A0x1577465e1d166089!2s10+Boulevard+Richard+Lenoir%2C+75011+Paris!5e0!3m2!1sfr!2sfr!4v1489742086597" width="600" height="450" frameborder="0" style="width:100%;height:auto;border:0" allowfullscreen></iframe>

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

Vrai que çà apporte un petit plus une google map ....

Et quand on la rend " responsive " elle s'adapte à tout les formats d'écran ; un must je pense .

merci Rémi pour cette nouvelle astuce ( elle complète d'une autre façon de faire celle que nous exploitons depuis les V7;5 )

Une démo visuelle de mon " bled " façon responsif sur une V8 du nounours  :)

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité
Il y a 10 heures, Rémi a dit :

Pour information je viens d'ajouter en bonus le code pour rendre l'iframe responsive comme Roger ne veut plus partager ses astuces :yum:.

Si l'on cherche bien dans le forum , ce code s'y trouve depuis fort longtemps et Roger partage toujours ses astuces contrairement a ce qui est affirmé :glasses:

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    295

Oh ! ça c'est ben vrai, ça ! Et j' me souviens mêm' d'une version de la 7.8 que j'avions fait' — dont l'data.json a fini par s'corrompre — qui proposait tout' sortes d'iframes responsives selon le principe des vidéos responsives posté il y a plus d'un an, comme dirait not' @Rémi... B|

Avec un peu d'chanc', l'post il y est encore. J'vas chercher !

Eurêka ! J'lai r'trouvé ! :) OK, c'est périmé par rapport à l'intégration dans TinyMCE, mais le code doit toujours marcher... et c'était just' pour dire...

 

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    295
Le 16/3/2017 à 15:00, Roger nounours a dit :

 

 

Pour continuer avec le parler normand, une petite lecture (condensée) — qui n'a rien à voir sur le forum d'entraide de Zwii, j'en suis conscient, et je m'en excuse... comme ça au moins personne n'aura à le faire. :ph34r:

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

Rabbit , l'code comme direait " l'sieur Boitelle " que je viens de lire dans son intégralite en suivant ton lien au dessus  "petite lecture " , et bin s'code là c'est exactement le m^me qui fait fonctionner la tiote carte google made in nounours ...bin vi j'me rappelle mouai quand j'ait dis " postes le tout à ton nom " t'osais po à c'époque , novice comme le " Boitelle Pére " que tu étais t'lancer dans d'la ptod de code , et bin ce bout de code là fonctionne toujours et fonctionnera tant que l'on ne supprimera pas sle html et le css ...

Partager ce message


Lien à poster
Partager sur d’autres sites
Rémi    148
Il y a 2 heures, PeterRabbit a dit :

Pour continuer avec le parler normand, une petite lecture (condensée) — qui n'a rien à voir sur le forum d'entraide de Zwii, j'en suis conscient, et je m'en excuse... comme ça au moins personne n'aura à le faire. :ph34r:

 

A cause de mes origines bretonne j'ai envie de supprimer ton message juste à cause du mot "normand" :naughty:.

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    295
Il y a 10 heures, Rémi a dit :

A cause de mes origines bretonne j'ai envie de supprimer ton message juste à cause du mot "normand" :naughty:.

@Rémi Ah, je comprends maintenant pourquoi tu as la tête dure : ceci explique cela... :D

Partager ce message


Lien à poster
Partager sur d’autres sites
Iron    6

Bonjour à tous.

 

Nickel pour intégrer une map de Google mais celle-ci prend toute la largeur du site.

En fait ça ne tient pas compte de la hauteur et de la largeur que l'on spécifie dans le code iframe.

 

Une idée pour corriger cela ?

Partager ce message


Lien à poster
Partager sur d’autres sites
Iron    6

Je n'arrive toujours pas à corriger ce souci d'affichage qui prend toute la largeur du site malgré le fait de définir correctement l'iframe.

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant