Creating Google Maps Screen

In this tutorial I’ll show you how to create a custom entity screen that displays google maps to display servicing routes.

How it works.

When we click on tickets we’ll see a google maps route from our restaurant to customers location.

##Database Tools Module Import File

If you don’t already have Address field for Customers create it before importing file.

GoogleMaps.zip (1.2 KB)

You’ll need to update Ticket Lister Widget Settings to enter your Restaurants address. You can find more info at the end of the tutorial.

##Implementation

First of all if you didn’t add it before we need to add an Address field for Customers.

I’ll add a new Entity Screen Called Map and select Custom as View Mode.

Entity Type will be Customers

… and I’ll add default mapping.

I should have an empty Custom Entity Screen.

I’ll Enable Design Mode and add a new HTML Viewer widget.

I’ll drag widget until it reaches to the bottom right corner of the window and resize it from top left handle to fit widget to the window top.

It should appear like that.

I’ll right click on Widget and click Properties to name the widget as Google Map Widget.

After saving it I’ll add a Ticket Lister Widget that fits into the remaining empty space.

From right click menu I’ll update Widget Settings to display customer name, phone and address of tickets.

{ENTITIES}
[ENTITIES:Customer]
<J00>Customer Name: {ENTITY NAME} | {ENTITY DATA:Phone}
<L00>{ENTITY DATA:Address}

This format configures how tickets displays in ticket. Since we used same formatting here you can customize it for your needs like you customize printer templates.

Now I’ll disable Design Mode and create few tickets to test if widget displays tickets properly.

It seems working fine. I’ve entered some dummy addresses from Ankara (my home city)

Now what we’ll do is displaying maps when we click on tickets.

I’ll start by creating a new action. That action is needed to update Google Maps Widget URL.

Next I’ll create a new Automation Command to handle Ticket Lister clicks. When we click on a item on Ticket Lister Widget this command will execute. We’ll keep Button Header empty and we don’t need to map it somewhere since we don’t need to display a button for this command.

Finally I’ll create a rule to handle this Automation Command. When this rule triggers it will execute Update Google Maps Widget URL action. We’ll pass Command Value as a parameter. This value will contain URL that we’ll build from Ticket Lister Widget

After creating a default mapping and saving it we’ll go back to Map screen, switch to Design Mode and edit Ticket Lister Widget properties to configure how URL is formatted.

This is how we need to format URL’s

 https://maps.google.com/maps?saddr=<your address>&daddr=<customer address>&hl=en

We need to:

  • replace <your address> part with your Restaurant’s address.
  • replace <customer address> part with customers address.

I’ll hardcode restaurant address and read customer address with {ENTITY DATA:Customer:Address} tag. So the resulting URL Template will be

https://maps.google.com/maps?saddr=Aşkabat Cd. No 30/A Bahçelievler Ankara&daddr={ENTITY DATA:Customer:Address}&hl=en

My sample restaurant address is Aşkabat Cd No:30/A Bahçelievler Ankara. You need to enter your restaurant’s address here.

Now I can update Ticket Lister with that configuration.

Finally the fun part comes. Disable Design Mode and click on Tickets to see how maps updates.

This is how first address displays.

… and the second one.

6 Likes

Thank you @emre this is awesome feature.

Thank you @emre
how do I show in ticket lister a paid tickets that have been closed to Use this great feature.?
Because our deliveri guys pay the bill before leaving for shipment.

You can add a second state on ticket for tracking Delivery Status and update Ticket Lister Widget’s State setting to display tickets for that state. You can find an example of this on Kitchen Display sample.

WOW, simply awsome!!!
THANKS!!!

G.

hi @emre

can you give me details how to import GoogleMaps.zip file ?

also i am using 4.1.34 and i can’t drag the widget all the way to right or left side. it s hide.

let me know what am i doing wrong ?

Have you purchased Database Tools Module?

is it possible without ? i am still new and in test + set up mode

Yeah it’s just much easier with Database Tools Module.
Try to delete the entity screen and create it again maybe it will solve your problem
Then follow the tutorial.

@allmixedup, what you are experiencing with the Widget is a .NET layout bug.
Try to get the bottom right hand corner of the widget set first.
If not, using the Properties setting for the Widget, change the X & Y as well as the Width and Height settings to get the Widget in the right spot.

I just download sambapos 4.1.34 and follow this tutoria and I have this issue see if any one can point me in right direction?

@JohnS
If I start from any corner still I am having same issue.

Drag it to the right corner (even if it looks like disappeared)


Then open it as necessary to the left


Good luck

1 Like

Thanks to pizzaeilat​4 and JohnS
finally after trying few times I figure out

now i can cover whole screen :smile:

1 Like

i followed the steps and it seems to work but the map takes ages to load.
have i done something wrong?

It will either work or not. There is no hidden settings.
Have you tried Google Maps in a web browser to see if it’s slow too.

It’s working fine now after restarting sambapos. Awesome feature!

Is there anyway we can get distance out of Google map to calculate delivery charges?
I found this VBA script for excel: http://oco-carbon.com/coding/google-excel-distance-function/
Or a whole bunch for Javascript/PHP.

Hi guys,

I am trial-deploying this function in china, any chance this map GUI feature be modeled on top of Baidu Map engine as well? I think the waiters in China, like to enter addresses in Chinese, and see the routes for delivery better so in Baidu Map…

Tks
Brian

Why if i change the name of the Custom field name(instead of address, i put in spanish (Direccion)the google map couldn’t update {ENTITY DATA:Customer:Direccion}only work if the customer field name is Address? thanks

Hello everyone, @emre @QMcKay @Jesse
How do I create a route with a multi Addresses So that one driver can plan a route to several deliveries at the same time
I tried to select few Tickets but on the map I only get one address route
Thank you