Always focusing in end users’ needs, Martin is our VP in user experience. Besides staying on the cutting edge as regards new technologies, he is particularly interested in applications related to medicine and humanitarian aid, subject on which he is writing his master thesis in Computer Science at UBA.
Last Monday I had the opportunity to join Brian Cardiff at OneDay Santander to give a conference on ASP.NET and Ajax. OneDay Santander was an event organized by Microsoft Argentina attended by Banco Santander’s IT team.
It was a great experience, which let me learn a lot from an outstanding speaker like Brian and be in touch with colleagues from Microsoft and Banco Santander.
Thanks Miguel Sáez, Brian and Manas for this great opportunity!
PS: you’ll be able to download the conference’s slides from Brian’s blog soon…
The Google Maps API provides a number of methods to make it easier to accomplish this task. One only has to take the time to explore them and think how to combine them to get the solution.
It’s not a hard thing to do, but in case you’re a lazy guy, here goes a short snippet which given an array of GLatLng objects will zoom the map to let you see all those coordinates, and pan it so that the center matches the center of the smallest rectangle that contains all of them.
map.checkResize();
var latlngs = getLatlngs();
var latlngBounds = new GLatLngBounds();
for (var i = 0; i < latlngs.length; i++){
latlngBounds.extend(latlngs);
}
map.setZoom(map.getBoundsZoomLevel(latlngBounds) < MAXIMUM_AUTO_ZOOM_LEVEL ?
map.getBoundsZoomLevel(latlngBounds) : MAXIMUM_AUTO_ZOOM_LEVEL);
map.panTo(latlngBounds.getCenter());
Let’s assume “map” holds a GMaps2 instance, “getLatLngs()” returns the set of coordinates we want to use and “MAXIMUM_AUTO_ZOOM_LEVEL” is an integer.
GLatLngBounds is a class of the Google Maps API which represents a rectangle in the map, being its limits defined by GLatLng objects. This class provides a method “extend” which makes the bounds object enlarge enough to surround the given coordinates.
The method getBoundsZoomLevel in GMaps2 returns the maximum zoom level which we’d need to set in order to be able to see the complete rectangle represented by the given bounds object.
So we create a bounds object which surrounds all the coordinates, get which level of zoom we would need to see it completely, then pan to the center of it.
The constant (or variable, whatever) MAXIMUM_AUTO_ZOOM_LEVEL is to avoid zooming to much when we only have one coordinate (or few of them rather close to each other). If the point is in the middle of the sea and you don’t do this, you’ll just see the sea’s sky-blue. Of course, you may want this behavior.
Finally, the call to checkResize() in GMaps2. That shouldn’t be necessary, but I found (totally empirically) it depends on where you host the map. In the case which inspired this post, I was hosting it in an ExtJS GMapPanel inside an ExtJS Viewport. It used to work in unexpected ways, the map would stay uncentered or the zoom level would be incorrect. Then I realized that if I resized the browser’s window, it began to work. Going back to the checkResize() method, it makes the map check if there was a resize of its parent. If that’s the case, it adjusts itself to fit the new size. Adding that line at the beginning of the snippet made it work, so I guess the problem may be due to the order in which the different parts of the application are rendered (which somehow results in an inconsistent state of the map).
Martin
