Set 100% Height to the Map in Mobile Applications

Environment

Product	Progress® Kendo UI® Map for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I set the height of the Kendo UI for jQuery Map to 100% on mobile?

Solution

The following example demonstrates how to use the Map widget in a Kendo UI Mobile View and set the height for the Map to 100%.

    <div data-role="view" data-init="createMap" data-stretch="true">
      <div id="map"></div>
    </div>
    <style>
      .k-map{
        height:100vh;
      }
    </style>
    <script>
      new kendo.mobile.Application();
      function createMap() {
        $("#map").kendoMap({
          center: [51.505, -0.09],
          zoom: 3,
          layers: [{
            type: "bing",
            imagerySet: "aerialWithLabels",
            key: "AqaPuZWytKRUA8Nm5nqvXHWGL8BDCXvK8onCl2PkC581Zp3T_fYAQBiwIphJbRAK"
          }]
        });
      }
    </script>

See Also

• Basic Usage of the Map (Demo)
• Using the API of the Map (Demo)
• JavaScript API Reference of the Map