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

How to display google maps in a view?

5 Answers 571 Views

View

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

Tayger asked on 18 Jun 2018, 08:35 PM

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>

<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

answered on 18 Jun 2018, 10:20 PM

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.

answered on 20 Jun 2018, 01:39 PM

Hello,

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

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 20 Jun 2018, 09:22 PM

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 window

var 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