8

I've got an application where I would like to present the end user with a google map and allow them to select an area of the map with a simple rectangular drawing tool and then have all of the locations stored in the client's database that fall in that rectangular selection area show up as points on the map...

I have a simple understanding of google maps and can get google maps to plot all the locations on the database w/o a problem... my problem comes in allowing the end user to draw the rectangle. Not sure how to implement this.

Can someone explain or link me to an example of how it's done?

3 Answers 3

11

Looks like this question was asked (and answered) a few months before Google posted about the new drawing tools in v3 API ...

I have to say that using the API's drawing tools gives a better user experience than @rcravens solution. Here's a very specific implementation that lets you "select" an area on the map by drawing a rectangle or polygon, and then checking to see if a marker is inside the shape: http://jsfiddle.net/JsAJA/306/.

0
6

Interesting question. I love the google maps api. Here is a jsFiddle with your solution:

http://jsfiddle.net/JsAJA/2/

You will have to query your database for points between the minimum/maximum lat and lngs. Hope this helps.

Bob

P.S. Note that this breaks the natural user experience of google maps. The map is no longer dragged when you mouse down. It needs a better user experience.

5
  • Ignore that rubber band div. You don't need it.
    – rcravens
    Commented Mar 6, 2011 at 22:17
  • I updated to remove the rubber band div and also a console.log statement that would give issues in IE. jsfiddle.net/JsAJA/3
    – rcravens
    Commented Mar 7, 2011 at 1:10
  • 1
    note that if you draw the rectangle from right to left then weird things happens, is easy to fix, just add something like: if( latlng1.lng() < latlng2.lng() ) latLngBounds = new google.maps.LatLngBounds(latlng1, latlng2); else latLngBounds = new google.maps.LatLngBounds(latlng2, latlng1);
    – Enrique
    Commented Dec 27, 2011 at 6:48
  • 1
    and also, for a better experience, you should set "clickable" to false for the rect object while you are dragging (if not, you can't reduce the size of the rectangle).
    – Enrique
    Commented Dec 27, 2011 at 6:54
  • How would one go about just making a rubber band line, not rectangle? Is there a jsfiddle example for that? I couldn't figure out how to do a search on jsfiddle.
    – Burferd
    Commented Feb 22, 2012 at 1:31
0

You might be interested in learning about Csquares, which encodes lat,lon into a text string which can be inserted into an indexed column.

I have ported the public domain Csquare encoding logic to Java and Javascript.
Let me know if you want it.

http://www.cmar.csiro.au/csquares/csq-faq.htm#10

EXCERPT

  1. What is c-squares, and what purpose does it serve?

C-squares stands for "Concise Spatial Query and Representation System" and is a method of indexing the geographic location of objects or observational data on the surface of the earth, in a simple alphanumeric format suitable for subsequent querying by any text-based system or search engine. . . . In addition, c-squares can be defined at a flexible range of scales, from 10 x 10 degrees (approx. 1000 km) through 5 x 5 degrees (500 km), 1 x 1 degrees (100 km), 0.5 x 0.5 degrees (50 km), 0.1 x 0.1 degrees (10 km) and so on, as fine as the user requires.

  1. Who can benefit from using c-squares?

Anyone interested in the storage, exchange, and retrieval of data or information with a geographic component, who does not wish to go to the level of sophistication of a fully fledged geographic information system (GIS) merely to be able to search their data holdings by geographic location...

  1. Why not simply store, and quote, latitude and longitude values with a particular data item?

Individual values of latitude and longitude can be, and in most cases would continue to be, stored with particular data items (georeferenced objects). C-squares provides an additional level of functionality over and above these "native" values, in several respects: (i) the system reduces latitude and longitude (2 dimensional variable) to a single dimensional variable, for easy indexing and subsequent searching (ii) the system reduces redundancy for multi-point data which occur within a single square (a single code indicating "data present" replaces multiple individual values, for metadata-level information)...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.