JSFiddle - React, Tailwind, and code Playground

by atach

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<input type="button" class="btn btn-success" id="getPointsMap" value="Загрузить данные"/>
<div id="map"></div>

CSS

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

JavaScript

ymaps.ready(init);

	function init () {
		myMap = new ymaps.Map('map',			
		{				
			center: [55.76, 37.64],				
			zoom: 10,
			controls: ['zoomControl', 'fullscreenControl']			
		});
	}
	
	function getPoint () {	
		myMap.geoObjects.removeAll(myGeoObjects);		
		var myGeoObjects = new ymaps.GeoObjectCollection();
		
		$.getJSON("http://puximex.finogeev.com.fstest.ru/1/jsonItems.php",	function(json) {		
			for (i = 0; i < json.markers.length; i++) {
				myGeoObjects.add(new ymaps.Placemark([json.markers[i].lat,json.markers[i].lon]));
			}				
		});
		
		myMap.geoObjects.add(myGeoObjects);
		myMap.setBounds(myGeoObjects.getBounds())
	}
		
		
	$('#getPointsMap').click( function () {
		getPoint();
	});