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

Tina CG Hoehr · Accepted Answer · 2012-04-29T16:47:01.397

0

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

edited Apr 29 '12 at 16:47

answered Apr 29 '12 at 16:36

Tina CG Hoehr

6,721
6
44
57

Thanks for trying to help :) If I define a LatLng value manually it does work just fine, but it won't work when it tries to pick up the geolocation. It's strange because userLocation definitely gets defined properly (because addMarker users it and it works), but when I try and use userLocation to panTo, nothing happens. – johninleeds Apr 29 '12 at 16:51
sorry, hit enter before I'd finished my reply – johninleeds Apr 29 '12 at 16:54
Sorry to cut you off. I'll try to get my browser to geolocate and try some other things – Tina CG Hoehr Apr 29 '12 at 16:56
OK, try it now https://files.nyu.edu/hc742/public/googlemaps/stackme3.html The problem was geocoding does not work on my local machine (opening from disk) – Tina CG Hoehr Apr 29 '12 at 17:10
Thank you very much! I see now the reason it wasn't working is I was including the click handler outside of the gmap function. – johninleeds Apr 29 '12 at 17:22
You're welcome! I learned about geolocation so we both benefited. – Tina CG Hoehr Apr 29 '12 at 17:23

jQuery UI map - panTo user location

1 Answers1