qx Mobile : Any example of how to display a google map on a Container

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

qx Mobile : Any example of how to display a google map on a Container

slah
Hi all,
I'm new to qx mobile, I'm trying to display a google map on a container but was enable to achieve this.

I've seen the show case for OSM and I'm used to "play" with google maps in qx desktop but now I'm stuck and can't figure out how to achieve this.

Can someone kindly give me some code snippets or a working example on how to do this in qx mobile.

Regards
Reply | Threaded
Open this post in threaded view
|

Re: qx Mobile : Any example of how to display a google map on a Container

Thomas Herchenroeder
Provide a mobile Playground example so we can see how what you've tried
so far.

T.


On 01/09/2013 10:16 PM, slah wrote:

> Hi all,
> I'm new to qx mobile, I'm trying to display a google map on a container but
> was enable to achieve this.
>
> I've seen the show case for OSM and I'm used to "play" with google maps in
> qx desktop but now I'm stuck and can't figure out how to achieve this.
>
> Can someone kindly give me some code snippets or a working example on how to
> do this in qx mobile.
>
> Regards
>
>
>
> --
> View this message in context: http://qooxdoo.678.n2.nabble.com/qx-Mobile-Any-example-of-how-to-display-a-google-map-on-a-Container-tp7582449.html
> Sent from the qooxdoo mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> Master Java SE, Java EE, Eclipse, Spring, Hibernate, JavaScript, jQuery
> and much more. Keep your Java skills current with LearnJavaNow -
> 200+ hours of step-by-step video tutorials by Java experts.
> SALE $49.99 this month only -- learn more at:
> http://p.sf.net/sfu/learnmore_122612
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>


------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: qx Mobile : Any example of how to display a google map on a Container

czuendorf
The maps example in our mobile showcase is a very good starting point for what you want to do.


The important thing in this example is to override the "_createScrollContainer" of your NavigationPage.
With this, you replace any scrolling logic of the content. 

As I see, you just have to assign the mapContainer a new id like "googleMap".

Then:

Just have a look at this:

Replace the _mapURI with the Google Map URI:
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE
As next step you have to modify the "_loadMapLibrary" method according to Google Maps API.

Something like this should work: 

 var mapOptions = {
          center
: new google.maps.LatLng(-34.397, 150.644),
          zoom
: 8,
          mapTypeId
: google.maps.MapTypeId.ROADMAP
       
};
       
var map = new google.maps.Map(document.getElementById("googleMap"),
            mapOptions
);
The _createContent method is not needed for your purpose. Also the Geolocation methods are not important for you.

One thing I want to mention: We decided to use OpenStreetMap because of the restrictions Google Maps does have.
There is a maximum limit of API calls for Google Maps if you want to use it for free. The maximum is about 1000 calls a day, i think so.

Greetz Christopher


Am 10.01.2013 um 08:22 schrieb thron7:

Provide a mobile Playground example so we can see how what you've tried
so far.

T.


On 01/09/2013 10:16 PM, slah wrote:
Hi all,
I'm new to qx mobile, I'm trying to display a google map on a container but
was enable to achieve this.

I've seen the show case for OSM and I'm used to "play" with google maps in
qx desktop but now I'm stuck and can't figure out how to achieve this.

Can someone kindly give me some code snippets or a working example on how to
do this in qx mobile.

Regards



--
View this message in context: http://qooxdoo.678.n2.nabble.com/qx-Mobile-Any-example-of-how-to-display-a-google-map-on-a-Container-tp7582449.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
Master Java SE, Java EE, Eclipse, Spring, Hibernate, JavaScript, jQuery
and much more. Keep your Java skills current with LearnJavaNow -
200+ hours of step-by-step video tutorials by Java experts.
SALE $49.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122612
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel




------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: qx Mobile : Any example of how to display a google map on a Container

slah
Hello,
thanks for the reply, I think these examples are very important to ease the use of the framework and make it more popular.
I've seen the Maps.js in details, well written and good example.

I've tried to mimicate but was enable to see my map :), here's an example http://tinyurl.com/alwgwdn
You'll notice that the google map api was never loaded.

Regards

czuendorf wrote
The maps example in our mobile showcase is a very good starting point for what you want to do.

https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js

The important thing in this example is to override the "_createScrollContainer" of your NavigationPage.
With this, you replace any scrolling logic of the content.

As I see, you just have to assign the mapContainer a new id like "googleMap".

Then:

Just have a look at this:
https://developers.google.com/maps/documentation/javascript/tutorial

Replace the _mapURI with the Google Map URI:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE

As next step you have to modify the "_loadMapLibrary" method according to Google Maps API.

Something like this should work:


 var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),
            mapOptions);

The _createContent method is not needed for your purpose. Also the Geolocation methods are not important for you.

One thing I want to mention: We decided to use OpenStreetMap because of the restrictions Google Maps does have.
There is a maximum limit of API calls for Google Maps if you want to use it for free. The maximum is about 1000 calls a day, i think so.

Greetz Christopher


Am 10.01.2013 um 08:22 schrieb thron7:

Provide a mobile Playground example so we can see how what you've tried
so far.

T.


On 01/09/2013 10:16 PM, slah wrote:
Hi all,
I'm new to qx mobile, I'm trying to display a google map on a container but
was enable to achieve this.

I've seen the show case for OSM and I'm used to "play" with google maps in
qx desktop but now I'm stuck and can't figure out how to achieve this.

Can someone kindly give me some code snippets or a working example on how to
do this in qx mobile.

Regards



--
View this message in context: http://qooxdoo.678.n2.nabble.com/qx-Mobile-Any-example-of-how-to-display-a-google-map-on-a-Container-tp7582449.html
Sent from the qooxdoo mailing list archive at Nabble.com<http://Nabble.com>.

------------------------------------------------------------------------------
Master Java SE, Java EE, Eclipse, Spring, Hibernate, JavaScript, jQuery
and much more. Keep your Java skills current with LearnJavaNow -
200+ hours of step-by-step video tutorials by Java experts.
SALE $49.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122612
_______________________________________________
qooxdoo-devel mailing list
[hidden email]<mailto:[hidden email]>
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel




------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET<http://ASP.NET>, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: qx Mobile : Any example of how to display a google map on a Container

czuendorf
The important thing is to load the GoogleMap library before your page logic is called .

On callback of library loading you can call something like "createMap".

Another important thing is the API key you have to request from google. Without it, i would not expect, that anything could be loaded.

Greetz Christopher


Am 10.01.2013 um 11:43 schrieb slah:

> Hello,
> thanks for the reply, I think these examples are very important to ease the
> use of the framework and make it more popular.
> I've seen the Maps.js in details, well written and good example.
>
> I've tried to mimicate but was enable to see my map :), here's an example
> http://tinyurl.com/alwgwdn
> You'll notice that the google map api was never loaded.
>
> Regards
>
>
> czuendorf wrote
>> The maps example in our mobile showcase is a very good starting point for
>> what you want to do.
>>
>> https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js
>>
>> The important thing in this example is to override the
>> "_createScrollContainer" of your NavigationPage.
>> With this, you replace any scrolling logic of the content.
>>
>> As I see, you just have to assign the mapContainer a new id like
>> "googleMap".
>>
>> Then:
>>
>> Just have a look at this:
>> https://developers.google.com/maps/documentation/javascript/tutorial
>>
>> Replace the _mapURI with the Google Map URI:
>>
>> https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE
>>
>> As next step you have to modify the "_loadMapLibrary" method according to
>> Google Maps API.
>>
>> Something like this should work:
>>
>>
>> var mapOptions = {
>>          center: new google.maps.LatLng(-34.397, 150.644),
>>          zoom: 8,
>>          mapTypeId: google.maps.MapTypeId.ROADMAP
>>        };
>>        var map = new
>> google.maps.Map(document.getElementById("googleMap"),
>>            mapOptions);
>>
>> The _createContent method is not needed for your purpose. Also the
>> Geolocation methods are not important for you.
>>
>> One thing I want to mention: We decided to use OpenStreetMap because of
>> the restrictions Google Maps does have.
>> There is a maximum limit of API calls for Google Maps if you want to use
>> it for free. The maximum is about 1000 calls a day, i think so.
>>
>> Greetz Christopher
>>
>>
>> Am 10.01.2013 um 08:22 schrieb thron7:
>>
>> Provide a mobile Playground example so we can see how what you've tried
>> so far.
>>
>> T.
>>
>>
>> On 01/09/2013 10:16 PM, slah wrote:
>> Hi all,
>> I'm new to qx mobile, I'm trying to display a google map on a container
>> but
>> was enable to achieve this.
>>
>> I've seen the show case for OSM and I'm used to "play" with google maps in
>> qx desktop but now I'm stuck and can't figure out how to achieve this.
>>
>> Can someone kindly give me some code snippets or a working example on how
>> to
>> do this in qx mobile.
>>
>> Regards
>>
>>
>>
>> --
>> View this message in context:
>> http://qooxdoo.678.n2.nabble.com/qx-Mobile-Any-example-of-how-to-display-a-google-map-on-a-Container-tp7582449.html
>> Sent from the qooxdoo mailing list archive at
>> Nabble.com&lt;http://Nabble.com&gt;.
>>
>> ------------------------------------------------------------------------------
>> Master Java SE, Java EE, Eclipse, Spring, Hibernate, JavaScript, jQuery
>> and much more. Keep your Java skills current with LearnJavaNow -
>> 200+ hours of step-by-step video tutorials by Java experts.
>> SALE $49.99 this month only -- learn more at:
>> http://p.sf.net/sfu/learnmore_122612
>> _______________________________________________
>> qooxdoo-devel mailing list
>
>> qooxdoo-devel@.sourceforge
>
>> &lt;mailto:
>
>> qooxdoo-devel@.sourceforge
>
>> &gt;
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>>
>>
>> ------------------------------------------------------------------------------
>> Master Visual Studio, SharePoint, SQL, ASP.NET&lt;http://ASP.NET&gt;, C#
>> 2012, HTML5, CSS,
>> MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
>> with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
>> MVPs and experts. ON SALE this month only -- learn more at:
>> http://p.sf.net/sfu/learnmore_122712
>> _______________________________________________
>> qooxdoo-devel mailing list
>
>> qooxdoo-devel@.sourceforge
>
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>> ------------------------------------------------------------------------------
>> Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
>> MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
>> with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
>> MVPs and experts. ON SALE this month only -- learn more at:
>> http://p.sf.net/sfu/learnmore_122712
>> _______________________________________________
>> qooxdoo-devel mailing list
>
>> qooxdoo-devel@.sourceforge
>
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
>
>
>
> --
> View this message in context: http://qooxdoo.678.n2.nabble.com/qx-Mobile-Any-example-of-how-to-display-a-google-map-on-a-Container-tp7582449p7582454.html
> Sent from the qooxdoo mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
> MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
> with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
> MVPs and experts. ON SALE this month only -- learn more at:
> http://p.sf.net/sfu/learnmore_122712
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: qx Mobile : Any example of how to display a google map on a Container

czuendorf
I propose to use the Maps.js example as a skeleton for your purpose.

Because it handles the library loading and logic call in the right order.

Greetz Christopher




Am 10.01.2013 um 11:52 schrieb Christopher Z├╝ndorf:

> The important thing is to load the GoogleMap library before your page logic is called .
>
> On callback of library loading you can call something like "createMap".
>
> Another important thing is the API key you have to request from google. Without it, i would not expect, that anything could be loaded.
>
> Greetz Christopher
>
>
> Am 10.01.2013 um 11:43 schrieb slah:
>
>> Hello,
>> thanks for the reply, I think these examples are very important to ease the
>> use of the framework and make it more popular.
>> I've seen the Maps.js in details, well written and good example.
>>
>> I've tried to mimicate but was enable to see my map :), here's an example
>> http://tinyurl.com/alwgwdn
>> You'll notice that the google map api was never loaded.
>>
>> Regards
>>
>>
>> czuendorf wrote
>>> The maps example in our mobile showcase is a very good starting point for
>>> what you want to do.
>>>
>>> https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js
>>>
>>> The important thing in this example is to override the
>>> "_createScrollContainer" of your NavigationPage.
>>> With this, you replace any scrolling logic of the content.
>>>
>>> As I see, you just have to assign the mapContainer a new id like
>>> "googleMap".
>>>
>>> Then:
>>>
>>> Just have a look at this:
>>> https://developers.google.com/maps/documentation/javascript/tutorial
>>>
>>> Replace the _mapURI with the Google Map URI:
>>>
>>> https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE
>>>
>>> As next step you have to modify the "_loadMapLibrary" method according to
>>> Google Maps API.
>>>
>>> Something like this should work:
>>>
>>>
>>> var mapOptions = {
>>>         center: new google.maps.LatLng(-34.397, 150.644),
>>>         zoom: 8,
>>>         mapTypeId: google.maps.MapTypeId.ROADMAP
>>>       };
>>>       var map = new
>>> google.maps.Map(document.getElementById("googleMap"),
>>>           mapOptions);
>>>
>>> The _createContent method is not needed for your purpose. Also the
>>> Geolocation methods are not important for you.
>>>
>>> One thing I want to mention: We decided to use OpenStreetMap because of
>>> the restrictions Google Maps does have.
>>> There is a maximum limit of API calls for Google Maps if you want to use
>>> it for free. The maximum is about 1000 calls a day, i think so.
>>>
>>> Greetz Christopher
>>>
>>>
>>> Am 10.01.2013 um 08:22 schrieb thron7:
>>>
>>> Provide a mobile Playground example so we can see how what you've tried
>>> so far.
>>>
>>> T.
>>>
>>>
>>> On 01/09/2013 10:16 PM, slah wrote:
>>> Hi all,
>>> I'm new to qx mobile, I'm trying to display a google map on a container
>>> but
>>> was enable to achieve this.
>>>
>>> I've seen the show case for OSM and I'm used to "play" with google maps in
>>> qx desktop but now I'm stuck and can't figure out how to achieve this.
>>>
>>> Can someone kindly give me some code snippets or a working example on how
>>> to
>>> do this in qx mobile.
>>>
>>> Regards
>>>
>>>
>>>
>>> --
>>> View this message in context:
>>> http://qooxdoo.678.n2.nabble.com/qx-Mobile-Any-example-of-how-to-display-a-google-map-on-a-Container-tp7582449.html
>>> Sent from the qooxdoo mailing list archive at
>>> Nabble.com&lt;http://Nabble.com&gt;.
>>>
>>> ------------------------------------------------------------------------------
>>> Master Java SE, Java EE, Eclipse, Spring, Hibernate, JavaScript, jQuery
>>> and much more. Keep your Java skills current with LearnJavaNow -
>>> 200+ hours of step-by-step video tutorials by Java experts.
>>> SALE $49.99 this month only -- learn more at:
>>> http://p.sf.net/sfu/learnmore_122612
>>> _______________________________________________
>>> qooxdoo-devel mailing list
>>
>>> qooxdoo-devel@.sourceforge
>>
>>> &lt;mailto:
>>
>>> qooxdoo-devel@.sourceforge
>>
>>> &gt;
>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>
>>>
>>>
>>>
>>> ------------------------------------------------------------------------------
>>> Master Visual Studio, SharePoint, SQL, ASP.NET&lt;http://ASP.NET&gt;, C#
>>> 2012, HTML5, CSS,
>>> MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
>>> with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
>>> MVPs and experts. ON SALE this month only -- learn more at:
>>> http://p.sf.net/sfu/learnmore_122712
>>> _______________________________________________
>>> qooxdoo-devel mailing list
>>
>>> qooxdoo-devel@.sourceforge
>>
>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>
>>>
>>> ------------------------------------------------------------------------------
>>> Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
>>> MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
>>> with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
>>> MVPs and experts. ON SALE this month only -- learn more at:
>>> http://p.sf.net/sfu/learnmore_122712
>>> _______________________________________________
>>> qooxdoo-devel mailing list
>>
>>> qooxdoo-devel@.sourceforge
>>
>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>>
>>
>>
>> --
>> View this message in context: http://qooxdoo.678.n2.nabble.com/qx-Mobile-Any-example-of-how-to-display-a-google-map-on-a-Container-tp7582449p7582454.html
>> Sent from the qooxdoo mailing list archive at Nabble.com.
>>
>> ------------------------------------------------------------------------------
>> Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
>> MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
>> with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
>> MVPs and experts. ON SALE this month only -- learn more at:
>> http://p.sf.net/sfu/learnmore_122712
>> _______________________________________________
>> qooxdoo-devel mailing list
>> [hidden email]
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
> ------------------------------------------------------------------------------
> Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
> MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
> with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
> MVPs and experts. ON SALE this month only -- learn more at:
> http://p.sf.net/sfu/learnmore_122712
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel