How to integrate Google Maps?

kd_wala

Hi everyone,
I have plan to using Qt5 for building app for Mobile(Android, iOS)
My app need using Google Map
as I know, on Mobile should using QML (should not using Widget), so, if using QtWebEngine or QtWebkit but it not have support mobile,
QtWebView support on mobile but not support much more (it just have funtion for loading html, run javascript) but we want to C++ interact with it ( Ex: when click on marker, C++ know this ...)
So, pls suggest me what direction to using Google Map on Mobile with QML.
Thanks

GTDev

Hi!
Did you consider using a different map provider that is already supported by QML Maps as a plugin? (e.g. MapBox). It's possible to draw markers and work with the map directly from QML then (no WebView involved).

You can also have a look at V-Play SDK for apps and games, which also offers a QML AppMap component with some additional built-in features like showing the user position on the map. There's also an open-source maps app demo available that you can use as a reference for your implementation.

A simple map can be added for example like this:

 import VPlayApps 1.0
 import QtLocation 5.5

 App {
   NavigationStack {

     Page {
       title: "Map Example"

       // show the map
       AppMap {
         anchors.fill: parent
         plugin: Plugin {
           name: "mapbox"
           // configure your own map_id and access_token here
           parameters: [  PluginParameter {
               name: "mapbox.map_id"
               value: "mapbox.streets"
             },
             PluginParameter {
               name: "mapbox.access_token"
               value: "<you-mapbox-access-token>"
             }]
         }

       }
     }
   }
 }

Best,
GT

vladstelmahovsky

@kd_wala here is a GoogleMaps plugin: https://github.com/vladest/googlemaps

kd_wala

@vladstelmahovsky , thanks for your suggest, i will checking this
@GTDev , thanks for your suggest, but my app must using google map because other map provider not fit with my app requirement

ekkescorner

@kd_wala let us know if the plugin is working well. Is your app a Qt Quick Controls2 app ?

kd_wala

@ekkescorner , Ok, I will check this and notify you,
Yes, my app using Quick Control 2,
my app is have some funtion that like grap, uber, so we need using google map.

ekkescorner

@kd_wala said in QML Google Map for Mobile(Android, iOS):

@ekkescorner , Ok, I will check this and notify you,

thx

Yes, my app using Quick Control 2,

always good to see that more and more mobile apps are developed using QQC2 :)

my app is have some funtion that like grap, uber, so we need using google map.

looking forward to see this app in action

kd_wala

@ekkescorner , I have just using googleMaps plugins that @vladstelmahovsky suggest ( https://github.com/vladest/googlemaps ), at first time, it work quite well, thanks for all support.

ekkescorner

@kd_wala thx letting us know that it works

carles.sole.grau

@kd_wala
Could you explain how that plugin is installed?
And how you implement it from QML?
Thank you very much.

kd_wala

@carles-sole-grau , When you done clone & build plugin, you should create folder 'geoservices' in same folder of file execute, then copy plugin into this 'geoservices' folder

You can see struct plugins in folder ( that why we have name 'geoservices') where you install Qt ex: '~/Qt5.8.0/5.8/gcc_64/plugins/ (I using Ubuntu & Qt5.8)

on QML you do like this:
Plugin {
id: mapPlugin
name: "googlemaps"
}

for tutorial how plugin, refer to example : http://doc.qt.io/qt-5/qtwidgets-tools-styleplugin-example.html
for detail refer to doc: http://doc.qt.io/qt-5/plugins-howto.html

seyed

Build instruction:
1-Open project using QtCreator
2-Choose proper Build Kit and profile (for example debug profile)
3-Copy files manually or use terminal and run this command: make -f Makefile.Debug install or make -f Makefile.Release install if you choose release profile for building plugin.
4-Use plugin by setting googlemaps as name property of the Plugin Item. (for more information about using QtLocation and QtPositioning refer to Qt official documentation)

Talkless

@kd_wala I doubt using that QtLocation plugin can be considered legal, by the Terms and Conditions of Google Maps.

There was a dissucsion about using Google Maps not through their API's (JS, Java?), which looks like is not allowed. See comment:
https://bugreports.qt.io/browse/QTBUG-27304?focusedCommentId=300663&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-300663

Alternative is to use QtWebView and control official web-based Goole Maps through QtWebChannel, by creating JavaScript webocket connection from within WebView to your app.

Or, create QtWebView-like wrapper for native Java Gogole Maps components, just like QtWebView creates and manages native web view on different mobile OSes. There are limitations of course, as QML components will not be able to overdraw on top of these native components.

joshmarshall95

@vladstelmahovsky can you tell me how to use the Geocode option? I need to be able to enter a postcode and then set the long and lat to that location

vladstelmahovsky

@joshmarshall95 just like any other QtLocation geocode API

bahman309

@vladstelmahovsky
hi,
thank you very much indeed ...
how to set traffic layer in the map?

vladstelmahovsky

@bahman309 I suppose as MapPolyline's if you have geo coordinates of traffic

bahman309

@vladstelmahovsky
I want to use google traffic service

vladstelmahovsky

@bahman309 I'm not aware about the service, sorry

bahman309

@vladstelmahovsky
thank you...