« [Tip] Blob to string | Main | [News] Sybase and Servoy for Mac OS X seminar »
February 11, 2007
[Article] Integrate Google Maps into your Servoy solution
by Jan Aleman
Servoy
(UPDATE 10-25-07: the sample solution has been updated for 3.5. It no longer requires edits to the html template (cool). All the html code is now in a global for easier integration. - david)
If you are too lazy to code yourself you can also download the sample solution here. Import the solution and place the html file in SERVOYDIR/server/webapps/ROOT/servoy-webclient/templates/default/googlemaps/
You can get an idea of the results here:
http://demo2.servoy.com:8080/servoy-webclient/solutions/solution/googlemaps
Integrating Google Maps into your Servoy Web applications is really simple I always mention when asked in meetings. When I woke up this morning I was thinking if it really was that simple so I decided to fire up Servoy and try it out. Obviously I'm not going to settle with those easy to do popup windows, I want a full map right inside my Servoy window and be able to feed Servoy data to the map. I decided to make a list view on the customers table and display that on a tabpanel with some space above it for the google map.
I started at the excellent Google Maps API. I suggest you do so too
http://www.google.com/apis/maps/
While you are there get yourself a key, it's free and you'll need it.
Basicly you will need two things:
1. The necessary Google Javascript and <div> map tag
2. In Servoy a way to 'talk' to the client side Google Javascript
1. You can read the API or you can simply paste the code below into your header. Open the Servoy template using Webdav and put the following code between the <servoy:head> tags.
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});
}
}
function showAddress(address,markertext) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(markertext);
}
}
);
}
}
//]]>
</script>
Don't forget to replace the key above with the key you just got from Google or it won't work unless you run on localhost:8080
Right below your <servoy:panel> tag put Google Maps div tag:
Now in Servoy create this calculation on the table you want to send data to the Google map (in my case the customers table of example data connection)
Then place a label on the screen and attach this calculation to it as a dataprovider. Voila, 5 minutes of work to integrate Servoy with Google Maps.
Of course you can also do it the other way around! Click on the map and feed the click back to Servoy. But hey that's your saturday morning project!
Happy Servoying!
| Posted by David Workman on February 11, 2007 at 04:06 PM in Articles | Permalink
Comments
This is totally mega extended AWESOME!! Thanks Jan!
Posted by: Karel Broer | Feb 13, 2007 9:48:43 AM
This works really nice.
One little thing Jan, you forgot the address in your calculation.
It should be:
"showAddress(\ '+address+', '+postalcode+', ' +country+'\',\'This is the location of: '+companyname+'\'); return false">View map';
Oliver
Posted by: Oliver Naegele | Apr 23, 2007 5:58:20 AM
I can't import this solution in Servoy 3.5.1
Do you have a new version ?
Thanks in advance.
Guillaume CASTRE
Posted by: Castre | Oct 8, 2007 10:53:43 AM
NOTE: If you click the link for the demo and see "Error loading solution" ... do not conclude that "Servoy doesn't work" ;-) ... they have removed the demo since this article was posted many months ago. (And I doubt they have the time, and sure hope Jan Aleman would not spend his time, revving a demo for new versions of Servoy ...)
Posted by: kazar | Oct 21, 2007 10:19:42 AM
You need to recreate the htm template file, delete it and re-add in the javascript.
Posted by: Jan Aleman | Oct 24, 2007 9:44:26 AM
Note to my comment above: The sample has been updated to no longer require template editting. It will be posted here shortly.
Note to 'kazar', the demo has been turned on again.
Posted by: Jan Aleman | Oct 25, 2007 11:24:18 AM
New file is up. Thanks Jan!
Posted by: David Workman | Oct 25, 2007 1:53:37 PM
Ok for me now !
Many thanks !
Guillaume CASTRE
Posted by: Guillaume CASTRE | Oct 28, 2007 11:10:55 AM
Thanks for sharing, Jan! It's always nice to be able to easily show off cool features of Servoy in presentation meetings...
Posted by: Benoit Savignac | Nov 9, 2007 9:41:12 AM
In the Servoy version below the sample solution doesn't work. There are no methods created on import and the links in the first column are not clickable.
Servoy Developer
Version 3.5.2_01-build 515
Java version 1.6.0-oem-b104 (Windows Vista)
Has anyone else got these problems too?
Posted by: Jasper Meerman | Nov 29, 2007 5:59:59 AM
Nope, been playing around with the sample solution recently in 3.5.2 and it worked just fine
Posted by: Paul | Nov 29, 2007 10:28:21 AM
I do not understand the above instructions "place the html file in SERVOYDIR/server/webapps/ROOT/servoy-webclient/templates/default/googlemaps/". I have imported the solution, but I do not see a html file in the download that can be placed in the specified directory.
Posted by: Dean Westover | Dec 9, 2007 9:55:42 PM
David Workman modified the original solution so it doesn't need HTMl files anymore: Just download the sevoy file, import and you're done.
Paul
Posted by: Paul | Dec 10, 2007 4:13:23 AM
Nice solution, worked fine in Servoy 3.5.2 but ceased to work with Servoy 3.5.3.
Posted by: Donald Brendel | Dec 19, 2007 9:05:29 AM
It doesn't work with servoy 3.5.3 here either.
Posted by: Dirk van den Muijsenberg | Jan 9, 2008 6:44:30 AM
I just imported the solution in 3.5.3 and it works perfectly. Can you explain what exactly does not work?
Posted by: Bogdan Diaconescu | Feb 11, 2008 2:05:37 AM
Keep in mind Google terms of use - if your solution is not publically available, then using it in an internal application violates their terms of use.
Posted by: | Feb 28, 2008 7:47:19 PM
