@extends('front.layouts.main')

@section('content')
<!--  -->
<style>
  /* Set the size of the div element that contains the map */
  #map {
    height: 400px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
  }
</style>

<div>
  <h3>Location of {{$data['name']}}</h3>
  <!--The div element for the map -->
  <div id="map"></div>
  <script>
    // Initialize and add the map
    function initMap() {
      // The location of Uluru
      var uluru = {
        lat: {
          {
            $data['lat']
          }
        },
        lng: {
          {
            $data['lng']
          }
        }
      };
      var contentString = '<h1> {{$data['
      name ']}}</h1><h4>{{$data['
      address ']}}</h4>'
      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });
      // The map, centered at Uluru
      var map = new google.maps.Map(
        document.getElementById('map'), {
          zoom: 14,
          center: uluru
        });
      // The marker, positioned at Uluru
      var marker = new google.maps.Marker({
        position: uluru,
        map: map
      });
      marker.addListener('click', function() {
        infowindow.open(map, marker);
      });
    }
  </script>
  <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5iMVtBkPPn-zXBoDzZkjhooCqU54QYhE&callback=initMap">
  </script>
</div>
@endsection