You would like to integrate a localisation system in your applications, K2 in particular, so that your users can locate an address on a map. With this article you will be able to do it in a few minutes.

You will have this result at the end of the article:

Follow instructions below :

1.  Create a view

• The Text Box will contain the address entered by the user.
•  the button localization allows you to validate”
• The Data Label will contain the html script that will allow the address to be displayed on the map.

2. Check Literal in the data label properties

3. Create an expression

• Give a name to your expression.

• Paste this html script into the 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 />

• Then modify the expression by holding the click on the Text Box and releasing the click at that variable “q=”, exactly as in the figure below

• Finally click on OK.

4. Add the rule : when the button is clicked

5. Configuring data transfer

Hold the click on the expression and drop it into the data label.

6. Save the rule

Congratulations you now know how to integrate a location map into your K2 application.  🙂