<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDgFNMkZRmDv6tkxbKut5eIqaQbcM8zS8&sensor=true&libraries=places"></script>
<style>
    .pop_name{
    	font-size: 16px !important;
    	margin: 0;
    	color:#8F0AA9;
    }    
</style>
<script src="js/markerclusterer.js" ></script>
<script src="js/jquery.placepicker.js"></script>
<script>
      /*$(document).ready(function() {
        // Basic usage
        $(".placepicker").placepicker();
        $('#city').change(function(){		    
		    $('#place').val('');
		    this.form.submit();
		});
      }); // END document.ready*/
      
      var geo;
		function init() {			
				var valLat = <?php echo $latitude;?>;
				var valLong = <?php echo $longitude;?>;
				var myLatLng = {lat: <?php echo $latitude;?>, lng: <?php echo $longitude;?>};						
			//alert(valLong);
			if(valLat!='' && valLong!=''){ /*ok*/ } else {
				valLat = 8.5241391;
				valLong = 76.9366376;
			}			
		    var map_elem = document.getElementById('map-canvas');
		    var map = new google.maps.Map(map_elem, {
		        center: new google.maps.LatLng(valLat, valLong),
		        /*mapTypeControlOptions: {
					style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
					mapTypeIds: ['roadmap', 'terrain']
				}*/		        
		        zoom: 10,
		        minZoom: 6,
		        maxZoom: 25,
		        /*mapTypeId: google.maps.MapTypeId.HYBRID*/
		        mapTypeId: 'roadmap'
		    });
		    setMarkers(map);	
		    
		   	   
	          			
		}
		
		<?php if(isset($userArray) && count($userArray)>0){ $cc = 1;?>
			var beaches = [
		   <?php foreach($userArray as $user){  ?>		   		
				['<?php echo $user['name']; ?>', <?php echo $user['latitude'];?>, <?php echo $user['longitude'];?>, <?php echo $cc; ?>, <?php echo $user['phone'];?>],	      		   	
		   <?php } ?>
		   ];
		   <?php } ?>
		  function sleep(milliSeconds) {
			  var startTime = new Date().getTime();
			  while (new Date().getTime() < startTime + milliSeconds);
			}
	
	var i=0;
		    function setMarkers(map) {	
		      var markers = [];	    	
				
		      for (i = 0; i < beaches.length; i++) {
		          var beach = beaches[i];
		          /*Here we are changing exactly same locations to a bit different in lat-long so that we can see all markers while zoom*/
		          var a = 360.0 / beaches.length; 
		          var newLat = beach[1] + -.00300 * Math.cos((+a*i) / 180 * Math.PI); 
                  var newLng = beach[2] + -.00300 * Math.sin((+a*i) / 180 * Math.PI); 
		          /*-----*/
		          var marker = new google.maps.Marker({
		            //position: {lat: beach[1], lng: beach[2]},		  
		            position: {lat: newLat, lng: newLng},
		            icon: '<?php echo BASE_URL;?>ocontrol/images/map_icon_tech.png',	          
		            map: map,
		            //title: beach[0],
		            //zIndex: beach[3]		          
		          });
		          
		          //alert(beach[1]+'-'+beach[2]);
		          // Create our info window content   
				    var infoWindowContent = '<div class="info_content">' +
				        '<h3 class="pop_name">'+beach[0]+'</h3>' +
				        '<p>Phone: '+beach[4]+'</p>' +
				    '</div>';
				
				  var content = infoWindowContent;
				    // Initialise the inforWindow
				    var infoWindow = new google.maps.InfoWindow({
				        content: infoWindowContent
				    });
				    // Display our info window when the marker is clicked
				    /*google.maps.event.addListener(marker, 'click', function() {
				        infoWindow.open(map, marker);
				    });*/
				   google.maps.event.addListener(marker,'click', (function(marker,content,infoWindow){ 
					    return function() {
					        infoWindow.setContent(content);
					        infoWindow.open(map,marker);
					    };
					})(marker,content,infoWindow));
					//alert(i);
					markers.push(marker);
		        }
		        var markerCluster = new MarkerClusterer(map, markers, {imagePath: '<?php echo(BASE_URL); ?>ocontrol/images/m'});
		      }
		      
		    function addInfoWindow(marker, message) {
	            var infoWindow = new google.maps.InfoWindow({
	                content: message
	            });	
	            //alert('Test');
	            google.maps.event.addListener(marker, 'click', function () {
	                infoWindow.open(map, marker);
	            });
	        }
		         
		google.maps.event.addDomListener(window, 'load', init);   		
		//geocoder = new google.maps.Geocoder();	
		setTimeout(function(){
		  geocoder = new google.maps.Geocoder();	
		}, 200*i);	
		
		
		$.noConflict();
		jQuery( document ).ready(function( $ ) {		
			// Basic usage
			$(".placepicker").placepicker();
			$('#city').change(function(){
				$('#place').val('');
				this.form.submit();
			});
 		}); // END document.ready
</script>
<style>
      .placepicker-map {
        width: 100%;
        height: 500px;
      }
      .another-map-class {
        width: 100%;
        height: 500px;
      }
      .pac-container {
        border-radius: 5px;
      }
      #map-canvas{ height: 500px; }
	  input, select {		  
		  height: 40px;		  
	 }
	 .div_or {
	  color: #777;
	  float: left;
	  font-size: 20px;
	  padding-top: 5px;
	  width: 65px;
	}
	.date_row1 {
	  float: left;
	  margin: 5px;
	  width: 470px;
	}
	.date_row2 {
	  float: left;
	  margin: 5px;
	  width: 405px;
	}
	.search_top1{
		float: left; 
		padding: 5px; 
		width: 500px;
	}	
	.search_top2{
		width:150px;
		float: left;
		margin-right: 10px;
	}
	.button_div{		
	  float: left;
	  height: 90px;
	  padding-top: 26px;
	  text-align: center;
	  vertical-align: middle;
	  width: 100px;
	}
	.card-head{ display:none; }
    .full-col{ padding:0 !important; }
    .card-body{ padding: 0; }
    input, select {
	  height: 32px;
	}
	.map-control {
	  background-color: #222;
	  border-radius: 7px;
	  color: #fff;
	  left: 116px;
	  opacity: 0.6;
	  padding: 5px;
	  position: absolute;
	  top: 0;
	  z-index: 0;
	}
	.hide_label {
	  float: left;
	  font-weight: 400;
	  height: 20px;
	  margin-top: 6px;
	  padding: 3px;
	}
</style>
<div class="page-content-wrapper">
	<div class="page-content full-col">                    
	 <div class="row">
                        <div class="col-md-12">
                            <div class="card card-topline-red">
                            	<form name="searcgForm" id="searchForm" action="" method="post">
	                                <div class="card-head">
	                                    <header>Map View</header>          
	                                    <!--<div class="tools">                                        
			                                    <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
			                                    <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
		                                    </div> -->                                  
	                                </div>
	                                <div style="width:90%;margin-left: auto;margin-right: auto;">
		                                <?php if(isset($error) && $error!='') { ?> 
		                                	<div class="alert alert-danger"><?php echo $error; ?></div>
		                                <?php } else if(isset($success) && $success!=''){ ?>                                		
		                                		<div class="alert alert-success"><?php echo $success; ?></div>
		                                <?php } else if(isset($_REQUEST['success'])){ ?>                                		
		                                		<div class="alert alert-success"><?php echo $_REQUEST['success']; ?></div>
		                                <?php } ?>
		                            </div>
		                            <div style="width:900px;float: left;margin-left: 30px;">
		                                <div style="float:left;">
		                                	<div class="search_top1">
		                                		<!--<div class="form-group">
												    <label for="exampleInputEmail1">Email address</label>
												    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
												    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
												</div>-->
		                                	Search by Location
		                                    	<input type="text" name="place" id="place" class="form-control placepicker" placeholder="Enter location.."  value="<?php if(isset($location)) { echo htmlentities(($location), ENT_QUOTES); } ?>">
		                                    </div>
		                                    <div class="div_or"><b>OR</b></div>
		                                    <div style="float: left; width: 333px;padding: 5px;">
		                                    	Search by City
			                                    <select class="form-control" name="city" id="city">
			                                         <option value="">--Select City--</option>
			                                         <?php if(mysqli_num_rows($citiesRs)>0){
			                                               while($cityRec = mysqli_fetch_array($citiesRs)){?>
			                                                	<option value="<?php echo $cityRec['id']; ?>" <?php if(isset($_POST['city']) && $_POST['city']==$cityRec['id']){ echo 'selected'; } else if(isset($resEdit['city']) && $resEdit['city']==$cityRec['id']){ echo 'selected'; }?> ><?php echo $cityRec['name']; ?></option>
			                                         <?php } } ?>
			                                    </select>	  
			                                 </div>                                  
		                                </div>
		                                <div class="date_row1">                                	
		                                		<div style="float:left;width:130px;">Registration</div>
			                                	<div style="width:150px;float: left;margin-right: 10px;">
			                                    	<div class="input-group date form_date" data-date="<?php if(isset($_POST['reg_from'])){ echo $_POST['reg_from']; } ?>" data-date-format="dd-mm-yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
				                                        <input class="form-control" size="16" placeholder="From" value="<?php if(isset($_POST['reg_from'])){ echo $_POST['reg_from']; } ?>" type="text">
				                                        <span class="input-group-addon"><span class="fa fa-remove"></span></span>
				                                        <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
				                                    </div>
				                                    <input name="reg_from" id="dtp_input2" value="<?php if(isset($_POST['reg_from'])){ echo $_POST['reg_from']; } ?>" type="hidden">
				                                </div>
				                                <div style="width:150px;float: left;margin-right: 10px;">	                                
				                                    <div class="input-group date form_date" data-date="<?php if(isset($_POST['reg_to'])){ echo $_POST['reg_to']; } ?>" data-date-format="dd-mm-yyyy" data-link-field="dtp_input3" data-link-format="yyyy-mm-dd">
				                                        <input class="form-control" size="16" placeholder="To" value="<?php if(isset($_POST['reg_to'])){ echo $_POST['reg_to']; } ?>" type="text">
				                                        <span class="input-group-addon"><span class="fa fa-remove"></span></span>
				                                        <span class="input-group-addon"><span class="fa fa-calendar"></span></span>	                                    
				                                 	</div>
				                                 	<input name="reg_to" id="dtp_input3" value="<?php if(isset($_POST['reg_to'])){ echo $_POST['reg_to']; } ?>" type="hidden">
				                               </div>
				                      </div>
				                      <div class="date_row2">
				                           	<div style="float:left;width:80px;">Task</div>
				                               <div style="width:150px;float: left;margin-right: 10px;">
			                                    	<div class="input-group date form_date" data-date="<?php if(isset($_POST['work_from'])){ echo $_POST['work_from']; } ?>" data-date-format="dd-mm-yyyy" data-link-field="dtp_input4" data-link-format="yyyy-mm-dd">
				                                        <input class="form-control" size="16" placeholder="From" value="<?php if(isset($_POST['work_from'])){ echo $_POST['work_from']; } ?>" type="text">
				                                        <span class="input-group-addon"><span class="fa fa-remove"></span></span>
				                                        <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
				                                    </div>
				                                    <input name="work_from" id="dtp_input4" value="<?php if(isset($_POST['work_from'])){ echo $_POST['work_from']; } ?>" type="hidden">
				                                </div>
				                                <div style="width:150px;float: left;margin-right: 10px;">	                                
				                                    <div class="input-group date form_date" data-date="<?php if(isset($_POST['work_to'])){ echo $_POST['work_to']; } ?>" data-date-format="dd-mm-yyyy" data-link-field="dtp_input5" data-link-format="yyyy-mm-dd">
				                                        <input class="form-control" size="16" placeholder="To" value="<?php if(isset($_POST['work_to'])){ echo $_POST['work_to']; } ?>" type="text">
				                                        <span class="input-group-addon"><span class="fa fa-remove"></span></span>
				                                        <span class="input-group-addon"><span class="fa fa-calendar"></span></span>	                                    
				                                 	</div>
				                                 	<input name="work_to" id="dtp_input5" value="<?php if(isset($_POST['work_to'])){ echo $_POST['work_to']; } ?>" type="hidden">
				                               </div>
				                       </div>
                                       <div style="float: left; width: 250px;padding: 5px;">		                                    	
			                                    <select class="form-control" name="map_type" id="map_type">
			                                         <option value="">--Map Type--</option>
			                                         <option selected="selected" value="service_area" <?php if(isset($_POST['map_type']) && $_POST['map_type']=='service_area'){ echo 'selected'; }?> >Service Area</option>
			                                         <option value="live_location" <?php if(isset($_POST['map_type']) && $_POST['map_type']=='live_location'){ echo 'selected'; }?> >Live Location</option>			                                         
			                                    </select>		                                      
			                           </div>
			                           <div style="float: left; width: 311px;padding: 5px;">
			                           		<select name="category" id="category" >
                                                    	<option value="">--Select Category--</option>
										              <?php if(mysqli_num_rows($categoryRs)>0){
										              	while($categoryRec = mysqli_fetch_array($categoryRs)){
										              	//check if sub cat exist										              	
														$subcatRs = mysqli_query($con, "SELECT id, name FROM tbl_service_categories WHERE status = 'Active' AND parent_id = '".$categoryRec['id']."' ORDER BY name"); ?>
										              	<option <?php if(mysqli_num_rows($subcatRs)>0){ echo 'disabled="disabled"'; } ?> value="<?php echo $categoryRec['id']; ?>" <?php if(isset($_REQUEST['category']) && $_REQUEST['category']==$categoryRec['id']) { echo 'selected="selected"'; } ?> ><?php echo $categoryRec['name']; ?></option>
                                                        <?php if(mysqli_num_rows($subcatRs)>0){
										              	while($subcatRec = mysqli_fetch_array($subcatRs)){ ?>
                                                        	<option value="<?php echo $subcatRec['id']; ?>" <?php if(isset($_REQUEST['category']) && $_REQUEST['category']==$subcatRec['id']) { echo 'selected="selected"'; } ?> ><?php echo '--'.$subcatRec['name']; ?></option>
                                                        <?php } } ?>
										              <?php } } ?>
									  		</select>
			                           </div>
			                           <div style="float: left; width: 330px;padding: 5px;">
		                                    <input type="text" name="keyword" id="keyword" class="form-control" placeholder="Keyword search.."  value="<?php if(isset($keyword)) { echo htmlentities(($keyword), ENT_QUOTES); } ?>">
		                               </div>                          
		                                    
				                  </div>
			                      <div class="button_div">
			                               <div style="width:100px;float: left;margin-right: 10px;">
			                               	<button type="submit" name="search" class="btn btn-info">Search</button>
			                               </div>
			                       </div>                                
                                </form>
                                <div class="card-body ">
                                    
                                    
                                     <div id="map-canvas"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    

</div>
</div>