From 79512c5b3fc134f79209d80a686c957023138a9d Mon Sep 17 00:00:00 2001 From: Chris Keller Date: Thu, 27 Dec 2012 16:00:01 -0800 Subject: [PATCH] adds function that maintains map centerpoint when responsive template is resized --- source/maps_lib.js | 112 +++++++++++++++++++++++++-------------------- 1 file changed, 63 insertions(+), 49 deletions(-) diff --git a/source/maps_lib.js b/source/maps_lib.js index 2aedb774..2fa7d69a 100644 --- a/source/maps_lib.js +++ b/source/maps_lib.js @@ -7,41 +7,41 @@ * 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, @@ -49,9 +49,18 @@ var MapsLib = { 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')); @@ -59,48 +68,48 @@ var MapsLib = { 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); } -} +} \ No newline at end of file