Hi, the code below generates a search results page, based on distance from the original postcode / Zipcode searched.
I need some advise on styling the results into tabular data.
The data is injected to the page with the section var description =
At the moment, the data just ascends down the page but I would like it to display in rows.
Cheers,
Code:
$(document).ready(function() {
var mark;
var pointA;
var pointB;
if (GBrowserIsCompatible()) {
var m = $("#map1")[0];
if(m) {
var map = new GMap2(m);
var start = new GLatLng(51.49699,-3.17651);
var zoomLevel = 7;
map.setCenter(start, zoomLevel);
map.addControl(new GSmallMapControl());
GEvent.addListener(map, 'click', function(overlay, point){
if(mark) {
map.removeOverlay(mark);
}
if(point) {
pointA = new GPoint(point.x, point.y);
mark = new GMarker(pointA);
map.addOverlay(mark);
map.getCenter(point);
$('#lng').attr('value',point.x);
$('#lat').attr('value',point.y);
}
});
$('#city').change(function(){
var district = 'district='+$(this).val();
$.ajax({
type: 'POST',
data: district,
url: 'map_district.php',
success: function(r) {
var cord = r.split("|");
if(mark) {
map.removeOverlay(mark);
}
pointB = new GLatLng(cord[0],cord[1]);
mark = new GMarker(pointB);
map.addOverlay(mark);
map.setCenter(pointB, 14);
$('#lat').attr('value',cord[0]);
$('#lng').attr('value',cord[1]);
}
});
});
}
}
});
$(document).ready(function() {
var mapContainer = $('#map3')[0];
if (GBrowserIsCompatible()) {
if (mapContainer) {
var map = new GMap2(mapContainer);
map.addControl(new GLargeMapControl);
//coords here are default map setting
map.setCenter(new GLatLng(53.49699,-1),6);
var zip = $('#zip').val();
var radius = $('#radius').val();
zip = zip.replace(/ /, "");
if (zip == '') {
alert("You need to provide a zip code"); return;
}
var rand = new Date().getTime();
$.getJSON('_postcode.php?search=s&rand=' + rand, { zip: zip, radius: radius }, function(data) {
var markers = [];
var descriptions = [];
var balloons = [];
var bounds = new GLatLngBounds();
function joe(point)
{
var marker = new GMarker(point,icon);
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "./images/blue-dot.png";
blueIcon.iconSize = new GSize(32,32)
markerOptions = { icon:blueIcon };
var point0 = new GLatLng(oLat, oLng);
var marker0 = new GMarker(point , markerOptions);
markers[0] = marker0;
descriptions[0] = '<div class="branch">Your location</div>';
balloons[0] = '<div class="branch">You are here</div>';
map.addOverlay(marker0);
bounds.extend(point0);
GEvent.addListener(marker0, 'click', function() {
marker0.openInfoWindowHtml('<div class="branch_balloon">You are here</div>');
});
map.addOverlay(marker0);
}
//set up 'You are here marker'
var localSearch = new GlocalSearch();
usePointFromPostcode(zip, joe);
map.clearOverlays();
$('#error').html('');
$('#locations').html('');
$('#closest_location').html('');
var flag = true;
$.each(data, function(i, item) {
if (item.error == 'none') {
alert('No results found or Postcode incorrect');
$('#error').append('No results found or Postcode incorrect');
flag = false;
return false;
}
var description =
'<div class="branch ui-corner-left ui-corner-right" id="' + item.user_id + '">' +
'<div class="branch_image_holder"><a href="./viewprofile.php?id=' + item.user_id + '"><img class="branch_image ui-corner-left ui-corner-right" src="view_image.php?image_id=' + item.profile_image + '"/></a></div>' +
'<div class="b_right"><div class="branch_name"><a href="./viewprofile.php?id=' + item.user_id + '">' + item.business_name + '</a></div><div class="branch_distance">Distance ~ ' + item.distance + ' m</div>' +
'<div class="branch_postcode">' + item.business_postcode + '</div>' +
'<div class="branch_description">' + item.business_description + '</div>' +
'<div class="branch_website"><a target="_blank" href="http://' + item.business_website + '">' + item.business_website + '</a></div></div>' +
'<div class="branch_show" id="' + (i+1) + '"><a href="#map3">Show on mappy</a></div></div>';
var balloon =
'<div class="branch_balloon">' +
item.business_name + ' (~ ' + item.distance + ' m)<br />' + item.business_postcode + ' <br />' +
'<span><a href="#' + item.user_id + '">Find entry</a><br />' +
'<span><a href="./viewprofile.php?id=' + item.user_id + '">Go to Profile Page</a></div>';
var lat = item.latitude;
var lng = item.longitude;
oLat = item.oLat;
oLng = item.oLng;
//hacking in the source of search
if(i == '0'){
}
var point = new GLatLng(lat, lng);
var marker = new GMarker(point);
markers[i+1] = marker;
descriptions[i+1] = description;
balloons[i+1] = balloon;
$('#locations').append(description);
map.addOverlay(marker);
bounds.extend(point);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(balloon);
});
});
$('#closest_location').append(descriptions[1]);
//add in some fuzzy zoom - basically if the radius we are looking at is > 20miles then go to a larger zoom frame
if(radius > 20)
{ z = 12; }
else
{ z = 13; }
map.setZoom(z);
// just in case we did not find anything
if (!flag)
map.setCenter(new GLatLng(53.49699,-1),6);
else
{
map.setCenter(new GLatLng(oLat,oLng),z);
//this will set the viewport to center of all markers found
//map.setCenter(bounds.getCenter());
}
$('.branch_show').click(function() {
var id = $(this).attr('id');
markers[id].openInfoWindowHtml(balloons[id]);
});
});
}
}
});
