I'm trying to embed a Google Maps web view inside a PyQt5 Window. But the map is rendered correctly in plain HTML but throws an error while rendering in Python. I tried running the code separately in plain HTML and inside a PyQt5 Web view.
My HTML code is following
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps - gmplot</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=MY_KEY"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 18,
center: new google.maps.LatLng(12.980700, 80.188200)
});
var marker_icon_FF0000 = {
url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAiCAYAAACwaJKDAAAABmJLR0QA/wD/AP+gvaeTAAACBklEQVRIia3VzUtUURgH4GdG/AiyZZShtWgXUbSIFtGqRYtqWRLhXyBYf0K6MaJQ2gRtayHtijYpleHKSCgIcRHoIiOSKEzLKea0OOeqTfPlzPzg5Qwz9zz3nXPvPTeneo7gNA4gjyI+Ygbva8z9L2cxi9BHOE+4msY+gliz6biayWE0R7GfMEcoEkJJzRH6CbnY+WiaVxEc6yY8KQOVq8eE7tj1WCV4qIswUyeY1QyhK8JDpWAP1m7vEMzqTkTXkrOZkYOEQoNogXAowiPE2wQuDqC9nktZJu0YSE72XRs2phrsMqup2OkG2vLpRB19DXaZJc3vQHv294Um0e3z8yigsNQkmuYXUMie5/npJtE0fz55YLiXsNHELdUbV2B4+4n2Y/Vmg+itCK4m558MdhBe7hCcJnRGdLDS0ox3E17XCb4h7IngeLX1zuFhD2G5BriytY4Tqmx9WXbh3Tnl99KsLkdwAbtrgVmO4/eDCuCkzd3/TL1glru9hF8lYJFwMoKPdgrCXqzfL0GfR7CIo42gcO9YCXopolONgnAC4W0Cv9l8dVxpBoWFGwmdiOC6Glc8X+3HlKeT6cOzOLzAjyaaBBc602ZzOHZ6vVkQ9kl7Qi6ip1qBwpdrEfwjPnFVU8+awuKrOC7hZ6vQlQ9baM3Ui379HsfVVqKf07jcSvRTGhfrOfgvIP3ECS77BDoAAAAASUVORK5CYII=",
labelOrigin: new google.maps.Point(10, 11)
};
new google.maps.Marker({
position: new google.maps.LatLng(12.980700, 80.188200),
icon: marker_icon_FF0000,
map: map
});
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;" />
</body>
</html>
This works fine but when I try to run this code inside a PyQt5 WebView Widget like following
# app.py
import gmplot
import sys
import os
from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets
class Browser(QtWebEngineWidgets.QWebEngineView):
def __init__(self):
super().__init__()
html = """
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps - gmplot</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=MY_KEY"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 18,
center: new google.maps.LatLng(12.980700, 80.188200)
});
var marker_icon_FF0000 = {
url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAiCAYAAACwaJKDAAAABmJLR0QA/wD/AP+gvaeTAAACBklEQVRIia3VzUtUURgH4GdG/AiyZZShtWgXUbSIFtGqRYtqWRLhXyBYf0K6MaJQ2gRtayHtijYpleHKSCgIcRHoIiOSKEzLKea0OOeqTfPlzPzg5Qwz9zz3nXPvPTeneo7gNA4gjyI+Ygbva8z9L2cxi9BHOE+4msY+gliz6biayWE0R7GfMEcoEkJJzRH6CbnY+WiaVxEc6yY8KQOVq8eE7tj1WCV4qIswUyeY1QyhK8JDpWAP1m7vEMzqTkTXkrOZkYOEQoNogXAowiPE2wQuDqC9nktZJu0YSE72XRs2phrsMqup2OkG2vLpRB19DXaZJc3vQHv294Um0e3z8yigsNQkmuYXUMie5/npJtE0fz55YLiXsNHELdUbV2B4+4n2Y/Vmg+itCK4m558MdhBe7hCcJnRGdLDS0ox3E17XCb4h7IngeLX1zuFhD2G5BriytY4Tqmx9WXbh3Tnl99KsLkdwAbtrgVmO4/eDCuCkzd3/TL1glru9hF8lYJFwMoKPdgrCXqzfL0GfR7CIo42gcO9YCXopolONgnAC4W0Cv9l8dVxpBoWFGwmdiOC6Glc8X+3HlKeT6cOzOLzAjyaaBBc602ZzOHZ6vVkQ9kl7Qi6ip1qBwpdrEfwjPnFVU8+awuKrOC7hZ6vQlQ9baM3Ui379HsfVVqKf07jcSvRTGhfrOfgvIP3ECS77BDoAAAAASUVORK5CYII=",
labelOrigin: new google.maps.Point(10, 11)
};
new google.maps.Marker({
position: new google.maps.LatLng(12.980700, 80.188200),
icon: marker_icon_FF0000,
map: map
});
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;" />
</body>
</html>
"""
here = os.path.dirname(os.path.abspath(__file__)).replace('\\', '/')
base_path = os.path.join(os.path.dirname(here), 'dummy').replace('\\', '/')
self.url = QtCore.QUrl('file:///' + 'map.html')
self.page().setHtml(html, baseUrl=self.url)
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
self.init_widgets()
self.init_layout()
def init_widgets(self):
self.browser = Browser()
self.browser.loadFinished.connect(self.load_finished)
def init_layout(self):
layout = QtWidgets.QVBoxLayout()
layout.addWidget(self.browser)
centralWidget = QtWidgets.QWidget()
centralWidget.setLayout(layout)
self.setCentralWidget(centralWidget)
def load_finished(self, status):
self.msg = QtWidgets.QMessageBox()
self.msg.setIcon(QtWidgets.QMessageBox.Information)
self.msg.setWindowTitle('Load Status')
self.msg.setText(f"It is {str(status)} that the page loaded.")
self.msg.show()
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
main_window = MainWindow()
main_window.show()
sys.exit(app.exec_())
I get this error on the console saying "js: You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started"
I mean why is it working in plain HTML file and not in the web view.
Screenshots -
(Running inside PyQT Widget)
(Running inside Browser as HTML)
Well first of all - do make sure that you billing account at google maps is enabled and this should solve your problem :)
besides that I must say that I have also played with google maps a little and it is a riddle for me. Sometimes it works without user's credential at all and sometimes not. No idea why the difference.
But really enabling paying is safe, unless you have thousands of API calls you won't get billed. Just do it and move forward.
This is what I would do.
Related
I'm trying to get some GPS data from a .py file onto an HTML. The data are two arrays of latitudes and longitudes. I want to load data from the python file into arrays of lats and lngs and make markers on a google map. I get an error at: var lats = {{ templateData["latitudes"]|safe }};. I even tried quotation marks, not writing safe and using JSON.parse(); with |safe. Any help would be appreciated.
gpsquery.py:
from flask import Flask, render_template
app = Flask(__name__)
import sqlite3
def getData():
latitudes = list()
longitudes = list()
altitudes =list()
conn=sqlite3.connect('C:/webenvironment/gpsdata.db')
curs=conn.cursor()
for row in curs.execute('SELECT * FROM GPSDATA'):
latitudes.append(row[0])
longitudes.append(row[1])
altitudes.append(row[2])
conn.close()
return latitudes, longitudes, altitudes
#app.route("/")
def index():
latitudes, longitudes, altitudes = getData()
templateData = {'latitudes': latitudes, 'longitudes': longitudes,'altitudes': altitudes}
return render_template('index.html', templateData=templateData)
if __name__ == "__main__":
app.run(debug=True)
index.html:
<!DOCTYPE html>
<html lang="en" <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Google Map</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap(){
var lats = {{ templateData["latitudes"]|safe }};
var lngs = {{ templateData["longitudes"]|safe }};
console.log(lats.toString());
var centerLat = (Math.max.apply(null,lats) + Math.min.apply(null,lats))/2;
var centerLng = (Math.max.apply(null,lngs) + Math.min.apply(null,lngs))/2;
var options = { zoom: 11, center: {lat: centerLat, lng: centerLng}}
map = new google.maps.Map(document.getElementById('map'), options);
for(var i =0; i<lats.length ; i++){
marker = new google.maps.Marker({position: {lat: lats[i], lng: lngs[i]}, map: map});
}
}
</script>
</body>
</html>
In Flask you should use the |tojson filter when parsing template data on script tags as described in the documentation
Change the html template in such way:
var lats = {{ templateData["latitudes"]|tojson }};
var lngs = {{ templateData["longitudes"]|tojson }};
I have created a sample app to load google maps in windows phone 8.1. Using the webview approch I'm not able to launch google maps, please help me in fixing this.. Below is the code:
default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Maps</title>
<!-- WinJS references -->
<!-- At runtime, ui-themed.css resolves to ui-themed.theme-light.css or ui-themed.theme-dark.css
based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<!-- Maps references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<h1>Google Maps API on Windows phone 8.1</h1>
<x-ms-webview id="Map" src="ms-appx-web:///map.html" style="width:500px;height:500px;"></x-ms-webview>
</body>
</html>
maps.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<!-- map references -->
<link href="/map.css" rel="stylesheet" />
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
<script src="/map.js"></script>
</head>
<body>
<div id="mapdisplay" height="500px" width="500px"></div>
</body>
</html>
maps.js:
var map;
var dataResults;
function initialize() {
map = new google.maps.Map(document.getElementById('mapdisplay'), {
zoom: 3,
center: new google.maps.LatLng(40, -187.3),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
addMarkers();
}
eqfeed_callback = function (results) {
dataResults = results;
}
function addMarkers() {
for (var i = 0; i < dataResults.features.length; i++) {
var quake = dataResults.features[i];
var coors = quake.geometry.coordinates;
var latLong = new google.maps.LatLng(coors[1], coors[0]);
var marker = new google.maps.Marker({
position: latLong,
map: map
//icon: getCircle(earthquake.properties.mag)
});
}
}
function getCircle(magnitude) {
return {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: .2,
scale: Math.pow(2, magnitude) / Math.PI,
strokeColor: 'white',
strokeWeight: .5
};
}
What's the mistake I'm doing in the above code, please let me know..
"maps.html" does not work because of multiple synchronicity issues.
Load maps.js beforehttp://maps.googleapis.com/maps/api/js so initialise is defined,
Load http://maps.googleapis.com/maps/api/jsand after the HTML has been parsed so the mapdisplay element exists when initialise is called.
Call addMarkers from eqfeed_callback not initialise so dataResults has been set with valid object data.
Most of this could have been found out by opening the developers console and checking it for errors when viewing "maps.html" in a desktop browser. You may also like to research other questions on the topic and/or check the api documentation for working examples - and notice how the api documentation uses defer and async attributes on the script tag to make sure it doesn't execute until after the page has been parsed.
I can't make work the new Streetlevel Javascript example (http://developer.here.com/javascript-apis/documentation/v3/maps/topics/panorama.html ).
I undestand the problem is "mapElement" in the constructor, but I can't figure out what is this parameter.
My app has a Base plan license.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="basemap"></div>
<br> <script type="text/javascript" charset="utf-8">
// Create a Platform object:
var platform = new H.service.Platform({
'app_id': 'my_app_id',
'app_code': 'my_app_code'
});
var basemap = document.getElementById('basemap');
var maptypes = platform.createDefaultLayers()
// Configure panorama with platform credentials:
platform.configure(H.map.render.panorama.RenderEngine);
// Instantiate a map, giving the constructor the engine type to use:
map = new mapsjs.Map(mapElement, basemap, {
center: {lat: 48.8733641244471, lng: 2.294754032045603},
zoom: 19,
engineType: H.Map.EngineType.PANORAMA
});
</script>
</body>
</html>
I found a way to render the panorama:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 800px; height: 600px" id="basemap"></div>
<br>
<script type="text/javascript" charset="utf-8">
// Create a Platform object:
var platform = new H.service.Platform({
'app_id': 'my_app_id',
'app_code': 'my_app_code'
});
// Get an object containing the default map layers:
var defaultLayers = platform.createDefaultLayers();
// Configure panorama with platform credentials:
platform.configure(H.map.render.panorama.RenderEngine);
// Instantiate the map using the normal map as the base layer:
var map = new H.Map(document.getElementById('basemap'), defaultLayers.normal.panorama, {
center: {lat: 48.8733641244471, lng: 2.294754032045603},
zoom: 18,
engineType: H.Map.EngineType.PANORAMA
});
// Enable the event system on the map instance:
var mapEvents = new H.mapevents.MapEvents(map);
// Add event listeners:
map.addEventListener('tap', function(evt) {
// Log 'tap' and 'mouse' events:
console.log(evt.type, evt.currentPointer.type);
});
// Instantiate the default behavior, providing the mapEvents object:
var behavior = new H.mapevents.Behavior(mapEvents);
</script>
</body>
</html>
I have a form and I want to add a "select location" option.
How can I do this, and how can I place a pin as the selected location?
You may want to consider using the Google Maps API, as davek already suggested.
The following example may help you getting started. All you would need to do is to change the JavaScript variable userLocation with the location chosen by your users from the drop-down field you mention.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var userLocation = 'London, UK';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(userLocation, function (locations) {
if (locations.Placemark)
{
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
map.addOverlay(new GMarker(bounds.getCenter()));
}
});
}
</script>
</body>
</html>
The above example would render a map like the one below:
The map will not show if the Google Client-side Geocoder cannot retreive the coordinates from the address.
Check out the Google Maps API. There's lots of information there and several examples:without knowing more about your environment/requirements it is difficult to be more specific.
Google Maps API can build a Direction from a source to a destination. In the following Google's example, each step are published into the HTML code: http://code.google.com/apis/maps/documentation/examples/directions-simple.html
I would like to get the Geocoding of each step of this direction, and store them in a array. I believe it's possible, but I don't see how to process.
Many Thanks for any answer.
Regards
Yes, you can get the individual steps from GDirections very easily.
First you have to make sure to pass the getSteps: true option when you call the GDirections.load() method. Then you can simply iterate through GDirections.getRoute(i).getStep(j), as in the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Simple Directions Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 550px; height: 400px"></div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
var directions = new GDirections(map);
directions.load('from: London, UK to: Glasgow, UK', { getSteps: true });
GEvent.addListener(directions, "load", function() {
if (directions.getNumRoutes() > 0) {
for (var i = 0; i < directions.getRoute(0).getNumSteps(); i++) {
directions.getRoute(0).getStep(i).getLatLng().lat();
directions.getRoute(0).getStep(i).getLatLng().lng();
directions.getRoute(0).getStep(i).getDescriptionHtml();
directions.getRoute(0).getStep(i).getPolylineIndex();
directions.getRoute(0).getStep(i).getDistance().meters;
directions.getRoute(0).getStep(i).getDuration().seconds;
}
}
});
</script>
</body>
</html>
Further reading and reference:
GDirections
GRoute
GStep