Google maps + Kendo UI

[Robert Everland]

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?

[Robert Everland]

I just loaded the latest internal build and there is still a problem.

[Alexander Valchev]

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.

Regards,
Alexander Valchev
the Telerik team

[Davide]

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:
http://beta.iper.net/kendo/test3/elencohotel.cfm
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

[Michael]

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.

[Mark]

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.)  

HTML

====

    <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>

            </div>

        </header>

    </div>

 

 

 

 

Javascript

========

//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 ssrc = 'http://cdn.bagsup.com/i/gm/purple2.png';

    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

                                        });

     

    window.location="#mapView";

    }

 

   

    $("#mymapdivOuter").css({'top':'40px', 'left':'0px', 'z-index':'999'}).show();

    google.maps.event.trigger(themap, 'resize');

}

 

 

 

function hidemap(){

$('#mymapdivOuter').hide();

}

[Davide]

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