<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <style>.icono-logo-menu {
        width: 100;
        height: 60;
    }</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <link rel="stylesheet" href="{{ asset('leaflet/leaflet.css') }}"/>
    <script  src="{{ asset('leaflet/leaflet.js') }}"></script>
{{-- 
    <link rel="stylesheet" src="{{ asset('js/app.js') }}" href="/path/to/leaflet.css" />
    <script  src="{{ asset('js/app.js') }}" src="/path/to/leaflet.js"></script> --}}


</head>
<style>
    img.huechange { filter: hue-rotate(-100deg); }
 
        /* CSS para ocultar el control de atribución */
        .leaflet-control-attribution {
            display: none !important;
        }
  

</style>
<body>
    <div id="app">
   

        <div class="container-fluid" >

            <div class="row mt-5 ms-3" >

                <div class="col-4" style="border">
                    <div class="card mi-div-uno ">
                        <div class="card-header">Información</div>
                        <div class="card-body">

                           <div> 
                            <div class="mt-3 mb-3"> 
                                <label  for="">Razón Social</label>
                            </div>
                            <input class="form-control" id="razon_social" type="text">
                            <div class="" id="listaarrow"></div>

                           </div>
                           <div>
                            <div class="mt-3 mb-3"> 
                                <label for="">Provincias</label>
                            </div>
                            <input class="btn btn-success" type="button" value="Curicó" onclick="provincias('curico')">
                            <input class="btn btn-success" type="button" value="Talca" onclick="provincias('talca')">
                            <input class="btn btn-success" type="button" value="Linares" onclick="provincias('linares')">
                            <input class="btn btn-success" type="button" value="Cauquenes" onclick="provincias('cauquenes')">

                           </div>
                           <div>
                            <div class="mt-3 mb-3"> 
                                <label for="">Categorias</label>
                            </div>
                            <div>
                                <a onclick="buscarcartegorias('aceitedeoliva')" style="cursor: pointer;" >
                                    <svg width="46" height="54" viewBox="0 0 46 54" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M23.0247 5.17673C15.3099 5.17673 9.05273 11.3945 9.05273 19.0605C9.05273 31.0151 18.5723 40.0616 21.8974 42.8621C22.5521 43.4109 23.5029 43.4109 24.1577 42.8621C27.4827 40.0673 37.0023 31.0151 37.0023 19.0605C36.9967 11.3945 30.7394 5.17673 23.0247 5.17673ZM23.0247 27.9656C18.077 27.9656 14.0687 23.9827 14.0687 19.0662C14.0687 14.1497 18.077 10.1668 23.0247 10.1668C27.9724 10.1668 31.9806 14.1497 31.9806 19.0662C31.9806 23.9827 27.9724 27.9656 23.0247 27.9656Z" fill="#7D9540"/>
                                        <path d="M32.0603 43.6203C32.0603 45.3685 28.0179 46.7885 23.0247 46.7885C18.0314 46.7885 13.989 45.3685 13.989 43.6203C13.989 42.4548 15.7768 41.4421 18.4414 40.8876C19.5801 42.0418 20.5935 42.9357 21.3166 43.5467C21.7949 43.9484 22.4041 44.1691 23.0304 44.1691C23.6567 44.1691 24.2659 43.9484 24.7441 43.5467C25.4672 42.9357 26.475 42.0418 27.6194 40.8876C30.2726 41.4421 32.0603 42.4548 32.0603 43.6203Z" fill="#7D9540"/>
                                        </svg>

                                        <label for="">Aceites de Oliva</label>
                                </a>
                            </div>
                            <div>
                                <a onclick="buscarcartegorias('deshidratados')" style="cursor: pointer;" >

                                    <svg width="46" height="55" viewBox="0 0 46 55" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M23.0247 5.61593C15.3099 5.61593 9.05273 11.8337 9.05273 19.4997C9.05273 31.4543 18.5723 40.5008 21.8974 43.3013C22.5521 43.8501 23.5029 43.8501 24.1577 43.3013C27.4827 40.5065 37.0023 31.4543 37.0023 19.4997C36.9967 11.8337 30.7394 5.61593 23.0247 5.61593ZM23.0247 28.4048C18.077 28.4048 14.0687 24.4219 14.0687 19.5054C14.0687 14.5889 18.077 10.606 23.0247 10.606C27.9724 10.606 31.9806 14.5889 31.9806 19.5054C31.9806 24.4219 27.9724 28.4048 23.0247 28.4048Z" fill="#D1B045"/>
                                    <path d="M32.0603 44.0595C32.0603 45.8077 28.0179 47.2277 23.0247 47.2277C18.0314 47.2277 13.989 45.8077 13.989 44.0595C13.989 42.894 15.7768 41.8813 18.4414 41.3268C19.5801 42.481 20.5935 43.3749 21.3166 43.9859C21.7949 44.3876 22.4041 44.6083 23.0304 44.6083C23.6567 44.6083 24.2659 44.3876 24.7441 43.9859C25.4672 43.3749 26.475 42.481 27.6194 41.3268C30.2726 41.8813 32.0603 42.894 32.0603 44.0595Z" fill="#D1B045"/>
                                    </svg>
                                    <label for="">Deshidratados</label>
                                </a>
                                </div>
                            <div>
                                <a onclick="buscarcartegorias('congelados')" style="cursor: pointer;" >

                                    <svg width="46" height="55" viewBox="0 0 46 55" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M23.0247 6.05513C15.3099 6.05513 9.05273 12.2729 9.05273 19.9389C9.05273 31.8935 18.5723 40.94 21.8974 43.7405C22.5521 44.2893 23.5029 44.2893 24.1577 43.7405C27.4827 40.9457 37.0023 31.8935 37.0023 19.9389C36.9967 12.2729 30.7394 6.05513 23.0247 6.05513ZM23.0247 28.844C18.077 28.844 14.0687 24.8611 14.0687 19.9446C14.0687 15.0281 18.077 11.0452 23.0247 11.0452C27.9724 11.0452 31.9806 15.0281 31.9806 19.9446C31.9806 24.8611 27.9724 28.844 23.0247 28.844Z" fill="#427DAB"/>
                                    <path d="M32.0603 44.4987C32.0603 46.2469 28.0179 47.6669 23.0247 47.6669C18.0314 47.6669 13.989 46.2469 13.989 44.4987C13.989 43.3332 15.7768 42.3205 18.4414 41.766C19.5801 42.9202 20.5935 43.8141 21.3166 44.4251C21.7949 44.8268 22.4041 45.0475 23.0304 45.0475C23.6567 45.0475 24.2659 44.8268 24.7441 44.4251C25.4672 43.8141 26.475 42.9202 27.6194 41.766C30.2726 42.3205 32.0603 43.3332 32.0603 44.4987Z" fill="#427DAB"/>
                                    </svg>
                                    <label for="">Congelados</label>
                                </a>
                            </div>
                            <div>
                                <a onclick="buscarcartegorias('conservas')" style="cursor: pointer;" >

                                    <svg width="46" height="55" viewBox="0 0 46 55" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M23.0247 5.49434C15.3099 5.49434 9.05273 11.7121 9.05273 19.3781C9.05273 31.3327 18.5723 40.3792 21.8974 43.1798C22.5521 43.7285 23.5029 43.7285 24.1577 43.1798C27.4827 40.3849 37.0023 31.3327 37.0023 19.3781C36.9967 11.7121 30.7394 5.49434 23.0247 5.49434ZM23.0247 28.2832C18.077 28.2832 14.0687 24.3003 14.0687 19.3838C14.0687 14.4673 18.077 10.4844 23.0247 10.4844C27.9724 10.4844 31.9806 14.4673 31.9806 19.3838C31.9806 24.3003 27.9724 28.2832 23.0247 28.2832Z" fill="#773875"/>
                                    <path d="M32.0603 43.9379C32.0603 45.6861 28.0179 47.1062 23.0247 47.1062C18.0314 47.1062 13.989 45.6861 13.989 43.9379C13.989 42.7724 15.7768 41.7597 18.4414 41.2053C19.5801 42.3594 20.5935 43.2533 21.3166 43.8643C21.7949 44.266 22.4041 44.4867 23.0304 44.4867C23.6567 44.4867 24.2659 44.266 24.7441 43.8643C25.4672 43.2533 26.475 42.3594 27.6194 41.2053C30.2726 41.7597 32.0603 42.7724 32.0603 43.9379Z" fill="#773875"/>
                                    </svg>
                                    <label for="">Conservas</label>
                                </a>
                            </div>
                            <div>
                                <a onclick="buscarcartegorias('jugos')" style="cursor: pointer;" >

                                    <svg width="46" height="55" viewBox="0 0 46 55" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M23.0247 5.93353C15.3099 5.93353 9.05273 12.1513 9.05273 19.8173C9.05273 31.7719 18.5723 40.8184 21.8974 43.619C22.5521 44.1677 23.5029 44.1677 24.1577 43.619C27.4827 40.8241 37.0023 31.7719 37.0023 19.8173C36.9967 12.1513 30.7394 5.93353 23.0247 5.93353ZM23.0247 28.7224C18.077 28.7224 14.0687 24.7395 14.0687 19.823C14.0687 14.9065 18.077 10.9236 23.0247 10.9236C27.9724 10.9236 31.9806 14.9065 31.9806 19.823C31.9806 24.7395 27.9724 28.7224 23.0247 28.7224Z" fill="#B95641"/>
                                    <path d="M32.0603 44.3771C32.0603 46.1253 28.0179 47.5454 23.0247 47.5454C18.0314 47.5454 13.989 46.1253 13.989 44.3771C13.989 43.2116 15.7768 42.1989 18.4414 41.6445C19.5801 42.7986 20.5935 43.6925 21.3166 44.3035C21.7949 44.7052 22.4041 44.9259 23.0304 44.9259C23.6567 44.9259 24.2659 44.7052 24.7441 44.3035C25.4672 43.6925 26.475 42.7986 27.6194 41.6445C30.2726 42.1989 32.0603 43.2116 32.0603 44.3771Z" fill="#B95641"/>
                                    </svg>
                                    <label for="">Jugos</label>
                                </a>   
                            </div>
                         



                            <div >
                                <a onclick="buscarcartegorias('otros')" style="cursor: pointer;" >

                                        <svg width="46" height="54" viewBox="0 0 46 54" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M23.0247 5.37274C15.3099 5.37274 9.05273 11.5905 9.05273 19.2565C9.05273 31.2111 18.5723 40.2576 21.8974 43.0582C22.5521 43.607 23.5029 43.607 24.1577 43.0582C27.4827 40.2633 37.0023 31.2111 37.0023 19.2565C36.9967 11.5905 30.7394 5.37274 23.0247 5.37274ZM23.0247 28.1616C18.077 28.1616 14.0687 24.1787 14.0687 19.2622C14.0687 14.3457 18.077 10.3628 23.0247 10.3628C27.9724 10.3628 31.9806 14.3457 31.9806 19.2622C31.9806 24.1787 27.9724 28.1616 23.0247 28.1616Z" fill="#FE6B2D"/>
                                        <path d="M32.0603 43.8163C32.0603 45.5645 28.0179 46.9846 23.0247 46.9846C18.0314 46.9846 13.989 45.5645 13.989 43.8163C13.989 42.6508 15.7768 41.6381 18.4414 41.0837C19.5801 42.2378 20.5935 43.1317 21.3166 43.7427C21.7949 44.1444 22.4041 44.3651 23.0304 44.3651C23.6567 44.3651 24.2659 44.1444 24.7441 43.7427C25.4672 43.1317 26.475 42.2378 27.6194 41.0837C30.2726 41.6381 32.0603 42.6508 32.0603 43.8163Z" fill="#FE6B2D"/>
                                        </svg>
                                        <label for="">Otros</label>
                                </a>          
                            </div>
                             
                         
                           
                        
                           </div>
                        </div>
                      {{--   <div class="card-footer">Footer</div> --}}
                      </div>
                </div>
                
                <div class="col-8">
                    {{-- <div id="map" style="height: 98%" class="responsive mi-div-uno"></div> --}}
                    <div id="map"  class="responsive mi-div-uno"></div>

                </div>
            </div>

        </div>

    </div>
 
</body>


</html>
<style>
    .mi-div-uno {
    width: 90%; /* Ancho del div */
    height: 98%; /* Alto del div */
    border: 3px solid black; /* Borde de 3 píxeles de grosor y color negro */
    border-radius: 10px; /* Bordes redondeados */
}
</style>
<script>
      var map;
        var markers = [];
        var myStyle = {
            "fillColor": "#ff7800", // Color de relleno
            "color": "#000", // Color del borde
            "weight": 2, // Grosor del borde
            "opacity": 0.65 // Opacidad
        };

        activarMapa();

        function buscarcartegorias(categoria){

          
          
            $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },

                        url: "http://35.232.42.155:8400/api/empresacategorias",
                        type: "post",
                        dataType: "json",

                        data: {
                            'categoria': categoria,
                            
                        },

                        //   cache: false,
                        //   contentType: false,
                        //   processData: false,
                        success: function(response) {

                             // Eliminar los marcadores anteriores
                        for (var i = 0; i < markers.length; i++) {
                            map.removeLayer(markers[i]);
                        }

                            // var datos = Object.values(response);

                            response.forEach(function(empresa) {
                            // console.log("coordenadas Empresa: " + empresa.coordenadas);


                            if(empresa.coordenadas == null || empresa.coordenadas == ""){

                             }else{


                                    
                                    var arrayCoordenadas = empresa.coordenadas.split(",");
                                    var lat = arrayCoordenadas[0];
                                    var lng = arrayCoordenadas[1];

                                    var imageUrl = "";
                                    if (categoria === "aceitedeoliva") {
                                        imageUrl = 'http://35.232.42.155:8400/img/market-verde.png'; 
                                        } else if (categoria === "deshidratados") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-amarillo.png'; 
                                        } else if (categoria === "congelados") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-azul.png'; 
                                        }else if (categoria === "conservas") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-morado.png'; 
                                        } else if (categoria === "jugos") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-rojo.png'; 
                                        } else if (categoria === "otros") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-naranja.png'; 
                                        } else{
                                            colorMarcador = 'img/market-naranja.png';

                                        }
                                

                                        crearMArket(imageUrl,lat,lng,empresa);
                                    }      

                                // var customIcon = L.icon({
                                //     iconUrl: imageUrl,
                                //     iconSize: [50, 50], // Tamaño de la imagen (ajústalo según tus necesidades)
                                //     iconAnchor: [16, 32], // Punto de anclaje del icono (ajústalo según tu imagen)
                                //     popupAnchor: [0, -32] // Punto de anclaje del popup (ajústalo según tu imagen)
                                // });

                                // var marker = L.marker([lat, lng], { icon: customIcon }).addTo(map);

                               
                                
                                // marker.bindPopup('Latitud: ' + lat + '<br>Longitud: ' + lng).openPopup();
                                // globalLat = lat;
                                // globalLng = lng;
                                // markers.push(marker);
                            
                           
                            });



                                                    },
                        error: function(xhr, status) {
                            alert('Disculpe, ha ocurrido un problema, intente mas tarde');
                        }
                    })
                    .done(function(res) {
                        //    alert("error");
                    });


        }

    function activarMapa() {

        //verifica si el mapa ya esta inicializado
        var mapElement = document.getElementById('map');



        if (mapElement._leaflet_id) {
            map.remove();
        }



        if (!mapElement._leaflet_id) { 


            map = L.map('map', {
                center: [-35.6594, -71.6595],
                zoom: 8,
                zoomControl: true, // Deshabilita los controles de zoom
                doubleClickZoom: false, // Deshabilita el zoom al hacer doble clic
                scrollWheelZoom: true, // Deshabilita el zoom con la rueda del ratón
                dragging: true, // Deshabilita la capacidad de arrastrar el mapa
                tap: false, // Deshabilita la interacción táctil (si es aplicable)
                boxZoom: false, // Deshabilita el zoom en caja
                keyboard: false, // Deshabilita la navegación mediante teclado

            });





            fetch('http://35.232.42.155:8400/js/mauleGeoson.json')
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    L.geoJson(data, {style: style}).addTo(map);

                    // Crea una capa de GeoJSON con el estilo definido y añádela al mapa
                    // L.geoJSON(data, {
                    //     style: myStyle
                    // }).addTo(map);
                });
                provincias("todos");

        }
}

function style(feature) {
    return {
        fillColor: feature.properties.color,
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}


$(document).ready(function(){

        $('#razon_social').keyup(function(){ 
                var query = $(this).val();
                //  if(query != '')
                //{
                    if(query != ""){

                        
                    var _token = $('input[name="_token"]').val();
                    $.ajax({
                    
                        url:"http://35.232.42.155:8400/api/autocompleterazonsocial",
                        method:"POST",
                        dataType: "json",

                        data:{query:query, _token:_token},
                        success:function(data){
                        // console.log(data);
                        var output="";
                        output += '<ul  class="alert alert-success" style="display:block; list-style:none">';
                                data.forEach(function(empresa) {
                                    
                                    output += '<li class="mayuscula" data-rut="" style="list-style:none;cursor: pointer;">'+ '<a class="add_id" onclick="addMarket('+empresa.id_empresa+')">' + empresa.razon_social + '</a></li><hr>';
                                });
                                output += '</ul>';
                            $('#listaarrow').fadeIn();  
                            $('#listaarrow').html(output);
                        }
                    });

                    }else{
                        $('#listaarrow').fadeOut();

                    }
                    
           });
});
function   addMarket(idempresa){

    
                var output 
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    
                    url:"http://35.232.42.155:8400/api/datosempresa",
                    method:"POST",
                     dataType: "json",

                    data:{idempresa:idempresa, _token:_token},
                    success:function(data){
                        $('#listaarrow').fadeOut();


                        var  categoria;
                        var imageUrl = "";
                           // Eliminar los marcadores anteriores
                           for (var i = 0; i < markers.length; i++) {
                            map.removeLayer(markers[i]);
                        }

                            // var datos = Object.values(response);

                            data.forEach(function(empresa) {
                            // console.log("coordenadas Empresa: " + empresa.coordenadas);

                            if(empresa.coordenadas == null || empresa.coordenadas == ""){

                        }else{
                                    var arrayCoordenadas = empresa.coordenadas.split(",");
                                    var lat = arrayCoordenadas[0];
                                    var lng = arrayCoordenadas[1];

                                        categoria = empresa.nombre_categoria;

                                    
                                        if (categoria === "Aceite de Oliva") {
                                        imageUrl = 'http://35.232.42.155:8400/img/market-verde.png'; 
                                        } else if (categoria === "Deshidratados") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-amarillo.png'; 
                                        } else if (categoria === "Congelados") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-azul.png'; 
                                        }else if (categoria === "Conservas") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-morado.png'; 
                                        } else if (categoria === "Jugos") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-rojo.png'; 
                                        } else if (categoria === "otros") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-naranja.png'; 
                                        } else{
                                            imageUrl = 'http://35.232.42.155:8400/img/market-naranja.png'; 

                                        }
                                
                                        crearMArket(imageUrl,lat,lng,empresa);
                                 }
                              //    var marker = L.marker([lat, lng]).addTo(map);
                            //   var marker = L.marker([lat, lng], { icon: L.divIcon({ className: 'my-div-icon', iconSize: [32, 32], iconAnchor: [16, 32] }), color: colorMarcador }).addTo(map);
                            // Reemplaza con la ruta de tu imagen

                               
                            
                            // Agrega aquí más propiedades que quieras mostrar
                            });
                         }

                });
            
}

function provincias(provincia){
    var output 
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    
                    url:"http://35.232.42.155:8400/api/datosempresaprovincias",
                    method:"POST",
                     dataType: "json",

                    data:{provincia:provincia, _token:_token},
                    success:function(data){
                        $('#listaarrow').fadeOut();


                        var  categoria;
                        var imageUrl = "";
                           // Eliminar los marcadores anteriores
                           for (var i = 0; i < markers.length; i++) {
                            map.removeLayer(markers[i]);
                        }

                            // var datos = Object.values(response);

                            data.forEach(function(empresa) {
                            // console.log("coordenadas Empresa: " + empresa.coordenadas);
                             
                            
                            if(empresa.coordenadas == null || empresa.coordenadas == ""){

                            }else{

                           
                                    var arrayCoordenadas = empresa.coordenadas.split(",");
                                    var lat = arrayCoordenadas[0];
                                    var lng = arrayCoordenadas[1];

                                        categoria = empresa.nombre_categoria;

                                    
                                    if (categoria === "Aceite de Oliva") {
                                        imageUrl = 'http://35.232.42.155:8400/img/market-verde.png'; 
                                        } else if (categoria === "Deshidratados") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-amarillo.png'; 
                                        } else if (categoria === "Congelados") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-azul.png'; 
                                        }else if (categoria === "Conservas") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-morado.png'; 
                                        } else if (categoria === "Jugos") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-rojo.png'; 
                                        } else if (categoria === "otros") {
                                            imageUrl = 'http://35.232.42.155:8400/img/market-naranja.png'; 
                                        } else{
                                            imageUrl = 'http://35.232.42.155:8400/img/market-naranja.png'; 

                                        }
                                
                                        crearMArket(imageUrl,lat,lng,empresa);
                             }                   

                            });
                         }

                });
}


function crearMArket(imageUrl,lat,lng,empresa){

    console.log(empresa.razon_social);

     // Crea un icono personalizado utilizando la imagen
              var customIcon = L.icon({
                                    iconUrl: imageUrl,
                                    iconSize: [50, 50], // Tamaño de la imagen (ajústalo según tus necesidades)
                                    iconAnchor: [16, 32], // Punto de anclaje del icono (ajústalo según tu imagen)
                                    popupAnchor: [0, -32] // Punto de anclaje del popup (ajústalo según tu imagen)
                                });

                                var marker = L.marker([lat, lng], { icon: customIcon }).addTo(map);
                                // map.zoomIn();
                                map.setView([-35.6594, -71.6595], 8);
                 
                                //var marker = L.marker([-35.52978150869078,-71.06781005859376]);
                                // Abre un pop-up en el marcador mostrando las coordenadas
                                
                                // marker.bindPopup('Latitud: ' + lat + '<br>Longitud: ' + lng).openPopup();
                                var content = `
                        <strong>Razón Social:</strong> ${empresa.razon_social}<br>
                        
                        <strong>Encargado:</strong> ${empresa.nombre} ${empresa.apellido}<br>
                        <strong>Cargo:</strong> ${empresa.cargo}<br>
                         <strong>Ciudad:</strong> ${empresa.descripcion}<br>

                      <strong>Teléfono:</strong> ${empresa.telefono}<br>
                         <strong>Email:</strong> ${empresa.correo}
                    `;

                        // Crea el popup con el contenido generado y ábrelo
                        marker.bindPopup(content).openPopup();







                                 marker.bindPopup(content).openPopup();

                                globalLat = lat;
                                globalLng = lng;
                                //Agregar el nuevo marcador al arreglo de marcadores
                                markers.push(marker);

}
</script>