Nagini
29th July 2015, 11:44
I am new to QML. The requirement is to display the Google Map, show directions for the given source and destinations and accept the GPS coordinates to display the pointer.
PLease suggest a way to acheive this.
My approaches and work-arounds:
I was atleast first targetting to display a Google Map in the QML file output, for which, i tried to make use of the WebView component of QML as below. But here if i directly give the Google Maps url, it willdisplay a blank screen, otherwise if i give google.com, it display the google welcome page. After enough surfing, I am assuming the reason behind this is, to make use of the Google Map APIs to display the Map even in QML or in Android or in any otehr platform, we need to register with google apis and obtain a API key and etc stuff.
import QtQuick 2.0
import QtWebKit 3.0
Rectangle {
id: content
width: 800
height: 600
color: "black"
WebView {
id: webView
anchors.fill: parent
url: "test.html"
// url:"https://maps.googleapis.com/maps"
}
}
Then i tried to display using webview, wherein, the url parameter takes input as an html file, which html file has the code including the API key to show the Google Maps. But still a blank screen int he qml result is given. A point to note here is, when i try to open that html file using a browser, it displays the Map.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAlDpbqfg9cSMR3KXz_MEb 3hTA3oYWjJAjbd03R2NWMUuUP2WaqRQoF0m5cqrl1XcMH6kLmP tzm4ppLw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-21.4708, -47.0006), 14);
map.setUIToDefault();
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()" topmargin="0" leftmargin="0">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>
I am not finding the secret behind all these. Please someone suggest me a solution for this.
PLease suggest a way to acheive this.
My approaches and work-arounds:
I was atleast first targetting to display a Google Map in the QML file output, for which, i tried to make use of the WebView component of QML as below. But here if i directly give the Google Maps url, it willdisplay a blank screen, otherwise if i give google.com, it display the google welcome page. After enough surfing, I am assuming the reason behind this is, to make use of the Google Map APIs to display the Map even in QML or in Android or in any otehr platform, we need to register with google apis and obtain a API key and etc stuff.
import QtQuick 2.0
import QtWebKit 3.0
Rectangle {
id: content
width: 800
height: 600
color: "black"
WebView {
id: webView
anchors.fill: parent
url: "test.html"
// url:"https://maps.googleapis.com/maps"
}
}
Then i tried to display using webview, wherein, the url parameter takes input as an html file, which html file has the code including the API key to show the Google Maps. But still a blank screen int he qml result is given. A point to note here is, when i try to open that html file using a browser, it displays the Map.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAlDpbqfg9cSMR3KXz_MEb 3hTA3oYWjJAjbd03R2NWMUuUP2WaqRQoF0m5cqrl1XcMH6kLmP tzm4ppLw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-21.4708, -47.0006), 14);
map.setUIToDefault();
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()" topmargin="0" leftmargin="0">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>
I am not finding the secret behind all these. Please someone suggest me a solution for this.