Showing current location + directions using google maps API and phonegap?

I have following requirements

  1. Show directions from point of origin to destination
  2. Show user's current location.

I am creating a map with directions and then displaying user's current location on that.

function showDirection(orgn, dstntn)
{
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();

    var map = new google.maps.Map(document.getElementById('displayMap'), {
        zoom : 7,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('displayDirections'));

    var request = {
        origin : orgn,
        destination : dstntn,
        travelMode : google.maps.DirectionsTravelMode.WALKING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
    var win = function(position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            var myLatlng = new google.maps.LatLng(lat, long);
            var iconimage="images/current_location_small.png";
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
                icon: iconimage
            });

            marker.setMap(map);
     };

     var fail = function(e) {
            alert('Can\'t retrieve position.\nError: ' + e);
        };

     var watchID = navigator.geolocation.getCurrentPosition(win, fail);
}

The above code works fine if the user is within the map created for showing directions, but if the user is out of the map area, his current location is not shown.

I somehow want all the three points 1. origin, 2. destination and 3. user location to fit on the map. Is there a way I can zoom the map out to fit all three points, or create original map in a way that all three points are visible.

Answers


Add the following after marker.setMap(map);

marker.setMap(map);
//Add these lines to include all 3 points in the current viewport
var bounds = new google.maps.LatLngBounds();
bounds.extend(orgn);
bounds.extend(dstntn);
bounds.extend(myLatlng);
map.fitBounds(bounds);

Need Your Help

jQuery attribute filter to get textbox based on a value

javascript jquery

I am trying to get all empty text boxes on my page using jQuery. Somehow I am not able to get all the text boxes that are empty.

Why is my Jersey JAX-RS server throwing a IllegalStateException about not being in RequestScope?

java jersey jax-rs

I've been looking at this one for too long and found the solution and wanted to provide feedback for any other intrepid JAX-RS adventurers that follow.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.