This is Part 2 of a week long series featuring code for the Google Maps API.
Auto-Scaling Maps A smart feature, for those displaying markers on a Google Map, is to make sure that all points that you’re rendering are being displayed. There are a couple tactics that can be used to acheive this: 1) Keep the map zoomed out far enough such that all the points will be viewable (if you know where all the points are going to be, roughly) OR 2) Auto-zoom the map in to snugly fit all the markers.
#2 is the smartest technique, but it’s not offered by the Google Maps API. However, in the course of writing a Google Maps hack for the guys at EVDO Coverage I developed a smart algorithm to do so. In a nutshell: You pass this function the map object and an array of points that you want to be shown. The map will automatically be re-centered and zoomed in to the optimal viewing position (the closest you can get without hiding any points).
I’ve set up a demo to run here.
On the demo page, there is a simple button that, once clicked, will display 10 randomly-chosen points and apply the Auto-Scaling function to them. The Auto-Scaling code can be downloaded here. The code simply provides a function which takes a map object and an array of points (as demonstrated in the above demo). Feel free to make good use of this code!
Jason (August 13, 2005 at 11:21 pm)
One thing I notice is that if a point is too close to the border you only see the bottom of the marker and you can often miss it.
John Resig (August 14, 2005 at 7:34 am)
Yeah… I haven’t figured out how to resolve that yet. It’s kind of hard because you’re trying to translate lat/lon to represent the height of the marker itself. If anyone has any insight, I’d appreciate it.
Kaz (August 23, 2005 at 1:24 pm)
Thanks for the updates. I did a similar hack to a map I’m working on but I just guessed at the elemental unit and it didn’t occur to me that it would change when the map size changed (duh!). My version probably doesn’t work as well under different conditions, I may borrow yours. It seems though, that you could just take the log of the width and height to get the zoom rather than iterating (hZoom = Math.log(h/baseHeight) * Math.LOG2E).
John Resig (August 23, 2005 at 6:22 pm)
Kaz Yeah… that particular chunk sounds like a point where my brain had given up for the night – thanks for the tip, though!
Christopher Pietschmann (December 7, 2005 at 11:19 am)
Thanks for the Auto Scaling script! It made my life just a little bit easier.
Ray (December 9, 2005 at 12:27 pm)
Awesome! Thanks for this excellent addition.
ROhan Kini (March 5, 2006 at 4:35 am)
Nice one.
Am trying to creat a site where people can log cycling routes so dipping into Google Maps for the first time.
Nice Tutorials.
PraveenK (March 21, 2006 at 11:07 am)
I was just checking google maps and was surpised to see that this functionality is not provided by gAPI. Its really cool,, need to try out on my sample map. Cool, thanx !
PraveenK (March 21, 2006 at 11:10 am)
Just a suggestion, just put your name and your URL in the comments section users can keep track of where they go the script from later.
DP (September 2, 2006 at 11:56 am)
Great script, am attempting to convert to v2 of google maps. Have you done this, by chance?
jerry (November 20, 2006 at 2:16 am)
http://www.mianxianmachinery.com
diesel fuel injection system
nozzle ,plunger element,d.valve,cam disk, drive shaft ,magnet valve
0086-594-7280550
[email protected]
Robin (October 8, 2007 at 6:16 am)
This post is pretty old now, so for anyone who is still trying to this, it is now built in to the Google Maps API.
Go here:
http://mapki.com/wiki/APIv2#Using_map.getBoundsZoomLevel.28.29