map center and zoom for multiple markers

[GoogleCodeExporter]

When placing multiple markers on a map, it would be great if the center of
the map (lat, long) and zoom could be dynamically set.  It's possible to do
this in javascript by using the gmaps api GLatLngBounds class.  This would
be very helpful for when you have multiple markers and don't know how
spread out they will be.

What is the expected output? What do you see instead?
Right now, you have to manually set the center and zoom.  

Here's a code snippet of how this is possible using javascript.  The var
bounds is of interest:

    <div id="map_canvas" style="width:500px; height:500px">&nbsp;</div>
    <script type="text/javascript">
        //<![CDATA[
    var gmap;
    if (GBrowserIsCompatible()) {
        var bounds = new GLatLngBounds();

        function renderMapj_id81() {
            function createMarkersFunctionj_id81(map_base_variable) {
                function createIconFunctionj_id83() {
                    var iconObject = new GIcon(G_DEFAULT_ICON);
                    iconObject.iconSize = new GSize(20, 34);
                    iconObject.shadowSize = new GSize(37, 34);
                    iconObject.iconAnchor = new GPoint(9, 34);
                    iconObject.infoWindowAnchor = new GPoint(9, 2);
                    iconObject.image = "/img/googlemapTack.png";
                    return iconObject;
                }
                var marker_j_id82 = new GMarker(new GLatLng(42.3567,
-71.0528), {draggable: false, icon: createIconFunctionj_id83()});
                setBounds(42.3567, -71.0528);
                map_base_variable.addOverlay(marker_j_id82);
                function createIconFunctionj_id85() {
                    var iconObject = new GIcon(G_DEFAULT_ICON);
                    iconObject.iconSize = new GSize(20, 34);
                    iconObject.shadowSize = new GSize(37, 34);
                    iconObject.iconAnchor = new GPoint(9, 34);
                    iconObject.infoWindowAnchor = new GPoint(9, 2);
                    iconObject.image = "/img/googlemapTack.png";
                    return iconObject;
                }
                var marker_j_id84 = new GMarker(new GLatLng(42.3589,
-71.0512), {draggable: false, icon: createIconFunctionj_id85()});
                setBounds(42.3589, -71.0512);
                map_base_variable.addOverlay(marker_j_id84);
            }
            function setBounds(lat, lng){
                bounds.extend(new GLatLng(lat, lng));
            }
            function createHTMLInfoWindowsFunctionj_id81(map_base_variable) {
            }
            function createMapControlsFunctionj_id81(map_base_variable) {
                var mapControlPosition_j_id96 = new
GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10));
                map_base_variable.addControl(new GLargeMapControl(),
mapControlPosition_j_id96);
                var mapControlPosition_j_id97 = new
GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10));
                map_base_variable.addControl(new GMapTypeControl(),
mapControlPosition_j_id97);
            }
            function createEventListenersFunctionj_id81(map_base_variable) {
            }
            function createPolylinesFunctionj_id81(map_base_variable) {
            }
            function createPolygonsFunctionj_id81(map_base_variable) {
            }
            function createGroundOverlaysFunctionj_id81(map_base_variable) {
            }
            var map_base_variable = new
GMap2(document.getElementById("map_canvas"));
            map_base_variable.setCenter(new GLatLng(0, 0), 0);
            createHTMLInfoWindowsFunctionj_id81(map_base_variable);
            createMarkersFunctionj_id81(map_base_variable);
            createPolylinesFunctionj_id81(map_base_variable);
            createPolygonsFunctionj_id81(map_base_variable);
            map_base_variable.setMapType(G_NORMAL_MAP);
            createEventListenersFunctionj_id81(map_base_variable);
            createMapControlsFunctionj_id81(map_base_variable);
            createGroundOverlaysFunctionj_id81(map_base_variable);

map_base_variable.setZoom(map_base_variable.getBoundsZoomLevel(bounds));
            map_base_variable.setCenter(bounds.getCenter());
            gmap = map_base_variable;
        }
        // Inject code on the load of the window
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = renderMapj_id81;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                renderMapj_id81();
            }
        }
        //]]>
    </script>

Original issue reported on code.google.com by jpedd...@gmail.com on 3 Nov 2008 at 8:56

[GoogleCodeExporter]

Original comment by Hazem.sa...@gmail.com on 1 Jan 2009 at 7:40

• Added labels: Priority-Low
• Removed labels: Priority-Medium

[GoogleCodeExporter]

I second this request

Original comment by david.co...@gmail.com on 7 Jan 2009 at 4:22

[GoogleCodeExporter]

Would be useful to me as well ;-)

Original comment by luc.gira...@macrofocus.com on 18 Feb 2009 at 10:29

[GoogleCodeExporter]

OK I raised the defect level :)

Original comment by Hazem.sa...@gmail.com on 18 Feb 2009 at 10:56

• Added labels: Priority-Medium
• Removed labels: Priority-Low

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

The new attribute will be added to the map:

autoReshape: if it is true then the map will be reshaped to include all of the 
markers.

Original comment by Hazem.sa...@gmail.com on 9 May 2009 at 9:20

• Changed state: Accepted

[GoogleCodeExporter]

fixed in 1.1.2 version.

Original comment by Hazem.sa...@gmail.com on 9 May 2009 at 9:27

• Changed state: Fixed