@push('scripts')
    <script>
        var image = 'http://maps.google.com/mapfiles/kml/pal3/icon49.png';
        var map;
        var allMarkers = { };

        function initMap() {

            let spain = {lat:40.417953, lng: -3.714312};
            map = new google.maps.Map(document.getElementById('map'), {
                center: spain,
                zoom: 19
            });

            let infoWindow = new google.maps.InfoWindow;
            console.log()
            let markers = {!! $markers->toJson() !!};

            // Loading in Markers from the database
            $.each(markers, function (key, marker) {
                let id = marker.id;
                let name = marker.name;
                let addres = marker.addres;
                let lesson = 0;
                if (marker.lesson && marker.lesson.length > 0) {
                    lesson = marker.lesson[0].id;
                }

                let lat = marker.lat;
                let lng = marker.lng;
                let type = marker.type;

                let markerLatlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

                let mark = new google.maps.Marker({
                    position: markerLatlng,
                    map: map,
                    lesson: lesson
                });

                new google.maps.event.trigger(markers, 'click');
                mark.setMap(map);
                });



                // Trigger marker when moving near to it
                new google.maps.event.trigger(markers, 'click');



            // Try HTML5 geolocation.
            if (navigator.geolocation) {
               navigator.geolocation.watchPosition(
                    function (position) {
                        var pos = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };



                        if (allMarkers.hasOwnProperty('mylocation')) {
                            allMarkers['mylocation'].setPosition(pos);
                        } else {
                            let mark = new google.maps.Marker({
                                position: pos,
                                map: map,
                                title: 'mylocation',
                                icon: image,
                                color: 'blue'

                            });

                            allMarkers['mylocation'] = mark;
                        }

                        map.setCenter(pos);
                    }
                );
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn't support geolocation.');
            infoWindow.open(map);
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{env('G_MAPS_API')}}&callback=initMap"
            async defer></script>