jQuery UI map - panTo user location - google-maps-api-3

Question

Long time reader/ first time poster here, with a question I suspect will be easy to answer but help me out no end.
I simply want to i) retrieve the user's location, ii) display an icon at this location, and iii) Have a button labelled 'Find Me' that pans the map to this location.
I have i) and ii) working, but although I have other buttons that pan to a particular location, this one doesn't seem to work:
var viewportHeight = $(window).height();
var mapHeight = viewportHeight - 93;
var map;
var union = new google.maps.LatLng(53.806828, -1.555999);
var userLocation;
var userIcon = 'userIcon.png';
var parkinson = new google.maps.LatLng(53.808, -1.553);
var unionDescription = '<div id="content">' + '<div id="siteNotice">' + '</div>' + '<h2 id="firstHeading" class="firstHeading">Your Union</h2>' + '<div id="bodyContent">' + '<p>Heres a bit about us</p>' + '</div>' + '</div>';
//Try and get the user's location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map_canvas').gmap('addMarker', {
'position': userLocation,
'bounds': false,
'icon': userIcon
});
});
};
//initialise the map
$(function () {
$('#map_canvas').gmap({
'center': union,
'zoom': 16,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
'styles': campusStyles,
'minZoom': 15,
'maxZoom': 17
}).bind('init', function (ev, map) {
$('#map_canvas').gmap('addMarker', {
'position': parkinson,
'bounds': false
}).click(function () {
$('#map_canvas').gmap('openInfoWindow', {
'content': 'Hello World!'
}, this);
});
$('#map_canvas').gmap('addMarker', {
'position': union,
'bounds': true
}).click(function () {
$('#map_canvas').gmap('openInfoWindow', {
'content': unionDescription
}, this);
});
$('#map_canvas').height(mapHeight);
google.maps.event.trigger(map, 'resize');
$('#unionButton').click(function () {
map.panTo(union);
});
$('#findMe').click(function () {
map.panTo(userLocation);
});
$('#map_canvas').height(mapHeight);
});
});
Thing I'm actually working on here: http://jdp.org.uk/tests/mapstest4.html

Answer 1

I don't know why but my navigator geolocation is not working, so I just bypassed that requirement and hard-coded a user LatLng. What worked for me was cutting and pasting the whole block if(navigator.geolocaton) to directly below the block with the line $('#unionButton').click(function(){map.panTo(union);});. It appears that map was not yet defined where you had the geolocation code.
From my testing, smooth panning only happens when the current position is close to the target. http://jsfiddle.net/EejRt/
I have:
$('#map_canvas').height(mapHeight);
google.maps.event.trigger(map, 'resize');
$('#unionButton').click(function(){map.panTo(union);});
$('#map_canvas').height(mapHeight);
//if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(function(position) {
// var userLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var userLocation = new google.maps.LatLng(53.8018,-1.553);
$('#map_canvas').gmap('addMarker', {'position': userLocation, 'bounds': false, 'icon' : userIcon });
$('#findMe').click(function(){map.panTo(userLocation)});
// });
// };