JSFiddle - React, Tailwind, and code Playground

by Dimych

HTML

<title>geoObjects : Импорт & Кластеризация</title>
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&load=package.full&mode=debug" type="text/javascript"></script>

<body>
    <div id="map" style="width: 600px; height: 500px"></div>
</body>

JavaScript

ymaps.ready(init);

function init () {

	var myMap = new ymaps.Map("map", {center: [55.74, 37.61],zoom: 10});

	myMap.controls.add("zoomControl")
	.add("typeSelector")
	.add("mapTools");

	myGeoObjects = [];

    $.getJSON("http://sandbox.api.maps.yandex.net/examples/ru/2.1/object_manager/data.json", function(json){
		if (json.status == 'OK') {
			for (i = 0; i < json.markers.length; i++) {  
			myPlacemark = new ymaps.Placemark([json.markers[i].lon, json.markers[i].lat], {

			balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+json.markers[i].cname+'</div>',
			balloonContentBody: '<strong>Адрес:</strong> '+json.markers[i].address,
			 });            
			myGeoObjects.push(myPlacemark);
			}
			clusterer = new ymaps.Clusterer();
			clusterer.add(myGeoObjects);
			myMap.geoObjects.add(clusterer);
		}
		else
		{
			alert('Произошла ошибка!');
		}
	})

}