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:
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>
<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
Adrien's Blog 