jQuery(document).ready(function (){
// call the map function with default params
var defLat = 40.778259;
var defLng = -75.417931;
var defdis = 250;
var defdis1 = 999999999;
// reinitMap(defLat, defLng, defdis);
var directionsDisplay,
directionsService,
map; var markers = [];
jQuery('#rev_pro').on('change',function(){
var mfil1 = jQuery(this).val();
var mfil2 = jQuery('#prac_type').val();
var ss = jQuery('#ss').val().length>=3 ? jQuery('#ss').val() : '';
if(mfil1 != ''){
reinitMap(defLat, defLng, defdis1, mfil1, mfil2, ss);
}
})
jQuery('#prac_type').on('change',function(){
var mfil1 = jQuery(this).val();
var mfil2 = jQuery('#rev_pro').val();
var ss = jQuery('#ss').val().length>=3 ? jQuery('#ss').val() : '';
if(mfil1 != ''){
reinitMap(defLat, defLng, defdis1, mfil2, mfil1, ss);
}
})
jQuery('#mapSR').on('submit',function(e){
e.preventDefault();
var mfil1 = jQuery('#rev_pro').val();
var mfil2 = jQuery('#prac_type').val();
var ss = jQuery('#ss').val();
if(ss.length>=3){
reinitMap(defLat, defLng, defdis1, mfil1, mfil2, ss);
map.setZoom(2);
}else{
// code here
}
return false;
})
jQuery('#reset').click(function(){
jQuery('#ss,#prac_type,#rev_pro').val('');
reinitMap(defLat, defLng, defdis);
})
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var centerM = new google.maps.LatLng(defLat, defLng);
var mapOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP, center: centerM, gestureHandling: 'greedy',
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.business",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionsDisplay.setMap(map);
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true
});
var minit = 0;
map.addListener('idle', function() {
var newlat = map.getBounds().getCenter().lat().toFixed(6);
var newlng = map.getBounds().getCenter().lng().toFixed(6);
var newDis = (Math.pow(2,10-map.getZoom())*100);
console.log('zoom is: '+map.getZoom());
console.log('new dis: '+newDis);
var mfil1 = jQuery('#rev_pro').val();
var mfil2 = jQuery('#prac_type').val();
var ss = jQuery('#ss').val();
if(ss.length>=3){ ss = ss; }else{ ss = ''; }
setTimeout(function(){
if(minit==0){
reinitMap(defLat,defLng,defdis,mfil1,mfil2,'calif');
}else{
reinitMap(newlat,newlng,newDis,mfil1,mfil2,ss);
} minit = minit+1;
},3000);
});
function reloadMarkers() {
for (var i=0; i<markers.length; i++) {
markers[i].setMap(null);
} markers = [];
}
function setMarkers(pinz,centerLat,centerLng){
for(var i = 0; i < pinz.length; i++){
var myLatLng = new google.maps.LatLng(pinz[i]['lat'], pinz[i]['lon']);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
// animation: google.maps.Animation.DROP,
title: pinz[i]['ttle']
});
markers.push(marker);
var mtle = pinz[i]['ttle'];
content = mtle+'<a class="btn btn-marker" target="_blank" href="'+pinz[i]["link"]+'"><p>View Listing</p></a>';
var infw = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'spider_click',( function ( marker,content,infw ){
return function() {
infw.close();
infw.setContent(content);
infw.open(map,marker);
};
})(marker,content,infw));
oms.addMarker(marker);
}
}
function reinitMap(newlat,newlng,distance,mfil1='',mfil2='',ss=''){
jQuery('#maplist-area .map-message').show();
jQuery.ajax({
type: 'POST',
url: '<?php echo home_url(); ?>/wp-admin/admin-ajax.php',
data: {
mlat : newlat,
mlng : newlng,
dist : distance,
rev_pro: mfil1,
prac_type: mfil2,
search: ss,
action: 'sgtGetListings'
},
error: function(){
var mhtml ='';
mhtml += '<div id="noresultsList">'+
'<div id="noresultimg" data-bind="visible:zoom()<8" style="">'+
'<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/zoomedout.svg">'+
'</div>'+
'<div id="message">'+
'<div class="wrapper">'+
'<span class="title">No results match your search criteria</span>'+
'<span class="title">Try moving the map, searching another location or adjusting your filters to expand your search</span>'+
'</div>'+
'</div>'+
'</div>';
jQuery('#ajax_res').html(mhtml);
},
success: function (response) {
if(response === 'NO-DATA'){
// reloadMarkers();
var mhtml ='';
mhtml += '<div id="noresultsList">'+
'<div id="noresultimg" data-bind="visible:zoom()<8" style="">'+
'<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/zoomedout.svg">'+
'</div>'+
'<div id="message">'+
'<div class="wrapper">'+
'<span class="title">No results match your search criteria</span>'+
'<span class="title">Try moving the map, searching another location or adjusting your filters to expand your search</span>'+
'</div>'+
'</div>'+
'</div>';
jQuery('#ajax_res').html(mhtml);
}else{
var result = jQuery.parseJSON(response);
drawListings(result);
reloadMarkers();
setMarkers(result,newlat,newlng);
}
jQuery('#maplist-area .map-message').hide();
},
timeout: 20000 // sets timeout to 20 seconds
});
}
function drawListings(result){
var mhtml = '';
for (var i = 0; i < result.length; i++) {
var mcls = 'forest-col';
if(i%2==0){ mhtml += '<div class="mini-col">'; mcls = ''; }
mhtml += '<div class="mini-home-col '+mcls+'">'+
'<img src="'+result[i]["imgs"]+'" class="forest-img">'+
'<div class="mini-feature"><h6 class="feature-head practice-head">'+
'<a href="'+result[i]["link"]+'">'+result[i]["ttle"]+'</a></h6>'+
// '<span class="location-text">Location:Alabama</span>'+
'<span class="location-text date-text">Date: '+result[i]["date"]+'</span>'+
'<div class="location-text">Amount: $'+(result[i]["amnt"]).toFixed(2)+'</div>'+
'<p class="feature-text low-text">'+result[i]["desc"]+'</p></div></div>';
if(i%2!=0){ mhtml += '<br></div>'; }
}
jQuery('#ajax_res').html(mhtml);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="aprimary" class="large-12 columns content-area">
<main id="main" class="site-main" role="main">
<article class="page type-page status-publish hentry">
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content row">
<?php echo do_shortcode('[do_widget id=featured_ads_widget-8]'); ?>
<br><br><br>
<div class="row" id="main-cont">
<div class="large-6 columns" id="listing-ress">
<form class="mini-form">
</form><br>
<div class="home-div">
<div class="home-col" id="ajax_res">
<h4>Loading...</h4>
</div>
</div>
</div>
<div class="large-6 columns" id="maplist-area">
<form id="mapSR" class="home-form" method="post">
<input type="text" id="ss" name="search" placeholder="Type at-least 3 characters">
<button type="submit" id="search" style="font-size:14px;padding-left:7px 20px">Search</button>
</form><br>
<div id="map" style="height:720px;width:100%;"></div>
<div id="loadingtext" class="map-message">
<div class="message-content">
<div class="wrapper">
<div class="title">Loading...</div>
</div>
</div>
</div>
<br><br>
<!-- <button class="btn btn-primary" id="clk">CLICK</button> -->
</div>
</div>
</div>
</article>
</main><!-- #main -->
</div><!-- #primary -->
<script src="https://maps.googleapis.com/maps/api/js?key=test&v=3.exp&callback=initMap"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>
