This is a migrated thread and some comments may be shown as answers.

Google maps + Kendo UI

6 Answers 421 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Robert Everland
Top achievements
Rank 1
Robert Everland asked on 19 Apr 2012, 05:40 PM
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?

6 Answers, 1 is accepted

Sort by
0
Robert Everland
Top achievements
Rank 1
answered on 19 Apr 2012, 06:04 PM
I just loaded the latest internal build and there is still a problem.
0
Alexander Valchev
Telerik team
answered on 20 Apr 2012, 04:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Davide
Top achievements
Rank 1
answered on 11 May 2012, 03:57 PM
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
0
Michael
Top achievements
Rank 1
answered on 21 May 2012, 06:13 AM
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.
0
Mark
Top achievements
Rank 1
answered on 23 Jul 2012, 09:05 AM
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 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();
}
0
Davide
Top achievements
Rank 1
answered on 10 Oct 2012, 11:00 AM
Hello Mark,
I tryed your solution, but I can't make this work.
Can you explain again?
Thank you.
Davide
Tags
General Discussions
Asked by
Robert Everland
Top achievements
Rank 1
Answers by
Robert Everland
Top achievements
Rank 1
Alexander Valchev
Telerik team
Davide
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Share this question
or