I’m trying to repurpose an old map feature from my previous personal site so that I can get it working on my new site. Quite simply, I will have a map search that scans the database and creates map markers as well as sidebar listings for any results.
My issue now is that I want to test this for basic functionality and style changes in a sandbox/jsfiddle but I need to replace the ajax call portion so that the search simply scans a static list (json, most likely) within the code.
In my current fiddle, my main issue lies in the root function on line 353 of the JS portion. The function is called with default params but it maxes an ajax post call and I want to just hit a list of static store listings here for testing.
https://jsfiddle.net/hgpoyvw1/
How would I replace the whole ajax portion with a static list of 2 or 3 stores?
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>