jQuery UI map - panTo user location

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)});
//  });
//  };