Google Maps on Maemo 5 Part 1

In this post i will show you how to realize a Maemo 5 Qt 4.6 application with google maps integration.

The map:

There is a good short tutorial with included source code: http://efforts.embedded.ufcg.edu.br/qt/?p=80. Because there is no native library for the N900 you have to go another way to get the map in your application. The tutorial describes howto load and render the map by the webkit library. I used parts of the html file of that project for my little app.
The idea is quite simple. Webkit will render a webpage insider your app. That webpage consists of javascript methods which use the Google Maps-API. The javascript methods can be triggered from the app. The map class acts as proxy for the comunication between your app and the website. Quite simple hm?
The benefit of that method is: you may use the complete power of Google Maps-API. But if your internet connection is slow, you will have to wait until the map is loaded and that may need some time and a white page just looks ugly. Native implementations often have some startup animations that have an effect of compensation.
Sourcecode of index.html with javascript methods for google’s api:

function initialize(){
map = new GMap2(document.getElementById("map"));
map.setCenter( new GLatLng(49.002397,8.394251),10 );
var point = new GLatLng(49.002397,8.394251);
map.addOverlay(new GMarker(point));
openSynyx();
}


function openSynyx()
{
map.setCenter( new GLatLng(49.002397,8.394251),15 );
map.openInfoWindow(map.getCenter(),document.createTextNode("Synyx GmbH & Co. KG"));
}


function route(from){
map.clearOverlays();
directions = new GDirections(map);
directions.load("from: "+from+" to: Karlsruhe, Karlstrasse 68");
}


<body onload="initialize()" onunload="GUnload()" topmargin="0" leftmargin="0">
<div id="map" style="width: 450px; height: 400px"></div>
</body>

The map.cpp acts is a Children of QWebView and acts as poxy to the javascript methods:

Map::Map(QWidget *parent) : QWebView(parent)
{
}


void Map::naviFrom(QString from){
this->page()->mainFrame()->evaluateJavaScript(QString("route("%1")").arg(from));
}


void Map::openSynyx(){
this->page()->mainFrame()->evaluateJavaScript("openSynyx()");
}

mainscreen.cpp initializes the map with the path to the html file

map->load(QUrl("./index.html") ) ;

Now if you put all things together in an app, by adding a few buttons, a textfield and connect them to the Map::naviFrom method it could look like this:

google maps in maemo 5

The evaluation of the position (coordinates, or town labels, street names etc.) and the rendering of the route will be done by google’s api. So in contrast to other mobile plattforms with native libraries, you do not have to bother about that.
Part 2 will describe a way how to use the internal gps device of your N900 and how to use callback mechanisms for abstraction of the position handling.

Kommentare

  1. http://raeda.blog.com/2011/03/05/google-reverse-geocode-on-n900/?preview=true&preview_id=9&preview_nonce=a8e0f5f0df

  2. Hello,
    thanks for this tutorial..is the 2nd part ready??
    i have already managed to get coordination from the device itself if you need help let me know.
    regarding the application above "ShowMap" is it available for download??
    Thanks