Issues regarding Kendo UI, Google Maps and data-role="scroller"

9 posts, 0 answers
  1. Joseph
    Joseph avatar
    2 posts
    Member since:
    Aug 2013

    Posted 04 Aug 2013 Link to this post

    Hello there, I have been using Icenium recently and am very impressed with the product.
    However, I have stumbled upon a little problem regarding Google Maps and Scrolling

    While testing with the KendoUI-based App, I had added in a Google Maps in the tabstrip-home view and added in the data-role="scroller" for the map's <div> element.
    I then tried navigating in the map itself and I found that the entire page scrolls together with the map on up-down scrolling.
    I have tried to replace the map with text and found that the scroller works then.

    I have searched around online and also found out that there is a data-stretch="true", but having this placed in the view disables scrolling entirely, as there might be text I want to be shown below the map itself this is not a perfect solution.
    Below is my code for the map <div>, it's nothing special, just added into a newly created KendoUI project

    <div data-role="view" id="tabstrip-home" data-show="showMap" data-title="Hello World!">
        <h1>Welcome!</h1>
        <div id="map" data-role="scroller" style="height: 300px;"></div>
        <p>
            Icenium&trade; enables you to build cross-platform device applications regardless of your 
            development platform by combining the convenience of a local development toolset with the 
             power and flexibility of the cloud.
       </p>
    </div>

    And below is the function added into the hello-world.js

    function showMap(){
         var latlng = new google.maps.LatLng(
            1.3067, 
            103.8355
        );
        var mapOptions = {
            sensor:false,
            center: latlng,
            panControl: false,
            zoomControl: true,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeContol: true,                 
        };
        var map = new google.maps.Map(
            document.getElementById("map"),
            mapOptions
        );
        google.maps.event.trigger(map, 'resize');
    }

    Is there anything that can be done to achieve this?
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 08 Aug 2013 Link to this post

    Hello Joseph,

    Setting 'data-stretch=true' would disable the view scrolling and this way the map could occupy the whole screen, be zoomable etc. and this behavior is by design. However this means that there would be no scroll in that view whatsoever. In other words, in order to have scrolling, you should place the other elements in a separate view without data-stretch.

    Regards,
    Steve
    Telerik

    Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Joseph
    Joseph avatar
    2 posts
    Member since:
    Aug 2013

    Posted 11 Aug 2013 Link to this post

    Thanks for the response Steve!

    So I have to set my map on a view with data-stretch = "true" and my contents in another separate view?
    If that's the case, are you saying that it is possible to show 2 different views in a screen?

    If so, how may I achieve this?
  4. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 14 Aug 2013 Link to this post

    Hi Joseph,

    In order for the google maps to function correctly, the scroller of the view should be disabled as it conflicts with the google maps scroller. That is why the google map in our Kendo UI template is placed in a separate view. In short, you can't have a scrollable view and scrollable google maps in the same view. Each view is shown in separate tab.

    Regards,
    Steve
    Telerik

    Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  5. RaoTanVeeR
    RaoTanVeeR avatar
    1 posts
    Member since:
    Nov 2013

    Posted 20 Nov 2013 Link to this post

    Hi...
    Here  i am facing alot of problem to display the map in html page but i am not getting display the map in my App. single page is displaying map when i am using tha code in my app that is not working not showing map. Can any body help me.

    Thanks
  6. Abdul Hannan
    Abdul Hannan avatar
    5 posts
    Member since:
    Jun 2013

    Posted 16 Jan 2014 Link to this post

    Hello,

    I set data-use-native-scrolling="true"  on my 'view'. In this way you can have multiple divs in your view (including one for map) and map works fine. Tested on Android 4.0 + and iOS 6+
  7. GtAntoine
    GtAntoine avatar
    2 posts
    Member since:
    Sep 2014

    Posted 03 Nov 2014 in reply to Abdul Hannan Link to this post

    Abdul Hannan said:
    I set data-use-native-scrolling="true"  on my 'view'. In this way you can have multiple divs in your view (including one for map) and map works fine. Tested on Android 4.0 + and iOS 6+

    Still works ! Thank you very much.
  8. Pratik
    Pratik avatar
    1 posts
    Member since:
    May 2015

    Posted 07 Jul 2015 in reply to Joseph Link to this post

    can you please give me complete sample code for showing points on google map as i have used following code but i am getting error  "google is not defined"  my code is

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <div data-role="view" id="tabstrip-home" data-show="showMap" data-title="Maps">
        <div id="map" data-role="scroller" style="height: 500px;"></div>
    </div>

    <script>
        function showMap() {
            alert('hi');
            var latlng = new google.maps.LatLng(
                1.3067,
                103.8355
                );
            var mapOptions = {
                sensor:false,
                center: latlng,
                panControl: false,
                zoomControl: true,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
                mapTypeContol: true,                 
            };
            var map = new google.maps.Map(
                document.getElementById("map"),
                mapOptions
                );
            google.maps.event.trigger(map, 'resize');
        }
    </script>

     

    please give me solution as soon as possible.

     
  9. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 10 Jul 2015 Link to this post

    Hello Pratik,

    You can follow the jitterz Coffee House example available here. Its Stores view features a Google map with points on it:
    Jitterz Coffee House App

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top