Google maps + Kendo UI

7 posts, 0 answers
  1. Robert Everland
    Robert Everland avatar
    6 posts
    Member since:
    May 2010

    Posted 19 Apr 2012 Link to this post

    We are running into an issue with Google Maps and Kendo UI where the pinch to zoom stops working correctly and as you move the map the tiles stop loading. Leaving my same code if I remove Kendo UI everything works correctly. Has anyone ran into this issue? If so do you have any work arounds?
  2. Robert Everland
    Robert Everland avatar
    6 posts
    Member since:
    May 2010

    Posted 19 Apr 2012 Link to this post

    I just loaded the latest internal build and there is still a problem.
  3. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 20 Apr 2012 Link to this post

    Hi Robert,

    I already answered to your support ticket on the same subject.

    Since we are not aware of such limitation it would be best if you could provide a small but runnable project that reproduces the problem, else I could make only assumptions which will not be very productive.
    Please provide such example and we will do our best to suggest an appropriate solution if such is possible. Thank you in advance.

    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Davide
    Davide avatar
    2 posts
    Member since:
    May 2012

    Posted 11 May 2012 Link to this post

    Hi all, Hi Alexander,
    I found the same issue in my first test page with kendo mobile (tested on google nexus android 4.04 and Ipod touch and iphone 4s).
    I hope that this is similar to the Robert's example:
    Click on the link "MAP" to view the issue

    You can see that when you try to zoom the map, something goes wrong and the map "reset" itself.
    It's very important to me that this feature (google maps + kendo mobile) works.

    p.s. Is there a possibility to have a scrollerview photo gallery width 100% and height 100%??

    Thank you very much,
    Davide Tamburini
  5. Michael
    Michael avatar
    14 posts
    Member since:
    Dec 2011

    Posted 21 May 2012 Link to this post

    don't know if you solved this, but from the look of it on my phone (SG2 4.0.4) it looks like you need to do a refresh of the map after you render it. I have the same issue on the web when loading the map on a lightbox or any other place Google never thought it would cause a problem.
  6. Mark
    Mark avatar
    4 posts
    Member since:
    Oct 2012

    Posted 23 Jul 2012 Link to this post

    Not sure if you got this working.  We downloaded the latest code and it appears to still have the same problem.

    This is how we got around this "feature" at bagsup.  

    i've included the HTML and jscript.  It works by overlaying a div on demand that holds the google maps (that is effectively outside the KendoUI environment/styles etc.).

    I've testing this on the Mobile (m) version as well as phonegap==>IOS environment.   I only use the mapView view simply for the back button.  There's plenty of other ways to imp this (eg. you could animate the overlayed div - simulating the Kendo view environment.)  

        <div id="mapView" data-role="view" data-title="Map" style="z-index:50; display:none;">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-align="left" data-role="backbutton" class="nav-button" href="#homeview" data-click="hidemap"><span class="km-text">Back</span></a>
                    <span data-role="view-title">My Map</span>
    //Note: mappos  is a string  lon|lat|zoomlevel
    function showMap(mappos) {
        if ($('#mymapdivOuter').length==0) {
           $('body').append('<div id="mymapdivOuter" style="position:absolute;width:100%; height:100%;" ><div id="mymapdiv" style="width:100%; height:100%;"></div></div>'); 
         if (typeof(mappos)!='undefined' && mappos!='undefined' && mappos!='') {
            var amappos=mappos.split('|');
         var initialLocation = new google.maps.LatLng(amappos[1],amappos[0]);
         var myOptions = {
         zoom: 12,
         center: initialLocation,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
             streetViewControl: false
        var themap = new google.maps.Map(document.getElementById("mymapdiv"), myOptions);
        var sicon = new google.maps.MarkerImage(ssrc,
                                                new google.maps.Size(32, 32),
                                                new google.maps.Point(0, 0),
                                                new google.maps.Point(16, 32));
        var marker = new google.maps.Marker({
                                            map: themap,
                                            draggable: false,
                                            icon: sicon,
                                            animation: google.maps.Animation.DROP,
                                            position: initialLocation
        $("#mymapdivOuter").css({'top':'40px', 'left':'0px', 'z-index':'999'}).show();
        google.maps.event.trigger(themap, 'resize');
    function hidemap(){
  7. Davide
    Davide avatar
    2 posts
    Member since:
    May 2012

    Posted 10 Oct 2012 Link to this post

    Hello Mark,
    I tryed your solution, but I can't make this work.
    Can you explain again?
    Thank you.
Back to Top