place variables in the Coordinates in OpenLayers Map marker

	var latitud = <?php echo $lati;?>;;
		var longitud = <?php echo $longi;?>;				
		var coord= '<?php echo $coord;?>';	
		var coord_arr=coord.split('*');
		var iconFeature = new Array(coord_arr.length);  
		
		for (var i=0;i<coord_arr.length;++i){
			var data=coord_arr[i].split(',');
			var nombre_parada=data[0];
			var longi_parada=data[1];
			var lati_parada=data[2];

			//hasta acà me trae todos los datos perfectamente
			iconFeature[i] = new ol.Feature({
				  'geometry': new ol.geom.Point(ol.proj.transform(
		               //[-64.167101,-31.430581], 'EPSG:4326', 'EPSG:3857')),    
						 [longi_parada,lati_parada], 'EPSG:4326', 'EPSG:3857')),
				  'name': 'algo',
				  'population': 4000,
				  'rainfall': 500
				  
				});
			iconFeature[i].setStyle(iconStyle);	
		
			var vectorSource = new ol.source.Vector({
					  features: [iconFeature[i]],
				        wrapX: false
					});
					
		}
					
		var iconStyle = new ol.style.Style({
				  image : new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
				    anchor: [0.5, 46],
				    anchorXUnits: 'fraction',
				    anchorYUnits: 'pixels',
				    src: 'img/parabus2.png'
				  }))
				});
			
		var vectorLayer = new ol.layer.Vector({
				  source: vectorSource
				});
				
				var rasterLayer = new ol.layer.Tile({
				  source: new ol.source.OSM()
				});
			
		var map = new ol.Map({
		  layers: [rasterLayer, vectorLayer],
		  target: document.getElementById('map'),
		  view: new ol.View({
		    center: ol.proj.transform(
                    [longitud, latitud], 'EPSG:4326', 'EPSG:3857'),       
		    zoom: 3
		  })
		});

		
		var element = document.getElementById('popup');
		
		var popup = new ol.Overlay({
		  element: element,
		  positioning: 'bottom-center',
		  stopEvent: false,
		  offset: [0, -50]
		});
		map.addOverlay(popup);		
		// display popup on click
		map.on('click', function(evt) {
		  var feature = map.forEachFeatureAtPixel(evt.pixel,
		      function(feature) {
		        return feature;
		      });
		  if (feature) {
		    var coordinates = feature.getGeometry().getCoordinates();
		    popup.setPosition(coordinates);
		    $(element).popover({
		      'placement': 'top',
		      'html': true,
		      'content': feature.get('name')
		    });
		    $(element).popover('show');
		  } else {
		    $(element).popover('destroy');
		  }
		});		
		// change mouse cursor when over marker
		map.on('pointermove', function(e) {
		  if (e.dragging) {
		    $(element).popover('destroy');
		    return;
		  }
		  var pixel = map.getEventPixel(e.originalEvent);
		  var hit = map.hasFeatureAtPixel(pixel);
		  map.getTarget().style.cursor = hit ? 'pointer' : '';
		});    

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

</style> 

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
  
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>