So I was browsing around sites on the internet to get ideas on how to improve maps on a number of my websites when I came across hipmunk.com. If you do a hotel search you will see that instead of stacking and cramming map markers for hotels that are close together they group them. Example can be seen at http://snpr.cm/5G3rLr.png – in that screenshot the circles with no number represent a single hotel whereas the circle with a 2 on it represents 2 hotels.
It seems they have some kind of grid over the map and then they run through all their coordinates and place each hotel into a cell on the grid. Cells with no hotels don’t show a marker, cells with one hotel show a circle and cells with multiple hotels show a circle with a number on it. The part I can’t wrap my head around is how they are defining this grid. Any ideas?
I know this is a somewhat vague question and in a case I’m in a “monkey see, monkey want to do” situation but I’m sure other web developers who have sites with maps have similar questions about the “how” when they saw hipmunk.
The big mystery for me was figuring out a way to translate an pixel on the map to a latitude/longitude coordinate and vice versa. Turns out this is extremely chunky to do via Google’s Maps API v3. This example gave me the most help in solving that issue: http://www.william-map.com/20100416/1/map.htm