JSFiddle - React, Tailwind, and code Playground

by maximoff_pn

HTML

<title>Пример</title>
    <script src="//api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>
    <script src="http://yandex.st/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <style>
        html, body, #ymapid {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
<div id="ymapid"></div>
</body>

JavaScript

ymaps.ready(init);

function init() {

	var myMap = new ymaps.Map('ymapid', {
                    center: [56.3241,44.0014],
                    zoom: 10
         }),
					
				
	myCollection = new ymaps.GeoObjectCollection();			
				
	$.ajax({
	url:'http://aps-engineering.ru/wp-content/uploads/YMaps/avto_markers.csv',
			success: function(data){
			var rows = data.split("\n");
			var src_res='';
			for(var i in rows){
			var colls=rows[i].split(";");//или другой символ разделитель
			
			// Устанавливаем координаты и содержимое балуна
			myPlacemark = new ymaps.Placemark([colls[5], colls[4]], {
                    // Свойства 
					iden: colls[0],	
                    balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+colls[1]+'</div>',
                    balloonContentBody: '<div style="font-size:12px;"><strong>Адрес:</strong> '+colls[2]+'<br /><strong>Телефон:</strong> '+colls[3]+'</div>'              
                }, {
                    // Опции
                    preset: 'twirl#carIcon'
                });

             myCollection.add(myPlacemark);
			
			$('#menu').append('<li>'+'<a href="#" onClick="return go_point('+colls[0]+");"+'\">'+colls[1]+'</a></li>');
			}
			myMap.geoObjects.add(myCollection);
			
			myMap.setBounds(myCollection.getBounds());
			}
	
	
	});			

}