Add toggle for map.fitBounds() - closes issue #55

Author: mattdaviscodes

flask_googlemaps/__init__.py

@@ -36,6 +36,7 @@ def __init__(self,
                  cluster=False,
                  cluster_imagepath=DEFAULT_CLUSTER_IMAGE_PATH,
                  cluster_gridsize=60,
+                 fit_markers_to_bounds=False,
                  **kwargs):
         """Builds the Map properties"""
         self.cls = cls
@@ -70,6 +71,8 @@ def __init__(self,
         self.cluster_imagepath = cluster_imagepath
         self.cluster_gridsize = cluster_gridsize
 
+        self.fit_markers_to_bounds = fit_markers_to_bounds
+
     def build_markers(self, markers):
         if not markers:
             return
@@ -723,6 +726,7 @@ def as_json(self):
             'collapsible': self.collapsible,
             'js': dumps(self.js),
             'html': dumps(self.html),
+            'fit_markers_to_bounds': self.fit_markers_to_bounds,
         }
 
         return json_dict

flask_googlemaps/templates/googlemaps/gmapjs.html

@@ -62,6 +62,15 @@
            }
         }
 
+        {% if gmap.fit_markers_to_bounds %}
+            // fit all markers in bounds
+            var {{gmap.varname}}_bounds = new google.maps.LatLngBounds();
+            for(i=0; i<{{gmap.varname}}_markers.length;i++) {
+                {{gmap.varname}}_bounds.extend({{gmap.varname}}_markers[i].getPosition());
+            };
+            {{gmap.varname}}.fitBounds({{gmap.varname}}_bounds);
+        {% endif %}
+
         // add rectangles
         var raw_rectangles = {{ gmap.rectangles|tojson|safe }};
         for(i = 0; i < {{ gmap.rectangles|length }}; i++) {
@@ -139,7 +148,7 @@
                 );
            }
         }
-    
+
         // add polylines
         var raw_polylines = {{ gmap.polylines|tojson|safe }};
         for(i = 0; i < {{ gmap.polylines|length }}; i++) {
@@ -179,7 +188,7 @@
             infowindow.open(map, this);
         };
     }
-    
+
     {% if gmap.collapsible %}
         function init_{{gmap.identifier}}_button() {
             document.getElementById('{{gmap.identifier}}').style.display = 'none';