eyllanesc/mainPyQt4.py

## mainPyQt4.py
import sys

from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *

if __name__ == '__main__':
    app = QApplication(sys.argv)
    view = QWebView()
    view.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
    view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))
    view.show()
    sys.exit(app.exec_())

## mainPyQt5WebEngine.py
import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

if __name__ == '__main__':
    app = QApplication(sys.argv)
    view = QWebEngineView()
    view.settings().setAttribute(QWebEngineSettings.JavascriptEnabled, True)
    view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))
    view.show()
    sys.exit(app.exec_())

## mainPyQt5WebKit.py
import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebKit import *
from PyQt5.QtWebKitWidgets import *

if __name__ == '__main__':
    app = QApplication(sys.argv)
    view = QWebView()
    view.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
    view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))
    view.show()
    sys.exit(app.exec_())

## polyline.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      // This example creates a 2-pixel-wide red polyline showing the path of
      // the first trans-Pacific flight between Oakland, CA, and Brisbane,
      // Australia which was made by Charles Kingsford Smith.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          <!-- zoom: 10, -->
          <!-- center: {lat: 50.8548, lng: 1.1866},       -->
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
        });

        var flightPlanCoordinates = [
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiEStkn8k9SHuoFCVEcKr1GYEFKMoZ2T4&callback=initMap">
    </script>
  </body>
</html>
	import sys

	from PyQt4.QtCore import *
	from PyQt4.QtGui import *
	from PyQt4.QtWebKit import *

	if __name__ == '__main__':
	app = QApplication(sys.argv)
	view = QWebView()
	view.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
	view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))
	view.show()
	sys.exit(app.exec_())
	import sys
	from PyQt5.QtCore import *
	from PyQt5.QtWidgets import *
	from PyQt5.QtWebEngineWidgets import *

	if __name__ == '__main__':
	app = QApplication(sys.argv)
	view = QWebEngineView()
	view.settings().setAttribute(QWebEngineSettings.JavascriptEnabled, True)
	view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))
	view.show()
	sys.exit(app.exec_())
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Simple Polylines</title>
	<style>
	/* Always set the map height explicitly to define the size of the div
	* element that contains the map. */
	#map {
	height: 100%;
	}
	/* Optional: Makes the sample page fill the window. */
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>

	// This example creates a 2-pixel-wide red polyline showing the path of
	// the first trans-Pacific flight between Oakland, CA, and Brisbane,
	// Australia which was made by Charles Kingsford Smith.

	function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 3,
	<!-- zoom: 10, -->
	<!-- center: {lat: 50.8548, lng: 1.1866}, -->
	center: {lat: 0, lng: -180},
	mapTypeId: 'terrain'
	});

	var flightPlanCoordinates = [
	{lat: 37.772, lng: -122.214},
	{lat: 21.291, lng: -157.821},
	{lat: -18.142, lng: 178.431},
	{lat: -27.467, lng: 153.027}
	];
	var flightPath = new google.maps.Polyline({
	path: flightPlanCoordinates,
	geodesic: true,
	strokeColor: '#FF0000',
	strokeOpacity: 1.0,
	strokeWeight: 2
	});

	flightPath.setMap(map);
	}
	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiEStkn8k9SHuoFCVEcKr1GYEFKMoZ2T4&callback=initMap">
	</script>
	</body>
	</html>