@extends('layouts.app')
@section('map_js')
<script src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyAAOcn3r6DVavhuoPatQvNGg5kUuV1zAFo"></script>
@endsection
@section('content')
<div class="col-12">
    <div id = "sample" style = "width:100%; height:400px;"></div>
</div>

@endsection
@section('js')
<script>
    var lat = "{{ $student->lat }}";
    var long = "{{ $student->long }}";
    function loadMap() {

       var mapOptions = {
          center:new google.maps.LatLng(lat, long),
          zoom:7
       }

       var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

       var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, long),
          map: map,
          animation:google.maps.Animation.Drop
       });
    }
    $(function(){
        loadMap()
    })
 </script>
@endsection