CODEWITHSUNDEEP
javascriptpythonpyqtgoogle-maps-markersqwebview
Zeyad Obaia
Zeyad Obaia

Reputation: 736

PyQt4 webkit - google maps markers are not loading

I have a simple example that loads a google map in a QWebView. Here's the Python code:

#!/usr/bin/env python

import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
import os
app = QApplication(sys.argv)

web = QWebView()
web.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
tempPath = "file:///" + os.path.join(os.getcwd(), "simple.html").replace('\\','/')
print tempPath
web.load(QUrl(tempPath))
web.show()

sys.exit(app.exec_())

And here's the code inside *simple.html*

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

The problem is that the markers does not load inside the QWebView, as you can see they load just fine in the browser. PS. this issue is on windows, it does not occur on linux. Screenshot when I run the example on windows

Any idea how to solve this ?

UPDATE : After debugging, I get this error in the javascript console 

TypeError: 'undefined' is not a function (evaluating 'this.G.bind(this)') in marker.js:51

Upvotes: 2

Views: 790

Answers (2)

copacetic
copacetic

Reputation: 11

Also late to the party, but I was having the exact same issue but with wkhtmltopdf (also usesQTWeb). The this.G.bind error happens because QTWeb does not support 'bind'.

This must've been introduced when Google Maps forced an upgrade recently, and retired the version I was previously using 3.29 I think. Anyways, if you add this polyfill to the top of the page, it should fix your issue

<script>
  // PhantomJS/QTWeb does not support bind
  Function.prototype.bind = Function.prototype.bind || function(thisp) {
    var fn = this;
    return function() {
      return fn.apply(thisp, arguments);
    };
  };
</script>

Upvotes: 1

Hithesh Karanth
Hithesh Karanth

Reputation: 1

Sorry if Im late to the party. I did find a tweek in the mechanism of how google maps operate where you can get static map jpg upon etering api defined url code where you can adjust co ordinates if you want.

Note: This can be used only if its static map like displaying and no further action

I have just tweeked your code such that it displays the Image with marker on the map:

#!/usr/bin/env python
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
import os
import urllib
app = QApplication(sys.argv)
web = QWebView()
coordinates="13.0329,77.6136"
web.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
coadder="https://maps.googleapis.com/maps/api/staticmap?   center="+coordinates+"&zoom=16&markers=color:red%7Clabel:D%7C"+coordinates+"&size=1500x400"
urllib.urlretrieve(coadder, "local-filename.jpg")
tempPath = "file:///" + os.path.join(os.getcwd(), "local-filename.jpg").replace('\\','/')
print tempPath
web.load(QUrl(tempPath))
web.show()
sys.exit(app.exec_())

as you can see https://maps.googleapis.com/maps/api/staticmap? center=13.0329,77.6136&zoom=16&markers=color:red%7Clabel:D%7C13.0329,77.6136&size=1500x400

This url is from google maps api for more info

https://developers.google.com/maps/documentation/maps-static/intro

If you're intending for adding multiple pins on the map just add

markers=color:red%7Clabel:D%7C13.0329,77.6136

just go through the above link for details.

Although this is extremely crude way of doing it but with respect to PyQt4 QwebView I did read lot of speculation on readability of javascripts on that webview(for marking the location).I could only figure this out as an alternative. Hope this helps. Peace.

Upvotes: 0

Related Questions