How to show city locations in a map using Qt and Google Maps for JavaScript

Comments

Featured article, September 20th 2009 (week 39)

---

20 Sep
2009

Article Review by Ikipou (20090920)

QtMaemo provides fast prototyping and programming in the Maemo environment. This article shows some city locations in Google map using Qt for Maemo.

Before studying this article, developers need to install latest Qt for Maemo.Here, the installation guide for Qt is also provided. A basic knowledge of the Maemo and Qt for Maemo are required for developers to study this article.

In this article, the author has used Google map API for the purpose of showing city location. The author has used Qt designer to build GUI's and to create the application form which contains various Qt components.Basically,the Qt components are QwebView and QPushButton.A Qt component of Qwebview is used to show city location in the Google map using API.The author has also explained how to implement this Qt component to show the city locations in a map, how to compiling this application and how to execute this application with code snippet.

This is a good article for developers who wants to develop Qt applications using API for Maemo platform.

---

14 Sep
2009

Article Review by deepikagohil (20090914)

The article presents step-by-step implementation to show city location in a map using Qt for Maemo. The article uses google map's API to accomplish this task. Qt APIs used in this article are QWebView and QPushButton. A component of QWebView is used to show city locatons in the map using Google API.

The article contains code-snippest for some essential methods. Moreover the information about compiling and screen-shots are also given. The article can be beneficial to intermediate and Experienced developers who are working on Google Map.

---

Log in or Join to leave comments.

This article shows how to display city location on a map using QWebKit and Google Maps API.

Article Metadata

---

Article

Created: flaviofabricioferreira (11 Jan 2009)

Last edited: hamishwillee (11 Oct 2012)

20 Sep
2009

Designing

Before starting the real implementation, we need to build the application GUI (Graphical User Interface). Qt offers a strong tool called Qt Designer to build GUIs. In this example, we used Qt Designer to create the application form. Such a form contains five buttons (QPushButton) and a web view (QWebView). You can add new Qt components inside a form by dragging and dropping elements from Widget Box. The properties like name and label of a Qt component can be changed through the Property Editor.

Implementation

NOTE: Usage of this code with the free Google Maps API Key breaks Google's Terms and Conditions (section 10.8). You should purchase an Enterprise License if you wish to use the Google Maps API as shown in this example.

First, we need to implement a custom QWebView component. In this example called Map, such a component has some additional services that allow us to show the city locations in a map using the Google Maps API. The main service of the Map component is implemented by geoCode method. The geoCode method requests the coordinates of the given local, by using the Google Maps API.

void Map::geoCode(QString local)
{
   QUrl geoCodeUrl("http://maps.google.com/maps/geo");
   geoCodeUrl.addQueryItem("q", local);   
   geoCodeUrl.addQueryItem("output", "csv");   
   geoCodeUrl.addQueryItem("key", "GOOGLE_MAPS_KEY");   
   manager->get( QNetworkRequest(geoCodeUrl) );
}

The geoCode response is received by replyFinished method. Such a method parses and stores the coordinate (latitude and longitude) in array of coordinates. After that, the reloadMap signal is emitted.

void Map::replyFinished(QNetworkReply *reply)
{
   QString replyStr( reply->readAll() );
   QStringList coordinateStrList = replyStr.split(",");
 
   if( coordinateStrList.size() == 4)
   {
      QPointF coordinate( coordinateStrList[2].toFloat(),
                                  coordinateStrList[3].toFloat() );
      coordinates << coordinate;
   }
   emit reloadMap();
}

The reloadMap signal is connected to loadCoordinates slot. Thus, when the signal reloadMap is emitted, the loadCoordinates slot is invoked. The loadCoordinates method uses the QtWebKit’s capability to call the JavaScript method Open that is defined in HTML loaded in Map component.

void Map::loadCoordinates()
{
   foreach(QPointF point ,coordinates)
   {
      this->page()->mainFrame()->evaluateJavaScript(
                         QString("Open(%1,%2)").arg(point.x()).arg(point.y()) );
   }
}

Such a HTML has the JavaScript code to show the city location using the Google Maps API. The initialize function creates a GMap2 with the center point in (0, 0) and the zoom level 1. Thus, the globe is shown completely on the map. The Open function updates the GMap2 center point to the arguments passed as parameter and the zoom level to 13.

var map;
 
function initialize()
{
   if (GBrowserIsCompatible())
   {
      map = new GMap2(document.getElementById("map"));
      map.setCenter( new GLatLng(0,0),1 );
   }
}
 
function Open(x,y)
{
   map.setCenter( new GLatLng(x,y),13 );
}

The MainScreen uses the Map component to show the map with the city locations. For example: when the button1 is clicked, the geoCode method is invoked passing Campina Grande as the city to be shown.

void MainScreen::on_button1_clicked()
{
   map->clearCoordinates();
   map->geoCode("Campina Grande");
}

Compiling

In order to compile our application, we needed to include the following lines in our Qt project file. Such lines enable the Qt modules needed by our application

QT += network \
         xml\
         webkit

After that, we can compile our application using the Scratchbox cross-compiler for ARM processor by executing the following commands:

qmake –project
//then add the lines described above using a text editor(vi or gedit)
qmake showmapARM.pro
make

Executing

The screenshots below shows our application execution:

• 
•