Feeds:
Posts
Comments

Posts Tagged ‘javascript’

Controlling Google Maps through a Qt application

Posted in C/C++, Computer tips, javascript, tagged , , , , , , , , , on May 1, 2012| 17 Comments »

The following project shows how to embbed Google Maps into a Qt application and how to control the map motion programatically.

The user interface is made of one QWebView containing a custom web page, and five QPushButton to move the map:

Image

The Google Maps widget is a web page displayed in a QWebView QWidget:

mView = new QWebView( this );
mView->settings()->setAttribute(QWebSettings::JavascriptEnabled,true);
QString fileName = qApp->applicationDirPath() + "/map.html";
QUrl url = QUrl::fromLocalFile( fileName );
mView->load( url );

The web page source code comes from a basic Google Maps API example, except that the link to the source of the javascript should be “http” instead of “https”:

<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script&gt;
<script type=”text/javascript”>
var map;

var myLatlng = new google.maps.LatLng(45.20297, 5.6995);

function initialize() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(45.20297, 5.6995),
mapTypeId: google.maps.MapTypeId.HYBRID,
zoomControl: true,
zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL },
};

map = new google.maps.Map(document.getElementById(‘map_canvas’), myOptions);
}

google.maps.event.addDomListener(window, ‘load’, initialize);

</script>

</head>
<body>
<div id=”map_canvas”></div>
</body>

Data is passed from the Qt application to the webpage using javascript. For example the following line will execute a javascript command to pan the map by 0 pixel in the x-axis direction and -10 pixels in the y-axis direction:

mView->page()->mainFrame()->evaluateJavaScript("map.panBy(0, -10);");

The source code of this project can be found here: https://docs.google.com/open?id=0B5yDBZt8fDFhNUpSeUZSaE1MU0E or there: http://github.com/adrienbailly/qmaps

[Sources]

Google Maps API Documentation: https://developers.google.com/maps/documentation/javascript/reference

QT QWebView Documentation: http://qt-project.org/doc/qt-4.8/qwebview.html

Read Full Post »