@extends('layouts.app')
    <link href=" {{ asset('css/map.css') }} " rel="stylesheet">

@section('content')
        
        <div id="map"  ></div>
               {{-- <passport-clients></passport-clients>
							<passport-authorized-clients></passport-authorized-clients>
							<passport-personal-access-tokens></passport-personal-access-tokens> --}}

    <script type="text/javascript">

      function initMap() {

        var prueba = JSON.parse('null');
        var dataChurchs =[];
        for(var items in prueba) {
          dataChurchs.push({'lat' : parseFloat(prueba[items].lat),'lng':parseFloat(prueba[items].lng) })

        }
        console.log(dataChurchs);
        var locations = dataChurchs;
        /*[
            {lat: 9.43632230, lng: -84.12949780},
            {lat: 9.325817, lng: -83.951656},
            {lat: 14.090338, lng: -87.191919},
            {lat: 14.081646, lng: -87.166146},
            {lat: 15.509761, lng: -88.017277},
            {lat: 15.505088, lng: -88.028203},
        ]*/
        var latitud = parseFloat(JSON.parse('null'));
        var logintud = parseFloat(JSON.parse('null'));



        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          center: {lat: latitud, lng: logintud}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = '123456789';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });



        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
          {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }

    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>

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