Kendo UI Map doesn't render anything

Question

I'm trying to get a map to display like this example:

http://demos.telerik.com/kendo-ui/map/geojson

I copy and paste the code and remove any references to resources I don't have, so that its just a simple kendoMap() function. Despite this, nothing renders. I then tried to use this very simple example:

<div id="map" style="width: 600px; height: 400px;"></div>
<script>
$("#map").kendoMap({
    layers: [{
        type: "tile",
        urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
        attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>."
    }]
});
</script>

And I still get a blank page. I have included kendo.all.min.js. Any ideas why this is? Am I missing another required resource? The scripts are included when I take a look at the generated source.

Edit:

Here are the resources I have included:

<link href="scripts/libs/kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="scripts/libs/kendo/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="scripts/libs/kendo/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/portrait.css" id="cssSheet" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css" rel="stylesheet" />


    <script src="cordova.js"></script>
    <script data-main="scripts/main" src="scripts/libs/require.js"></script>
    <script src="scripts/libs/kendo/js/jquery.min.js"></script>

In Require.js, I require

kendo: "libs/kendo/js/kendo.all.min"

Apparnetly kendo.all.min.js includes both widgets and dataviz according to the website

Answer 1

Do you have anywhere in your css files something like that ?

img {
    max-width:100%;
}

I had the same problem and I solved it by removing the max-width.