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 :

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

1. 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.

• 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 />

• 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.

• • Enfin cliquez sur OK.

4. Ajouter la rule : when the button is clicked

5. Configurer le transfert data

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

6. Enregistrer la rule

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