I am trying reverse lookup of the locations from the maps. Say, I have different locations in my database with their co-ordinates and details.
Now, whenever I zoomin/out or drag the map (in Mapquest) all entries should be displayed in a dropdown with the visible area of the map. It should update the list according to the map zoom level and position.
Is there anyway to do this. I am Ok with Google maps also.
Here is the link what I want to achieve. http://oobgolf.com/courses/finder/
Basically...the business logic is like this:
You need to get the boundaries from the map object and then pass these as parameters via AJAX to the SQL query which fetches the records, e.g minLat/maxLat & minLng/maxLng ... these go into the WHERE condition. This will "cut out a rectangle" from your geo-data. You might adjust these values by 5-10% - so that points very close to the boundaries will not be painted to the map (that's just a cosmetic fix).
Just found some sample JS code on my drive for the Google Maps API (it uses jQuery):
function loadViewport() {
var b = map.getBounds();
$.minY = b.getNorthEast().lng();
$.maxY = b.getSouthWest().lng();
$.minX = b.getSouthWest().lat();
$.maxX = b.getNorthEast().lat();
$.url = "http://www.somehost.com/data.php?mode=viewport&minX="+$.minX+"&maxX="+$.maxX+"&minY="+$.minY+"&maxY="+$.maxY;
$.ajax({type:"GET",url:$.url,dataType:"json",success: parseJSON});
}
Populating to listing to the left will need to by done in function parseJSON() ...
The WHERE condition of the SQL would be something like that:
WHERE
(`location`.`latitude` BETWEEN ".(float)$minX." AND ".(float)$maxX.")
AND
(`location`.`longitude` BETWEEN ".(float)$maxY." AND ".(float)$minY.")
Of course the columns in the table need to be of data-type float - else this won't work for sure.
As you can see, I'm casting from string to float - in order to enable the comparison...
Hope this helps, the code for MapQuest may vary - but the logic should be quite the same.