Merge pull request #11 from chrislkeller/map_center_on_resize

adds function to maintain map centerpoint when template is resized

Author: derekeder

source/maps_lib.js

@@ -7,100 +7,109 @@
  * https://github.com/derekeder/FusionTable-Map-Template/wiki/License
  *
  * Date: 12/10/2012
- * 
+ *
  */
- 
+
 var MapsLib = MapsLib || {};
 var MapsLib = {
-  
+
   //Setup section - put your Fusion Table details here
   //Using the v1 Fusion Tables API. See https://developers.google.com/fusiontables/docs/v1/migration_guide for more info
-  
+
   //the encrypted Table ID of your Fusion Table (found under File => About)
   //NOTE: numeric IDs will be depricated soon
-  fusionTableId:      "1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0",  
-  
-  //*New Fusion Tables Requirement* API key. found at https://code.google.com/apis/console/   
-  //*Important* this key is for demonstration purposes. please register your own.   
-  googleApiKey:       "AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY",        
-  
-  //name of the location column in your Fusion Table. 
-  //NOTE: if your location column name has spaces in it, surround it with single quotes 
+  fusionTableId:      "1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0",
+
+  //*New Fusion Tables Requirement* API key. found at https://code.google.com/apis/console/
+  //*Important* this key is for demonstration purposes. please register your own.
+  googleApiKey:       "AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY",
+
+  //name of the location column in your Fusion Table.
+  //NOTE: if your location column name has spaces in it, surround it with single quotes
   //example: locationColumn:     "'my location'",
-  locationColumn:     "geometry",  
+  locationColumn:     "geometry",
 
   map_centroid:       new google.maps.LatLng(41.8781136, -87.66677856445312), //center that your map defaults to
   locationScope:      "chicago",      //geographical area appended to all address searches
   recordName:         "result",       //for showing number of results
-  recordNamePlural:   "results", 
-  
+  recordNamePlural:   "results",
+
   searchRadius:       805,            //in meters ~ 1/2 mile
   defaultZoom:        11,             //zoom level when map is loaded (bigger is more zoomed in)
   addrMarkerImage: 'http://derekeder.com/images/icons/blue-pushpin.png',
   currentPinpoint: null,
-  
+
   initialize: function() {
     $( "#result_count" ).html("");
-  
+
     geocoder = new google.maps.Geocoder();
     var myOptions = {
       zoom: MapsLib.defaultZoom,
       center: MapsLib.map_centroid,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     map = new google.maps.Map($("#map_canvas")[0],myOptions);
-    
+
+    // maintains map centerpoint for responsive design
+    google.maps.event.addDomListener(map, 'idle', function() {
+        MapsLib.calculateCenter();
+    });
+
+    google.maps.event.addDomListener(window, 'resize', function() {
+        map.setCenter(MapsLib.map_centroid);
+    });
+
     MapsLib.searchrecords = null;
-    
+
     //reset filters
     $("#search_address").val(MapsLib.convertToPlainString($.address.parameter('address')));
     var loadRadius = MapsLib.convertToPlainString($.address.parameter('radius'));
     if (loadRadius != "") $("#search_radius").val(loadRadius);
     else $("#search_radius").val(MapsLib.searchRadius);
     $(":checkbox").attr("checked", "checked");
     $("#result_count").hide();
-     
+
     //run the default search
     MapsLib.doSearch();
   },
-  
+
   doSearch: function(location) {
     MapsLib.clearSearch();
     var address = $("#search_address").val();
     MapsLib.searchRadius = $("#search_radius").val();
 
     var whereClause = MapsLib.locationColumn + " not equal to ''";
-    
+
     //-----custom filters-------
-    
+
     //-------end of custom filters--------
-    
+
     if (address != "") {
       if (address.toLowerCase().indexOf(MapsLib.locationScope) == -1)
         address = address + " " + MapsLib.locationScope;
-  
+
       geocoder.geocode( { 'address': address}, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
           MapsLib.currentPinpoint = results[0].geometry.location;
-          
+
           $.address.parameter('address', encodeURIComponent(address));
           $.address.parameter('radius', encodeURIComponent(MapsLib.searchRadius));
           map.setCenter(MapsLib.currentPinpoint);
           map.setZoom(14);
-          
+
           MapsLib.addrMarker = new google.maps.Marker({
-            position: MapsLib.currentPinpoint, 
-            map: map, 
+            position: MapsLib.currentPinpoint,
+            map: map,
             icon: MapsLib.addrMarkerImage,
             animation: google.maps.Animation.DROP,
             title:address
           });
-          
+
           whereClause += " AND ST_INTERSECTS(" + MapsLib.locationColumn + ", CIRCLE(LATLNG" + MapsLib.currentPinpoint.toString() + "," + MapsLib.searchRadius + "))";
-          
+
           MapsLib.drawSearchRadiusCircle(MapsLib.currentPinpoint);
           MapsLib.submitSearch(whereClause, map, MapsLib.currentPinpoint);
-        } 
+        }
         else {
           alert("We could not find your address: " + status);
         }
@@ -110,12 +119,12 @@ var MapsLib = {
       MapsLib.submitSearch(whereClause, map);
     }
   },
-  
+
   submitSearch: function(whereClause, map, location) {
     //get using all filters
     //NOTE: styleId and templateId are recently added attributes to load custom marker styles and info windows
     //you can find your Ids inside the link generated by the 'Publish' option in Fusion Tables
-    //for more details, see https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles 
+    //for more details, see https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles
 
     MapsLib.searchrecords = new google.maps.FusionTablesLayer({
       query: {
@@ -129,20 +138,20 @@ var MapsLib = {
     MapsLib.searchrecords.setMap(map);
     MapsLib.getCount(whereClause);
   },
-  
+
   clearSearch: function() {
     if (MapsLib.searchrecords != null)
       MapsLib.searchrecords.setMap(null);
     if (MapsLib.addrMarker != null)
-      MapsLib.addrMarker.setMap(null);  
+      MapsLib.addrMarker.setMap(null);
     if (MapsLib.searchRadiusCircle != null)
       MapsLib.searchRadiusCircle.setMap(null);
   },
-  
+
   findMe: function() {
     // Try W3C Geolocation (Preferred)
     var foundLocation;
-    
+
     if(navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function(position) {
         foundLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
@@ -153,7 +162,7 @@ var MapsLib = {
       alert("Sorry, we could not find your location.");
     }
   },
-  
+
   addrFromLatLng: function(latLngPoint) {
     geocoder.geocode({'latLng': latLngPoint}, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
@@ -167,7 +176,7 @@ var MapsLib = {
       }
     });
   },
-  
+
   drawSearchRadiusCircle: function(point) {
       var circleOptions = {
         strokeColor: "#4b58a6",
@@ -183,13 +192,13 @@ var MapsLib = {
       };
       MapsLib.searchRadiusCircle = new google.maps.Circle(circleOptions);
   },
-  
+
   query: function(selectColumns, whereClause, callback) {
     var queryStr = [];
     queryStr.push("SELECT " + selectColumns);
     queryStr.push(" FROM " + MapsLib.fusionTableId);
     queryStr.push(" WHERE " + whereClause);
-  
+
     var sql = encodeURIComponent(queryStr.join(" "));
     $.ajax({url: "https://www.googleapis.com/fusiontables/v1/query?sql="+sql+"&callback="+callback+"&key="+MapsLib.googleApiKey, dataType: "jsonp"});
   },
@@ -205,18 +214,18 @@ var MapsLib = {
       }
     }
   },
-  
+
   getCount: function(whereClause) {
     var selectColumns = "Count()";
     MapsLib.query(selectColumns, whereClause,"MapsLib.displaySearchCount");
   },
-  
-  displaySearchCount: function(json) { 
+
+  displaySearchCount: function(json) {
     MapsLib.handleError(json);
     var numRows = 0;
     if (json["rows"] != null)
       numRows = json["rows"][0];
-    
+
     var name = MapsLib.recordNamePlural;
     if (numRows == 1)
     name = MapsLib.recordName;
@@ -225,7 +234,7 @@ var MapsLib = {
       });
     $( "#result_count" ).fadeIn();
   },
-  
+
   addCommas: function(nStr) {
     nStr += '';
     x = nStr.split('.');
@@ -237,10 +246,15 @@ var MapsLib = {
     }
     return x1 + x2;
   },
-  
+
+  // maintains map centerpoint for responsive design
+  calculateCenter: function() {
+    center = map.getCenter();
+  },
+
   //converts a slug or query string in to readable text
   convertToPlainString: function(text) {
     if (text == undefined) return '';
   	return decodeURIComponent(text);
   }
-}
+}