Let's create a program that displays Google Maps by following these steps:
- Create a new Qt Widgets Application project and remove the statusBar, menuBar, and mainToolBar.
- Open your project file (.pro) and add the following modules to your project:
QT += core gui webengine webenginewidgets
- Open mainwindow.ui and add a vertical layout to the canvas. Then, select the canvas and click the Lay Out Vertically button on top of the canvas. You will get the following:
- Open mainwindow.cpp and add the following headers to the top of the source code:
#include <QtWebEngineWidgets/QWebEngineView>
#include <QtWebEngineWidgets/QWebEnginePage>
#include <QtWebEngineWidgets/QWebEngineSettings>
- Add the following code to the MainWindow constructor:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow) {
ui->setupUi(this);
QWebEngineView* webview = new QWebEngineView;
QUrl url = QUrl("qrc:/map.html");
webview->page()->load(url);
ui->verticalLayout->addWidget(webview);
}
- Go to File | New File or Project and create a Qt resource file (.qrc). We will add an HTML file to our project, called map.html:
- Open map.html with your favorite text editor. It's not recommended to open an HTML file using Qt Creator, as it does not provide any color-coding for HTML syntax.
- Start writing the HTML code by declaring the important tags, such as <html>, <head>, and <body>:
<!DOCTYPE html>
<html>
<head>
</head>
<body ondragstart="return false">
</body>
</html>
- Add a <div> tag to the body and set its ID as map-canvas:
<body ondragstart="return false">
<div id="map-canvas" />
</body>
- Add the following code to the head of the HTML document:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=drawing"></script>
- Add the following code, also to the head of the HTML document, beneath the code we inserted in the previous step:
<script type="text/javascript">
var map;
function initialize() {
// Add map
var mapOptions = {
center: new google.maps.LatLng(40.705311, -74.2581939), zoom: 6
};
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
// Add event listener
google.maps.event.addListener(map, 'zoom_changed', function() {
//alert(map.getZoom());
});
- Create a marker and place it on the map:
// Add marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.705311, -74.2581939), map: map, title: "Marker A",
});
google.maps.event.addListener (marker, 'click', function() {
map.panTo(marker.getPosition());
});
marker.setMap(map);
- Add a polyline to the map:
// Add polyline
var points = [ new google.maps.LatLng(39.8543, -73.2183), new google.maps.LatLng(41.705311, -75.2581939), new google.maps.LatLng(40.62388, -75.5483) ];
var polyOptions = {
path: points,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
};
historyPolyline = new google.maps.Polyline(polyOptions);
historyPolyline.setMap(map);
- Add a polygon shape:
// Add polygon
var points = [ new google.maps.LatLng(37.314166, -75.432), new google.maps.LatLng(40.2653, -74.4325), new google.maps.LatLng(38.8288, -76.5483) ];
var polygon = new google.maps.Polygon({
paths: points,
fillColor: '#000000',
fillOpacity: 0.2,
strokeWeight: 3,
strokeColor: '#fff000',
});
polygon.setMap(map);
- Create a drawing manager and apply it to the map:
// Setup drawing manager
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
- Compile and run the project. You should see the following:
