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

[Joseph]

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?

[Steve]

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.

[Joseph]

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?

[Steve]

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.

[RaoTanVeeR]

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

[Abdul Hannan]

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+

[Antoine]

[quote]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+[/quote]
Still works ! Thank you very much.

[Pratik]

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.

 

 

 

[Tsvetina]

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

 

 

[Rohit]

I have the same issue, and below is my code. Now, what do I need to change in code to show the map within same page/view:

 

<div data-role="view" data-title="View" data-layout="main" data-model="app.sampleView" data-show="app.sampleView.onShow" data-after-show="app.sampleView.afterShow" id="sampleViewScreen" class="screen">
    <header data-role="header">
        <div data-role="navbar" class="header-text">
            <span data-bind="text: strings.sampleView.title"></span>
            <a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
        </div>
    </header>
    <div id="map" style="width:100%;height:500px"></div>

</div>

[Rohit]

Note: I tried adding data-stretch="true" in div element of id=map, (and/or) in view, but no luck.

[Tsvetina]

Hi Rohit,

If data-stretch="true" setting of the View does not help display the Map, then the cause of the problem could be different on your side. Check for any JavaScript errors in the Simulator Debug console, while running this view. Also, you can inspect the HTML output of the View to see if the Map canvas is rendered or only the div is there (this would mean that the Map is not initialized).
If the problem persists, consider opening a support ticket and sending us a project where the problem can be reproduced.

Regards,
Tsvetina
Progress Telerik