[SOLVED] Embedding Google Maps API into QWebView using .html, dataset used in .html is changed during runtime, can't update .html embedded into QWebView.

[kayrauzun]

Hello all,

I'm using Qt5 for compilation. Firstly, my project is about getting a continuous data flow of X and Y coordinates every 1 second from Pvt struct, and displaying them on WebView with google maps using google maps API by updating the map with up to last 15 markers (coordinates) every 1 seconds. However, my google maps doesn't update. The code is as follows,

My gmaps.h file,

#ifndef GMAPS_H
#define GMAPS_H

#include <QtGui>
#include <QtCore>
#include <QtWebKitWidgets/QWebView>
#include <QtWebKitWidgets/QWebFrame>

class Maps : public QWidget
{
Q_OBJECT

public:
Maps(QWidget *parent = 0);
void setCenter(double xCoor, double yCoor);
void addMarker(double xCoor, double yCoor);
void setupUI(QWebView *myView);

private:
QWebView *mView;
QVector<double> latitudeArray;
QVector<double> longitudeArray;
};

#endif // GMAPS_H

My gmaps.cpp file

#include "gmaps.h"
#include <QGridLayout>

Maps::Maps(QWidget *parent)
: QWidget(parent)
{
}

void Maps::setupUI(QWebView* myView)
{

this->mView = myView;
mView->settings()->setAttribute( QWebSettings::JavascriptEnabled, true );
mView->settings()->setObjectCacheCapacities(0,0,0);
mView->triggerPageAction(QWebPage::ReloadAndBypassCache);
mView->settings()->setAttribute(QWebSettings::LocalStorageEnabled, true);

mView->page()->mainFrame()->evaluateJavaScript(QString("xCoorArray = []"));
mView->page()->mainFrame()->evaluateJavaScript(QString("yCoorArray = []"));
QString fileName = qApp->applicationDirPath() + "/maps.html";
if( !QFile(fileName).exists() ) {
    qDebug() << "File not found:" << fileName;
}
QUrl url = QUrl::fromLocalFile( fileName );
mView->load( url );

}

void Maps::setCenter(double xCoor, double yCoor) {

mView->page()->mainFrame()->evaluateJavaScript(QString("x_init_Coor = %1").arg(xCoor));
mView->page()->mainFrame()->evaluateJavaScript(QString("y_init_Coor = %1").arg(yCoor));

}

void Maps::addMarker(double xCoor, double yCoor)
{

if ( latitudeArray.size() < 15 && longitudeArray.size() < 15 ) {

    latitudeArray.append(xCoor);
    longitudeArray.append(yCoor);
    mView->page()->mainFrame()->evaluateJavaScript(QString("xCoorArray.push(%1)").arg(xCoor));
    mView->page()->mainFrame()->evaluateJavaScript(QString("yCoorArray.push(%1)").arg(yCoor));

}
else {
    latitudeArray.removeFirst();
    latitudeArray.append(xCoor);
    longitudeArray.removeFirst();
    longitudeArray.append(yCoor);
    mView->page()->mainFrame()->evaluateJavaScript(QString("xCoorArray.shift()"));
    mView->page()->mainFrame()->evaluateJavaScript(QString("xCoorArray.push(%1)").arg(xCoor));
    mView->page()->mainFrame()->evaluateJavaScript(QString("yCoorArray.shift()"));
    mView->page()->mainFrame()->evaluateJavaScript(QString("yCoorArray.push(%1)").arg(yCoor));

}

// QString fileName = qApp->applicationDirPath() + "/maps.html";
// QUrl url = QUrl::fromLocalFile( fileName );
// mView->load( url );

}

And, the calls to this object are made from another class constructor X where Maps map is a variable like,
X::X(QWidget *parent) : QDialog(parent), ui(new Ui::X) {
map.setupUI(ui->webView);
map.setCenter(49.00, 11.00);
}

And this class X is the main GUI, in which a function called newPvt is called every second with fresh data set as,

void X::newPvt(const struct Pvt &pvt) {

map.addMarker(pvt.posLat, pvt.posLon);
//ui->webView->page()->settings()->clearMemoryCaches();
//ui->webView->reload();

// ui->webView->repaint();
//ui->webView->update();

}
The maps.html is,

  var map;
  var markers;
  
  function initialize() {
    var myOptions = {
      zoom: 8,
      center: new google.maps.LatLng(x_init_Coor, y_init_Coor),
      mapTypeId: google.maps.MapTypeId.HYBRID,
      zoomControl: true,
      zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL },
    };
    
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    setMarkers();
    //document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);    
  }
  
  function setMarkers(){
    for (var i = 0; i < xCoorArray.length; i++) {
      var latLng = new google.maps.LatLng(xCoorArray[i],yCoorArray[i]);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        animation: google.maps.Animation.DROP
      });
      //markers.push(marker);
    } 

  } 

  function reloadMarkers(){
    var i;
    for( i = 0; i < markers.length; i++ ){
      markers[i].setMap(NULL);
    }
    markers = [];
    setMarkers();
  }      

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

// google.maps.event.trigger(map, 'resize');

All the commented lines above, are the solutions i tried, and which all failed. And, as a note, when i tried reload() and load(url) in addMarker function, they both caused the WebView to go blank.

So all in all, the solutions i tried are,

• loading the .html again from the directory in addMarker method.

• reload(), repaint(), update() in the newPvt function which is instantiated every 1 second.

• mView->settings()->setObjectCacheCapacities(0,0,0);
  mView->triggerPageAction(QWebPage::ReloadAndBypassCache);
  mView->settings()->setAttribute(QWebSettings::LocalStorageEnabled, true);
  added in setupUI().

• Trying to create an event in .html for google maps to refresh the markers by itself.

I'm out of options now. Hope somebody can help. Thanks for reading.

It's solved, i added another evaluateJavascript command to seperately call setMarker().