Change the way this page displays results:

[roldahayes]

Hi, not too sure where to start with this...

 

Below is my code that displays the members results sorted by nearest distance from the postcode/Zipcode that is searched.

 

The results of this search are displayed into a div called "closest_location" so the results are literally injected into the div.

 

I need the data to be displayed into a table in rows using PHP includes.

 

Is this possible?

 

I'm assuming that I would need to add a query first? something like:

 

$sql_query = "SELECT * FROM users WHERE ..............?

 

<?PHP

  session_start();
  header("Cache-control: private");

  include ("_common_functions.php");
  include ("_database_functions.php");
  
  //setting up initial user login box
  $topNav  = createTopNav();
  
  //if user is logged in, set top menu with user navigation.
  if(isset($_SESSION['valid_user']))
  { $topNav = $topNav = createTopNav('y'); }
  
  include('./html/header.html');
  include('./html/postcodeform.html');
  
  echo '<script src="http://maps.google.com/maps?file=api&v=2&key='.GOOGLE_KEY.'" type="text/javascript"></script>';
  echo '<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key='.GOOGLE_KEY.'" type="text/javascript"></script>';
  echo '<script type="text/javascript" src="./javascript/maps.js"></script>';
  echo '<script type="text/javascript" src="./javascript/gmap.js"></script>';
   
?>
  
  <br/>
  <div class="map_holder">
    <div class="map" id="map3" style="width:750px;height:450px; margin:auto;"></div>
    <input type="hidden" id="lng" name="lng" value="" />
    <input type="hidden" id="lat" name="lat" value="" />
  </div>
  
  <div id="error"></div>
  <div>
    <strong>Closest Location</strong><br />
    <div id="closest_location"></div>
    
    <strong>All Locations Found Within <?PHP echo $_POST['radius'], 'miles of ', $_POST['zip'] ?></strong><br />
    <div id="locations"></div>
  </div>

<?PHP include('./html/footer.html'); exit; ?>

[ChemicalBliss]

Looks like your using a Google API to populate the divs,

 

So the actual data your using is off-site, if google supports it, maybe you can get the data directly instead of getting google to populate your divs, if you can store the data into an Array, you can do whatever you want with it.

 

Otherwise you will need your own mysql database that holds all the zip codes and locations. (Will be extremely difficult to add routes to this system like google maps though, so i doubt it wil be anywhere near as accurate).

 

Check the Google API you are using .

 

Good Luck,

-CB-

[roldahayes]

Ok, looks like the page is injected from the external  map.js file

 

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]);
                    

 

So, adding CSS for these Divs, make the changes in the page.  I think?

[ChemicalBliss]

You can change the style, i doubt you can change it into table format, without some really crazy coding.

[roldahayes]

Yeah, thats what I'm finding....

 

Can change the font size, colour, etc but having a nightmare sizing and floating the Divs...

[ChemicalBliss]

It's because the code is generated off-site, you would have to write your own javascript code, even then, not sure if you could use custom map.js with the google API's anyway.

 

Well, that's the extent of my knowledge in this area, your moving onto javascript now .

 

Good Luck though!

-CB-