kabootit[Article] Integrate Google Maps into your Servoy solution
by Jan Aleman
Servoy
![[image unavailable: Google]](http://www.kabootit.com/.shared/image.html?/photos/uncategorized/google.gif){kind=link}
(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!
Comments (18)