Google map

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="frmSearchPage.aspx.cs" Inherits="frmSearchPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <style>
.slide {
    display: none;
}
.slide_grid {
    display: none;
}
.link{display:block;}
</style>


<script src="js/jquery.mousewheel.js"></script>
    <script src="js/perfect-scrollbar.js"></script>
    <script src="js/script.js"></script>
    <script type="text/javascript">
        $(document).ready(function ($) {
            $('#scrolly').perfectScrollbar({
                wheelSpeed: 20,
                wheelPropagation: false
            });
        });
    </script>
    
    <link rel="stylesheet" href="css/mapstyle.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
     <script type="text/javascript">
         var map;
         var sed = "";
         var SearchGridD = "";

         $(document).ready(function () {/* google maps -----------------------------------------------------*/
             //   google.maps.event.addDomListener(window, 'load', initialize);
             $('#stuff').hide();


             SearchText();


             var sPageURL = window.location.search.substring(1);
             //   alert(sPageURL);


             var sURLVariables = sPageURL.split('&');
             if (sURLVariables.length > 1) {
                 var lat = sURLVariables[0].split('=');
                 var long = sURLVariables[1].split('=');
                 document.getElementById('lat').value = window.unescape(lat[1]);
                 document.getElementById('long').value = window.unescape(long[1]);
             }
             else {
                 var Search = sURLVariables[0].split('=');

                 var Result = Search[1].split('~');
                 $("#autocomplete").val(window.unescape(Result[0]));
                 $("#ddlType").val(window.unescape(Result[1]));

             }

             //    alert(long[1])
             document.getElementById('MapZoom').value = 11;
             document.getElementById('KiloMeter').value = 105;

          initialize(11, 15, 28.5720379, 77.0708369);
             // initialize(11, 15, document.getElementById('lat').value, document.getElementById('long').value);
             /* end google maps -----------------------------------------------------*/

             $("#CompareNo").click(function () {
                 if (document.getElementById('hdnComapreSchools').value.indexOf(",") != -1) {
                     var url = 'CompareSchools.aspx?SchoolIDS=' + document.getElementById('hdnComapreSchools').value;
                     $(location).attr('href', url);
                 }
                 else
                     alert("Please Select More Than One school For Compare!");
             });
             $("#btnSearchData").click(function () {
                 initialize(11, 15, 28.5720379, 77.0708369);
             });

         });
         function initialize(zooms, KiloMeter, lat, long) {

             var mapOptions = {
                 center: new google.maps.LatLng(lat, long),
                 //zoom: zooms,
                 //mapTypeId: google.maps.MapTypeId.ROADMAP,
                 //disableDefaultUI: true,
                 //panControl: true,
                 //zoomControl: true,
                 //zoomControlOptions: {
                 //    style: google.maps.ZoomControlStyle.SMALL
                 //},
                 //scrollwheel: false,
                 //scaleControl: true



                 zoom: zooms,
                 // panControl: false,
                 zoomControl: true,
                 mapTypeControl: false,
                 streetViewControl: false,

                 mapTypeId: google.maps.MapTypeId.ROADMAP,
                 scrollwheel: false,
                 zoomControlOptions: {
                     style: google.maps.ZoomControlStyle.SMALL
                 },
                 //style: style,
             };


             // var map = new google.maps.Map(document.getElementById('google-container'), map_options);
             map = new google.maps.Map(document.getElementById("google-container"), mapOptions);
             var homeControlDiv = document.createElement('div');
             var homeControl = new HomeControl(homeControlDiv, map);
             homeControlDiv.index = 1;
             map.controls[google.maps.ControlPosition.TOP_LEFT].push(homeControlDiv);
             var infoWindow = new google.maps.InfoWindow({
                 maxWidth: 200
             });

             // GetData(document.getElementById('lat').value, document.getElementById('long').value, KiloMeter, function (markers) {
             // MyLocation(document.getElementById('lat').value, document.getElementById('long').value);
             MyLocation(28.5720379, 77.0708369);

             GetData(map.getCenter().lat(), map.getCenter().lng(), KiloMeter, function (markers) {
                 // alert(document.getElementById('lat').value);
                 // alert("ok4");
                 //$.each(markers, function (i, item) {
                 //    alert("ok");
                 //});

                 // alert(markers.length);
                 //    });
                 //});



                 // alert("ok");
                 sed = "";
                 SearchGridD = "";
                 //  <div class="map-detail">
                 $("#NoResult").html(markers.length);

                 for (var i = 0; i < markers.length; i++) {





                     // alert(markers.length);
                     var data = markers[i]
                     //alert(data.Latitude);
                     var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
                     alert(myLatlng);
                     var marker = new google.maps.Marker({
                         position: myLatlng,
                         icon: 'img/cd-icon-location2.png',
                         map: map,
                         title: data.SchoolName
                     });
                     var a = i + 1;
                     SearchGridD = SearchGridD + SearchGrid(data, a);
                     //  alert(SearchGridD);
                     sed = sed + "  <a href='#'  onclick='showhide(this," + a + ");'  id='box" + a + "_hide'  data-slide-content='div" + a + "'>";
                     sed = sed + "<div class='sch-detail bgactive'>";
                     sed = sed + "     <div class='sch-detail-left flt'> <img src='" + data.image2 + "' alt='' /></div>";
                     sed = sed + "    <div class='sch-detail-right flr'>";
                     sed = sed + "        <h3>" + data.SchoolName + "</h3>";
                     sed = sed + "         <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,</p>";
                     sed = sed + "     </div>";
                     sed = sed + "   </div>";
                     sed = sed + "  </a>";
                     if (a == 1)
                         sed = sed + "  <div class='bxtop1 slide' id='" + a + "'>";
                     else
                         sed = sed + "  <div class='bxtop1 slide margin-top20' id='" + a + "'>";
                     sed = sed + "        <div class='imgbx-area'>";
                     sed = sed + "           <img src='" + data.image2 + "' alt='' />";
                     sed = sed + "           <h3 class='white-text'>" + data.SchoolName + " <br>  <span>ICSC</span></h3>";
                     sed = sed + "          <div class='star-layer2'><img src='images/star.png' alt='' /></div>";
                     sed = sed + "</div>";

                     sed = sed + "     <div class='address'>" + data.Address + "</div>";
                     sed = sed + "     <div class='address phoneicon'>" + data.MobileNo + " | " + data.EmailID + " </div>";
                     sed = sed + "    <div class='address distances'>5 km.</div>";
                     sed = sed + "     <div class='btn_box'>";
                     sed = sed + "       <a href='MicroSite.aspx?SchoolID=" + data.SID + "'' class='white_btn'>View More Details</a>";
                     sed = sed + "      <a href='#'  onclick='ComapreSchools(" + data.SID + ");'  class='white_btn'>Add to Compare</a>";
                     sed = sed + "      <a href='#' class='white_btn quick_contactmargin'>Quick Contact </a>";
                     sed = sed + "  </div>";

                     sed = sed + "</div>";
                     (function (marker, data) {
                         //  alert(data.Image1);
                         // Attaching a click event to the current marker
                         google.maps.event.addListener(marker, "click", function (e) {
                             //   alert(data.Image1);
                             infoWindow.setContent("<img src='" + data.image1 + "' width='190px' height='140px'></br>" + data.SchoolName + "</br>" + data.Address);
                             marker.setIcon('img/active-marker.png');
                             infoWindow.open(map, marker);
                             //  alert(location.lat());
                             //    alert(location.lat());
                             //if (!marker.open) {
                             //    infowindow.open(map, marker);
                             //    marker.open = true;
                             //}
                             //else {
                             //    infowindow.close();
                             //    marker.open = false;
                             //}
                             //google.maps.event.addListener(map, 'click', function () {
                             //    infowindow.close();
                             //    marker.open = false;
                             //});



                         });



                     })(marker, data);

                     // alert("ok4");


                 }


                 //   $("#SearchResult").html(sed);

                 //alert(SearchGridD + "</div");
                 if (parseInt(markers.length) % 4 == 0) {
                     SearchGridD += "</div>";

                 }
                 $("#SearchGrid").html(SearchGridD + "</div");


                 //alert(sed);
                 document.getElementById("SearchResult").innerHTML = sed + "  <div class='clearfix'></div>";



                 //      $("SearchResult").append(sed);
                 google.maps.event.addListener(map, 'click', function (event) {
                     infoWindow.close();
                 });
                 google.maps.event.addListener(map, 'dragend', function (event) {
                     infoWindow.close();
                     // var loc1 = new GLatLng(document.getElementById('lat').value, document.getElementById('long').value);
                     // var loc2 = new GLatLng(event.latLng.lat(), event.latLng.lng());ss
                     // alert(event.latLng.lat());


                     //  var markerId = getMarkerUniqueId(event.latLng.lat(), event.latLng.lng()); // get marker id by using clicked point's coordinate
                     //  var marker = markers[markerId]; // find marker
                     //  removeMarker(marker, markerId);

                     var bounds = map.getBounds();
                     var ne = bounds.getNorthEast(); // LatLng of the north-east corner
                     var Center = map.getCenter();


                     var Newkilometer = distance(Center.lat(), Center.lng(), ne.lat(), ne.lng(), 'K');
                     //  meters = kilometers * 1000
                     // if (Newkilometer > KiloMeter) {
                     //document.getElementById('lat').value = event.latLng.lat();
                     //  document.getElementById('long').value = event.latLng.lng();
                     //alert(map.zoom)
                     //  document.getElementById('MapZoom').value = map.zoom;
                     initialize(map.zoom, Newkilometer, Center.lat(), Center.lng());
                     //  }




                     //  alert(dist / 1000);

                     // document.getElementById('lat').value = event.latLng.lat();
                     //    document.getElementById('long').value = event.latLng.lng();
                     //  $('.lat').val(event.latLng.lat());
                     //   $('.long').val(event.latLng.lat());
                     // alert(event.latLng.lat());
                 });
                 google.maps.event.addListener(map, 'zoom_changed', function (event) {
                     infoWindow.close();
                     // var loc1 = new GLatLng(document.getElementById('lat').value, document.getElementById('long').value);
                     // var loc2 = new GLatLng(event.latLng.lat(), event.latLng.lng());
                     // alert(event.latLng.lat());
                     // alert(map.zoom);



                     var bounds = map.getBounds();
                     var ne = bounds.getNorthEast(); // LatLng of the north-east corner
                     //  var sw = bounds.getSouthWest()
                     var Center = map.getCenter();





                     var Newkilometers = distance(Center.lat(), Center.lng(), ne.lat(), ne.lng(), 'K');
                     //alert(kilometers);
                     //  meters = kilometers * 1000

                     //    if (Newkilometers > KiloMeter) {
                     // document.getElementById('lat').value =sw.lat();
                     //  document.getElementById('long').value = sw.lng();
                     // document.getElementById('KiloMeter').value = kilometers;
                     //     //alert(map.zoom)
                     // document.getElementById('MapZoom').value = map.zoom;
                     initialize(map.zoom, Newkilometers, Center.lat(), Center.lng());
                     // }
                 });
             });
         }

         var removeMarker = function (marker, markerId) {
             marker.setMap(null); // set markers setMap to null to remove it from map
             delete markers[markerId]; // delete marker instance from markers object
         };

         function GetData(Lat, Long, KiloMeter, Handle) {
             $.ajax({
                 type: "POST",
                 url: 'Handler/hlrPickASchool.ashx',
                 data: { 'City': $("#autocomplete").val(), 'Type': $("#ddlType").val(), 'Latitude': Lat, 'Longitude': Long, 'KiloMeter': KiloMeter, 'Mode': 'GetDataSchool' },
                 dataType: "json",
                 success: function (data) {
                     //  alert(data);
                     Handle(data);

                 },
                 //error: function (result) {
                 //    //  alert(result);
                 //}
             });
         }



         function HomeControl(controlDiv, map) {

             // Set CSS styles for the DIV containing the control
             // Setting padding to 5 px will offset the control
             // from the edge of the map
             controlDiv.style.padding = '5px';

             // Set CSS for the control border
             var controlUI = document.createElement('div');
             controlUI.style.backgroundColor = 'white';
             controlUI.style.borderStyle = 'solid';
             controlUI.style.borderWidth = '1px';
             controlUI.style.cursor = 'pointer';
             controlUI.style.textAlign = 'center';
             controlUI.title = 'Click to Searh the map to Home';
             controlDiv.appendChild(controlUI);

             // Set CSS for the control interior
             var controlText = document.createElement('div');
             controlText.style.fontFamily = 'Arial,sans-serif';
             controlText.style.fontSize = '12px';
             controlText.style.paddingLeft = '1px';
             controlText.style.paddingRight = '1px';
             controlText.innerHTML = '<b>Home</b>';
             controlUI.appendChild(controlText);

             // Setup the click event listeners: simply set the map to
             // Chicago
             google.maps.event.addDomListener(controlUI, 'click', function () {


                 var bounds = map.getBounds();
                 // var latlog = map.getCente(); // LatLng of the north-east corner
                 var latlog = bounds.getSouthWest()






                 //  var Newkilometers = distance(document.getElementById('lat').value, document.getElementById('long').value, latlog.lat(), latlog.lng(), 'K');
                 //alert(kilometers);
                 //  meters = kilometers * 1000

                 //  if (kilometers > 25) {
                 // document.getElementById('lat').value =sw.lat();
                 //  document.getElementById('long').value = sw.lng();
                 //document.getElementById('KiloMeter').value = kilometers;1
                 //     //alert(map.zoom)
                 //document.getElementById('MapZoom').value = map.zoom;
                 initialize(11, 15, document.getElementById('lat').value, document.getElementById('long').value);
                 //   }

                 // map.setCenter(chicago)
             });

         }

         function MyLocation(lat, lon) {
             var myLatlng = new google.maps.LatLng(lat, lon);
             var marker = new google.maps.Marker({
                 position: myLatlng,
                 icon: 'img/cd-icon-location.png',
                 map: map,
                 title: ""
             });
         }


         function distance(lat1, lon1, lat2, lon2, unit) {
             // alert(lat1);
             var radlat1 = Math.PI * lat1 / 180
             var radlat2 = Math.PI * lat2 / 180
             var radlon1 = Math.PI * lon1 / 180
             var radlon2 = Math.PI * lon2 / 180
             var theta = lon1 - lon2
             var radtheta = Math.PI * theta / 180
             var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
             dist = Math.acos(dist)
             dist = dist * 180 / Math.PI
             dist = dist * 60 * 1.1515
             // alert(dist);
             if (unit == "K") { dist = dist * 1.609344 }
             if (unit == "N") { dist = dist * 0.8684 }
             return dist
         }

         function ShowDiv() {
             // alert("ok");
             document.getElementById("Bigimg").src = img;
             document.getElementById("BigTxt").value = text;
             $("#stuff").show();
         }
         function HideDiv() {
             $('#stuff').hide();
         }


         function showhide(Shows, Hides) {
             var justp = document.getElementById("justPrevDiv").value;
             $("#" + justp).hide();
             $("#box" + justp + "_hide").show();
             $(Shows).hide();
             $("#" + Hides).slideDown("slow");
             //  $("#"+Hides).fadeIn('slow');
             document.getElementById('justPrevDiv').value = Hides;
         }
         function showhidegrid(Shows, Hides) {
             //alert(Hides);
             var justp = document.getElementById("justPrevDivGrid").value;
             document.getElementById('justPrevDivGrid').value = Hides;
             $(Shows).hide();
             $("#box1" + Hides + "show").slideDown("fast");
             $("#box1" + Hides + "show").fadeIn('fast');
             $("#box1" + justp + "show").hide();
             $("#box1" + justp + "_hide").show();

         }
         function ComapreSchools(SID) {
             var s = document.getElementById("hdnComapreSchools").value;
             var a = s.split(',');
             // alert(SID);
             if (s.indexOf(SID) == -1 && a.length < 4) {
                 if (document.getElementById("hdnComapreSchools").value != "")
                     document.getElementById("hdnComapreSchools").value = document.getElementById("hdnComapreSchools").value + "," + SID;
                 else
                     document.getElementById("hdnComapreSchools").value = SID;
                 s = document.getElementById("hdnComapreSchools").value;
                 a = s.split(',');
                 $("#CompareNo").html("Compare Now<br>" + a.length);
             }
         }
         function SearchGrid(data, Num) {
             var HtmlData = "";
             // var s = Num - 1;
             //alert(s);
             if (parseInt(parseInt(Num) - 1) % 4 == 0) {
                 // alert(parseInt(Num));
                 HtmlData = HtmlData + "<div   class='row margin-top25'>";
             }
             //  var a = "s" + Num;
             HtmlData = HtmlData + "<div class='col-sm-3 col-md-3'>";
             HtmlData = HtmlData + "<div class='grid4-bxtop1 slide_grid'   id='box1" + Num + "show'>";
             HtmlData = HtmlData + "<div class='grid4-area'>";
             HtmlData = HtmlData + "<img src='" + data.image1 + "' alt=''>";
             HtmlData = HtmlData + "<h3 class='white-text'>" + data.SchoolName + " <br>  <span>ICSC</span></h3>";
             HtmlData = HtmlData + "<div class='star-layer2'><img src='images/star.png' alt=''/></div>";
             HtmlData = HtmlData + "</div>";
             HtmlData = HtmlData + "<div class='address'>" + data.Address + "</div>";
             HtmlData = HtmlData + "<div class='address phoneicon'>" + data.MobileNo + " | " + data.EmailID + "</div>";
             HtmlData = HtmlData + "<div class='address distances'>5 km.</div>";
             HtmlData = HtmlData + "<div class='btn_box'>";
             HtmlData = HtmlData + "       <a href='MicroSite.aspx?SchoolID=" + data.SID + "'' class='white_btn'>View More Details</a>";
             HtmlData = HtmlData + "      <a href='#'  onclick='ComapreSchools(" + data.SID + ");'  class='white_btn'>Add to Compare</a>";
             HtmlData = HtmlData + "<a href='#' class='white_btn quick_contactmargin'>Quick Contact </a>";
             HtmlData = HtmlData + "</div>";
             HtmlData = HtmlData + "</div>";
             HtmlData = HtmlData + "<a onclick='showhidegrid(this," + Num + ");' id='box1" + Num + "_hide'   data-slide-content='s-" + Num + "'>";
             HtmlData = HtmlData + "<div class='sch-detail bgactive'>";
             HtmlData = HtmlData + " <div class='sch-detail-left flt'><img src='" + data.image1 + "' alt=''></div>";
             HtmlData = HtmlData + " <div class='sch-detail-right flr'>";
             HtmlData = HtmlData + "<h3>" + data.SchoolName + "</h3>";
             HtmlData = HtmlData + "   <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,</p>";
             HtmlData = HtmlData + "   </div>";
             HtmlData = HtmlData + "</div>";
             HtmlData = HtmlData + "</a>";
             HtmlData = HtmlData + "</div>";
             if (parseInt(Num) % 4 == 0 && parseInt(Num) != 1) {

                 HtmlData = HtmlData + "</div>";

                 //  alert(Num);
             }
             return HtmlData;

         }


         function SearchText() {
             $("#autocomplete").autocomplete({

                 source: function (request, response) {
                     $.ajax({
                         type: "POST",
                         contentType: "application/json; charset=utf-8",
                         url: "AutoComplete.asmx/GetData",
                         data: "{'Data':'" + document.getElementById('autocomplete').value + "'}",
                         dataType: "json",
                         success: function (data) {

                             response(data.d);

                         },
                         error: function (result) {
                             //  alert(result);
                         }
                     });
                 }
             });
         }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     <input type="hidden" id="lat" />
      <input type="hidden" id="hdnComapreSchools" />
        <input type="hidden" id="justPrevDiv" />
     <input type="hidden" id="justPrevDivGrid" />
     <input type="hidden" id="long" />
        <input type="hidden" id="MapZoom" />
        <input type="hidden" id="KiloMeter" />
    <div class="container-fluid padd-none">
    <div class="inner-search">
      <div class="container">
        <div class="inner-searchlft flt">
        <form>
          <input type="text" id="autocomplete" value="" placeholder="Find a School" class="inputstyle002 wdth-1 srch-icon flt" />
          <select  id="ddlType" name="" class="inputstyle002 wdth-2 typeof-icon flt">
         <option value="0">Type of School</option>
                <option value="1">Play Schools</option>
                <option value="2">Primary/Secondary Schools</option>
                <option value="3">Government Schools</option>

                <option value="4">International Schools</option>
          </select>
          <select name="" class="inputstyle002 wdth-2 location-icon flt"><option value="">Within</option>

               <option value="1">0 KM to 2 KM</option>
                 <option value="2">0 KM to 4 KM</option>
                 <option value="3">0 KM to 6 KM</option>
                 <option value="4">UpTo 10 KM</option>
          </select>
          <select name="" class="inputstyle002 wdth-2 pickup-icon flt"><option value="">Pick Up Point</option></select>
          <input type="button" name="" id="btnSearchData" value="" class="search-btn2 flt" />
          </form>
        </div>
        <div class="cart_add"><h3 class="text-center"><a id="CompareNo">Compare Now<br>
 0</a></h3></div>
         <div class="inner-searchrgt">
         <!--<ul>
           <li><a href="#"></a></li>
           <li><a href="#"></a></li>
         </ul>-->
             <a href="#"><img src="images/map-marker.png" width="49" height="37" alt="" class="flt marker" /></a>
             <a href="#"><img src="images/map-menubg.png" width="47" height="37" alt="" class="flt grid" /></a>
         </div>
      </div>
     
    </div>
</div>
<div class="spacer"></div>
<div id="SearchGrid" class="container-fluid grid-show">

</div>

<div class="container-fluid padd-none marker-show">
  <div class="mapleft flt">
       <section id="cd-google-map">
        <div id="google-container"></div>
        <div id="cd-zoom-in"></div>
        <div id="cd-zoom-out"></div>
        <!--<address>86-90 Paul Street, London, EC2A 4NE</address> -->
    </section>
  </div>
  <div class="mapright flr">
   <div class="map-detail">
      <div class="result">
            <div class="result-left flt">
            <img src="images/result-icon.jpg" alt="" />
            <span><b id="NoResult">08</b> Results</span>
            </div>
            <div class="result-right flr">
            <img src="images/5star.jpg" alt="" />
            <span><b>0</b> Shortlist</span>
            </div>
         </div>
   </div>
  <!--scroller start-->
    <div id="scrolly">
    <div id="SearchResult" class="map-detail">

        
    </div>
    </div>
  <!--scroller end-->
  <div class="map-detail">
     <div align="center" class="padd-top20">
             <a href="#"><img src="images/left-arrow.jpg" width="14" height="22" style="margin-right:15px;" /></a>
             <a href="#"><img src="images/right-arrow.jpg" width="14" height="22"/></a>
         </div>
  </div>
 
  </div>
</div>
  
    <script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
    <script>
        $('.carousel').carousel({
            interval: 5000 //changes the speed
        })


    </script>

</asp:Content>