Hello
I'm trying to display google maps into a KendoUI Mobile view. The map doesn't appear and there is also no error in the console. Do I have to consider something special?
My working code so far:
<!DOCTYPE html><html><head> <title>My App</title> <link href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=YourAppKey"></script></head><script> function initMap() { var location = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('showmap'), { zoom: 4, center: location }); } $(document).ready(function() { app = new kendo.mobile.Application($(document.body), { skin: 'flat', transition: 'slide', initial: "mapview", init: function () { initMap(); } }); });</script><body><!-- View map --><div id="mapview" data-role="view" data-layout="default"> <div>Some text</div> <div id="showmap"></div> // <-- Should display google maps</div></body></html>(Replace "YourAppKey" with your app key of google maps)
My project heavily depends on google maps. So I hope there is a solution to display google maps (in a view).
Regards
5 Answers, 1 is accepted
Rank 1
Iron
I partially found the solution: Google Maps needs a specific height, 100% height does not work (nothing displayed). On the other side known CSS styles that are working in non mobile browsers are ignored, like:
#divaroundmapdiv { position:fixed; left:0; right:0; top:0; bottom:0; margin:auto; min-width: 180px; width: 98%; min-height: 180px; height: 98%;}#mapview { position:absolute; left:20px; right:20px; top:20px; bottom:20px; border: 1px solid black;}
Since I don't know the height of the mobile used I can't (won't) set a fixed height. So I have to find a solution around that.
If Google maps needs specific height to be displayed, it should be enough to set min-height to the div it is displayed in (the div with id="showmap" in the example in your post): dojo. As far as I can see the min-height value is respected on mobile devices as well as on PC, so could you elaborate more on what the issue with the View is?
Regards,
Ivan Danchev
Progress Telerik
Rank 1
Iron
Hi Ivan
Thank your for your thoughts! I've tried to set a min-height initially in percent (%) not in pixels. That all caused the problem. The (wrong) reason why wanted it in % is because of different browser sizes and in mobile browsers considering portrait and landscape mode. So switching to any new sizes the Google maps should resize as well. There are events when the display mode is changing or the browser gets resized. By saying all this I need to react on the new display size in order to resize Google maps. In my case I have a header and footer, in between I want to display Google maps fitting exactly. So I have to adjust its size. I could make it smoothly work using this function I would like to share with others in case of need:
function resizeMap() {var windowHeight = $(window).outerHeight(); // complete height of browser windowvar usedHeight = Math.round( $('#searchmapheader').outerHeight() + $('#searchmapfooter').outerHeight() ); // used height of header and footer (if set)var setHeight = windowHeight - usedHeight; // calculate space left for Google maps (or any other content) $('#searchmap').height(setHeight); // #searchmap is the DIV in which google maps will be displayed}
#searchmapheader and #searchmapfooter are DIVs inside the view (otherwise it won't work nicely).
The event doing the resize looks like this:
// Adjust maps on resizing (also fires on event orientationonchange)window.addEventListener("resize", function() { resizeMap();}, false);That works in PC browsers as well as in mobile browsers.
So everything is fine, no further question here.
I already loved working with KendoUI. Now I realised how you implemented events in KendoUI Mobile widgets. Wow, you just have to come to this idea, just love to work with it (over attributes), right product choice!
Thank you and Regards
Rank 1
Iron
Sorry, slight correction to the event. Use a timeout because the rotation takes it's time:
// Adjust maps on resizing (also fires on orientationonchange)window.addEventListener("resize", function() { setTimeout(function() { resizeMap(); }, 200);}, false);
Thank you for sharing your solution. It would be helpful to other members of the community facing the same scenario.
Regards,
Ivan Danchev
Progress Telerik