K2

How to display a Google Map on a K2 SmartForm

Google Map on a K2 SmartForm

Integrating Google maps with apps are quite popular.  A business for example would like to see distributions of incidents on a map and combine this with workflow to show which areas require additional resources to clear task backlogs.

Integrating Google maps with K2 is very simple.  Let’s start by creating a simple K2 SmartForm view that will host the Google map.  Drag in a K2 data label that will contain the map’s image HTML code.

1 - SmartForm view with Google Map placeholder

1 – SmartForm view with Google Map placeholder

Next, drag in textboxs for the longitude and latitude coordinates.  Also add a button that an event and K2 action can be associated with to load the Google map a K2 SmartForm.

2 - SmartForm view with Longitude and Latitude Textboxes

2 – SmartForm view with Longitude and Latitude Textboxes

Create a new K2 expression called Map URL.  The value of this is created by using the standard Google map URL and appending the Longitude and Latitude coordinates’ values.  Drag these from the right hand side context window into the K2 expression box.

3 - Google Map URL K2 SmartForm expression

3 – Google Map URL K2 SmartForm expression

Create another K2 expression called Map Image that contains the map’s HTML code and the Map URL as the src attribute’s value.

4 - Google Map Image K2 SmartForm expression

4 – Google Map Image K2 SmartForm expression

Now, on the host K2 View that contains the Google map, add a new K2 Data Transfer rule to the Load Map button’s click event.  Drag the Map Image expression into the value of the Google Map Data Label.

5 - Display Google Map Image in K2 SmartForm

5 – Display Google Map Image in K2 SmartForm

Save the K2 SmartForm view and open the view, enter a longitude & latitude value and click on Load Map.  The Google map displays in the K2 SmartForm

6 - Google Map display in K2 SmartForm

6 – Google Map display in K2 SmartForm

An enhancement to the feature is to derive he coordinates from an address.  More about that in a next blog.

About Velocity

For more downloads and further information on K2 workflow and K2 SmartForm solutions, please visit Velocity

Google Map on a K2 SmartForm

You may also like

One comment

  • potenzol June 28, 2017   Reply →

    I was recommended this website by my cousin. I’m now not sure whether this post is written via him as
    nobody else realize such precise about my problem.
    You’re amazing! Thanks!

Leave a comment

PODCAST  |  Why you need to establish a K2 Center of Excellence today

Interview with Arno van Rooyen, CEO, Velocity