jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;coordorder=longlat"></script>
<button id="btn">Добавить объекты</button>
<table id="list"></table>
<div id="pager"></div>
<div id="map"></div>

CSS

html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }

JavaScript

var data = {
    "type": "FeatureCollection",
    "features": [
        {"type":"Feature","id":0,"geometry":{"type":"Point","coordinates":[37.69899729687501, 55.77799500291261]},"properties":{"balloonContent":null}}

    ]
};
ymaps.ready(init);

    function init () {
	    myMap = new ymaps.Map('map', {
            center: [37.46828441,55.80198117],
            zoom: 10,
            controls: ["zoomControl", "searchControl"]
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            clusterize: true,
            gridSize: 32
        });

                objectManager.objects.options.set('preset', 'islands#greenStretchyIcon');
                objectManager.clusters.options.set('preset', 'islands#darkgreenClusterIcons');
                myMap.geoObjects.add(objectManager); //Добавляет (вставляет) дочерний геообъект в коллекцию
				objectManager.add(data);
				var geodata = myMap.geoObjects.getBounds();
        //alert(geodata);
           		mySearchControl = myMap.controls.get('searchControl');
                mySearchControl.events.add('resultselect', function (e) { // Listener Start

            var index = e.get('index' );
                mySearchControl.getResult(index).then(function (geoObject) {
                myCircle = new ymaps.Circle([
                geoObject.geometry.getCoordinates(),
                1000
                ],
                {},
                {
                    draggable: false,
                    fillColor: "#AAD4FF77",
                    strokeColor: "#55AAFF",
                    strokeOpacity: 0.8,
                    strokeWidth: 5
                });
                myMap.geoObjects.add(myCircle);
                });
                }); // Listener End
                mySearchControl.options.set({
                    boundedBy: geodata,
                    strictBounds: true
               });


    }