Voudriez vous intégrer une carte permettant de localiser une adresse dans un formulaire K2 ou tout autre application ?

Grâce à cet article vous saurez le faire en quelques minutes.

Vous aurez ce résultat à la fin de l’article :

Affichage d'une carte carte sur K2

Vous êtes prêt? C’est parti, voici les différentes étapes :

1. Créer une vue

Affichage de la carte de localisation sur K2 - Créer une vue

  • La TextBox contiendra l’adresse saisie par l’utilisateur.
  • Le Bouton localisation permettant de valider
  • Le Data Label contiendra le script html qui permettra l’affichage de l’adresse sur la carte.

2. Cocher Literal dans les propriétés du data label

3. Créer une expression.

  • Donner un nom à l’expression.

Affichage de la carte de localisation - Création de l'expression

  • Puis coller ce script html dans l’expression :
<div style="overflow:hidden;width: 700px;position: relative;"><iframe width="700" height="440" src="https://maps.google.com/maps?width=700&height=440&hl=en&q=Marseille, France+(My%20Business%20Name )&ie=UTF8&t=&z=6&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><div style="position: absolute;width: 80%;bottom: 10px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;text-align: center;"><small style="line-height: 1.8;font-size: 2px;background: #fff;">Powered by <a href="https://embedgooglemaps.com/es/">embedgooglemaps ES</a> & <a href="http://botonmegusta.org/">botonmegusta.org/</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><br />
Intégrer une carte grâce à une iframe
  • Ensuite modifier l’expression en maintenant le clique sur le Text Box et lâchez le clique au niveau de la variable «q= », exactement comme dans la figure ci-dessous.

Affichage de la carte - Configuration de l'expression.

    • Enfin cliquez sur OK.

4. Ajouter la rule : when the button is clicked

Affichage de la carte - Création de la rule

5. Configurer le transfert data.

Maintenez le clique sur l’expression et lâchez dans le data label. Voir la figure suivante :

Affichage de la carte -Configuration du transfert data

6. Enregistrer la rule.

Félicitation !!! vous savez maintenant comment intégrer une carte de localisation sur votre application K2.   🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *