lunes, 8 de agosto de 2016

¿CÓMO VISUALIZAR MAPA DE GOOGLE MAPS EN PYTHON-PYQT?

Hola a todos en esta entrada voy a visualizar mapas de Google Maps en Python-PyQT. Con la ayuda de Google Maps JavaScript API. La anterior ayuda permite visualizar mapas, insertar marcadores, eliminar marcadores.Etc..

 En este caso voy a mostrar un marcador en nuestro mapa.

 PASO 1: Crear la interfaz gráfica en QT. La cual consta de una forma Dialog Without Buttons y de un QWebView como se muestra a continuación:



PASO 2: Convertir la interfaz gráfica QT a PyQT.  Este paso ya lo hemos hecho en una entrada anterior de este BLOG pero si no lo recuerda acá les dejo el link:

 http://pythoninicios.blogspot.com.co/2016/06/convertir-de-ui-py.html

 PASO 3: Escoger el tipo de mapa. Como se mencionó anteriormente se va a escoger un mapa que nos muestre un marcador, y luego copiamos el código HTML del mapa para utilizarlo en nuestro Script de Python. Google Maps JavaScript API




PASO 4: Implementar el código. Este código sólo funcionará si tienen su API KEY, la pueden obtener gratuitamente AQUÍ. Cuando obtengan la suya simplemente la reemplazan en el código donde dice API_KEY la dejé con un buena tamaño para que puedan observar donde hacen el cambio.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
#!/usr/bin/python
# -*- coding: utf-8 -*-
'''
Código creado por: Gibson Sneyder Ramírez Moreno
correo: sramirez.udea@gmail.com
http://pythoninicios.blogspot.com.co/
'''
import sys
from web import *
from PyQt4.QtGui import QApplication
from PyQt4.QtCore import QUrl
from PyQt4.QtWebKit import QWebView

html= \
"""
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

function initMap() {
  var myLatLng = {lat: -25.363 , lng: 131.044 };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Mapa Prueba!'
  });
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=initMap"></script>
  </body>
</html>
"""     

class FormularioLogin(QtGui.QDialog):
    def __init__(self,parent=None):
        QtGui.QWidget.__init__(self,parent)
        QWebView.__init__(self)
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)
   
        
if __name__== "__main__":
    app=QtGui.QApplication(sys.argv)
    myapp = FormularioLogin()
    myapp.ui.webView.setHtml(html)
    myapp.show()
    sys.exit(app.exec_())

Después de hacer todos los pasos obtenemos lo siguiente:


Espero sea claro. Muchas gracias
By a la/s

1 comentario:

  1. Unknown26 de octubre de 2017, 3:13 p.m.

    muy buena explicacion Sneyder Ramírez justamente andaba buscando como ver google maps en python para mi proyecto de Estructuras de datos implementando el TDA Grafos jejej saludos desde Bolivia y gracias por compartir

    ResponderBorrar

Suscribirse a: Comentarios de la entrada (Atom)