Google Map or Mapquest API to track the visible area

Question

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/

Answer 1

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.

Source

Answer 2

This logic works for the MapQuest APIs as well. You will need to pass the current extent of your map into the query so that you can query the database based on the extent of the map. The results from the query would then populate your drop-down menu, so all POIs currently showing on the map will have a corresponding item in the drop-down menu.

If you're using the MapQuest JavaScript API, take a look at the MQA.TileMap.getBounds method, which returns the current bounding box of the map extent. I've found the forums on the MapQuest Developer Network website to be extremely helpful when I've had questions, so don't hesitate to post a question or code sample there if you need help or need further clarification. Here's the link: http://developer.mapquest.com/web/products/forums/