@extends('front.layout.app')
@section('content')
    <div class="col-lg-5 text-center">
        <div id="map" style="width: 1550px; height: 700px;" class="location-area about-me-text google-map-right">
        </div>
    </div>
@endsection
@section('css')
 <style></style>  
@endsection
@section('js')
    <!-- Google Maps -->
    {{-- <script src="https://maps.google.com/maps/api/js?key=AIzaSyCjtdxXehCp88pH_w-aQ84QFn-LfRX-3Pg&sensor=false&amp;libraries=places" type="text/javascript"></script> --}}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCthc-S3bNXYCC2J6mun-z1qQ2maA_yV-E&amp;libraries=places"></script>
    <script type="text/javascript">
        var locations = JSON.parse(`@php echo($locationmarkers); @endphp`);
        //console.log(locations1);
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            // center: new google.maps.LatLng(22.3142301,73.17520539999998),
            center: new google.maps.LatLng(locations[0][1],locations[0][2]),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
            });
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
            })(marker, i));
            google.maps.event.addListener(marker, 'click', function(evt) {
                  map.setZoom(20);
            });
            var infowindow = new google.maps.InfoWindow();
            function moveMarker(placeName, latlng) {
                marker.setIcon(image);
                marker.setPosition(latlng);
                infowindow.setContent(placeName);
            }
        }
    </script>

    <!-- Google Address search -->
    {{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjtdxXehCp88pH_w-aQ84QFn-LfRX-3Pg&amp;libraries=places"></script> --}}
    {{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCthc-S3bNXYCC2J6mun-z1qQ2maA_yV-E&amp;libraries=places"></script> --}}
   <script type="text/javascript">
        /*auto google address*/
        var input = document.getElementById('address');
        var options = {
            types: ['geocode']
        //    componentRestrictions: { country: 'uk' } //Turkey only
        };
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            $("#latitude").val(place.geometry.location.lat());
            $("#longitude").val(place.geometry.location.lng());
        });
        /*end google address*/
    </script>

   
@endsection