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

Python 3 urllib.request byte indicator b' causing issues

python-3.x urllib

I have a variable storing random characters which may be special chars that came from decoding base64:

Issue Incrementing a Value Inside an ActionListener

java properties conditional actionlistener

I'm trying to increment/decrement a user score as appropriate inside a text field on a (very) basic GUI. How, I only succeed in decrementing even though there is proof my conditional works correctly.