@extends('frontend/layouts/Pagelayout')
{{-- Page content --}}
@section('content')
<style>
.img-case>span>ul>li>a.btn.btn-primary.btn-lg:hover{
color:#337ab7;
outline:none;
}
.img-case>span>ul>li>a.btn.btn-primary.btn-lg:focus{
outline:none;
}
</style>
<!-- ******************************** Banner Part ******************************** -->
<section class="banner-cnt">
  <div class="container">
    <div class="col-md-12 col-sm-12">
      <div class="cnt-banner">
        <h3 class="animated fadeInDown">CONTACT US</h3>
        <p class="animated fadeIn">Thank you for visiting Us.<br />For additional information concerning our services or for general inquiries please contact us by phone or send us an email and we will get back to you promptly.</p>
         </div>
    </div>
  </div>
</section>
<!-- ******************************** Banner End ******************************** --> 

<!-- Office Locations Start Here -->
<div class="office">
  <div class="container">
    <div class="row">
      <h2>Office Locations</h2>
      <div class="col-md-12 col-sm-12">
      <div class="location">
   <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26230481.346557382!2d-86.90001950184191!3d36.627275920416295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1455356533097" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> --> 
<!--   <iframe id="map-canvas" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
--> 
    <div id="map-canvas" style="width:100%;height:450px;" ></div>
     
<div class="img-case">
     <span>
     <ul>
     <li>Phone:&nbsp;(904) 886-2990</li>
     <li style="margin-left:10px;">Fax:&nbsp;(904) 886-7036</li>
          <li>
     <!-- Modal -->
 <!-- Button trigger modal -->
<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contactUsModal" href="#contactUsModal">
  Email:&nbsp;info@abbaconstruction.com
</a>


     </ul> 
     </span> 
      </div>
      </div>
      </div> 
    </div>
  </div>
</div>
<!-- Office Locations End Here --> 
@endsection
@section('javascript')
 <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7IZt-36CgqSGDFK8pChUdQXFyKIhpMBY&sensor=true" type="text/javascript"></script>
    <script type="text/javascript">

        var map;
        var geocoder;
        var marker;
        var people = new Array();
        var latlng;
        var infowindow;

        $(document).ready(function() {
            ViewCustInGoogleMap();
        });

        function ViewCustInGoogleMap() {

            var mapOptions = {
                center: new google.maps.LatLng(30.167179, -81.52830999999999),   // Coimbatore = (11.0168445, 76.9558321)
                zoom: 6,
				  scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            // Get data from database. It should be like below format or you can alter it.

            var data = '[{ "DisplayText": "317 E. Washington St.,<br> Minneola,FL 34715", "Address": "317 E. Washington St.,Minneola, FL 34715", "LatitudeLongitude": "", "MarkerId": "Customer" },{ "DisplayText": "6963-1 Business Park Blvd. N.,<br> Jacksonville,FL 32256", "Address": "6963-1 Business Park Blvd. N., Jacksonville, FL 32256", "LatitudeLongitude": "30.167179, -81.52830999999999", "MarkerId": "Customer"},{ "DisplayText": "3108 N. Boundary Blvd.,<br> Bldg. 926,Mailbox 187,<br> Tampa,FL 33621", "Address": "3108 N. Boundary Blvd., Bldg. 926, Mailbox 187, Tampa, FL 33621", "LatitudeLongitude": "27.8442106, -82.50234640000001", "MarkerId": "Customer"}]';

            people = JSON.parse(data); 

            for (var i = 0; i < people.length; i++) {
                setMarker(people[i]);
            }

        }

        function setMarker(people) {
            geocoder = new google.maps.Geocoder();
            infowindow = new google.maps.InfoWindow();
            if ((people["LatitudeLongitude"] == null) || (people["LatitudeLongitude"] == 'null') || (people["LatitudeLongitude"] == '')) {
                geocoder.geocode({ 'address': people["Address"] }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                        marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            draggable: false,
                            html: people["DisplayText"],
							icon:"