New to Kendo UI for jQuery? Download free 30-day trial

Zoom on a Map Area


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


How can I center the map view on a specified area in the Kendo UI for jQuery Map?


To define the area, use a set of markers. You can use any list of locations. Then, you need to build an extent that encompasses all locations and set it on the map as a visible area.

<button id="center">Center on markers</button>
<div id="map"></div>
    var markers = [
    {"latlng":[30.2675,-97.7409], "name": "Zevo Toys"},
    {"latlng": [30.2707,-97.7490],"name": "Foo Bars"},
    {"latlng": [30.2705,-97.7409],"name": "Mainway Toys"},
    {"latlng": [30.2686,-97.7494], "name": "Acme Toys"}];

        layers: [{
            type: "tile",
            urlTemplate: "http://#= subdomain zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"],
            attribution: "© <a href=''>OpenStreetMap contributors</a>."
        }, {
            type: "marker",
            dataSource: {
                data: markers
            locationField: "latlng",
            titleField: "name"

    function centerMap() {
        var map = $("#map").getKendoMap();
        var layer = map.layers[1];
        var markers = layer.items;
        var extent;

        for (var i = 0; i < markers.length; i++) {
            var loc = markers[i].location();

            if (!extent) {
                extent = new, loc);
            } else {



See Also

In this article