Skip to content
This repository has been archived by the owner on May 24, 2021. It is now read-only.

Commit

Permalink
Merge pull request #11 from chrislkeller/map_center_on_resize
Browse files Browse the repository at this point in the history 
adds function to maintain map centerpoint when template is resized
  • Loading branch information
@derekeder
derekeder committed Dec 28, 2012
2 parents f8f11d1 + 79512c5 commit 0a986e5
Showing 1 changed file with 63 additions and 49 deletions.
112 changes: 63 additions & 49 deletions source/maps_lib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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: {
Expand All @@ -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);
Expand All @@ -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) {
Expand All @@ -167,7 +176,7 @@ var MapsLib = {
}
});
},

drawSearchRadiusCircle: function(point) {
var circleOptions = {
strokeColor: "#4b58a6",
Expand All @@ -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"});
},
Expand All @@ -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;
Expand All @@ -225,7 +234,7 @@ var MapsLib = {
});
$( "#result_count" ).fadeIn();
},

addCommas: function(nStr) {
nStr += '';
x = nStr.split('.');
Expand All @@ -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);
}
}
}

0 comments on commit 0a986e5

Please sign in to comment.