@extends('calendar')
@section('styles')
    <style>
          /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            height: 50%;

          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
    </head>
@endsection

@section('map')
    <div id="map"></div>
@endsection

@section('scripts')
    <script>

        var map;
        function initMap() {

            map = new google.maps.Map(document.getElementById('map'), { /*
          center: {lat:{{ $dates  }} , lng:{{ $dates  }}  },*/
                zoom: 15
            });

            var marker = new Array();
            @foreach ($dates as $data)

            map.setCenter({lat:{{ $data->lat  }} , lng:{{ $data->lng  }}  });
            marker = new google.maps.Marker({
                map:map,
                position:{lat:{{ $data->lat  }} , lng:{{ $data->lng  }}  }

            });

            @endforeach
        }
    </script>

    <ul>
        <li>

            
        </li>
    </ul>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8gUrKIK6UryDcJOEZD9V3fxpdDk8s4Lo&callback=initMap"
            async defer></script>
@endsection