@extends('frontend.layouts.app')
@section('content')

<div class="row" style="margin-left:10px">
    <p style="font-size:16px;">Location Map</p>
	<div class="col-sm-12" style=" right: 17px; ">
		<div id="map" style="width:100%;height:684px;"></div>
	</div>
</div>
@endsection
@push('script')
<script>
	function initMap() {
        var locationRio = {lat: 22.426744, lng: 91.766298};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: locationRio,
          gestureHandling: 'cooperative'
        });
        var marker = new google.maps.Marker({
          position: locationRio,
          map: map,
          title: 'Bhatiary Golf & Country Club'
        });
      }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALlpMWL4aYzdFqfMMpMG_t2xHzt35rXdM&callback=initMap"> </script>
@endpush