title: jQuery UI map - panTo user location
body: <p>Long time reader/ first time poster here, with a question I suspect will be easy to answer but help me out no end.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>        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 = '&lt;div id="content"&gt;' + '&lt;div id="siteNotice"&gt;' + '&lt;/div&gt;' + '&lt;h2 id="firstHeading" class="firstHeading"&gt;Your Union&lt;/h2&gt;' + '&lt;div id="bodyContent"&gt;' + '&lt;p&gt;Heres a bit about us&lt;/p&gt;' + '&lt;/div&gt;' + '&lt;/div&gt;';
  
  
          //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);
              });
  
          });
  </code></pre>
  
  <p>Thing I'm actually working on here: <a href="http://jdp.org.uk/tests/mapstest4.html" rel="nofollow">http://jdp.org.uk/tests/mapstest4.html</a></p>