<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
	
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
</head>
<body>

<div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), { /*
          center: {lat:{{ $koordinata->lng  }} , lng:{{ $koordinata->lat  }}  },*/
          zoom: 15
        });

        map.setCenter({lat:{{ $koordinata->lat  }} , lng:{{ $koordinata->lng  }}  });
        var marker = new google.maps.Marker({
          map:map,
          position:{lat:{{ $koordinata->lat  }} , lng:{{ $koordinata->lng  }}  }
          
        });
      
      }
    </script>

    <ul>
      


        <li>
        	{{ $koordinata->lat  }} {{ $koordinata->lng  }} 
        </li>


    
    </ul>

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

   
</html>