CODEWITHSUNDEEP
javascriptandroidhtmliosgoogle-maps
DarrenE
DarrenE

Reputation: 43

Google maps API DirectionsService between lat and long and GeolocationMarker

I am trying to get the directions services working on google maps api v3. It is a webapp for smartphones where the user can get directions from where they are (GeolocationMarker) to a static (hardcoded) location defined by a lat and long. The map centres on the hard coded lat and long, and then I have an icon (gps.png) that onclick should calculate and plot the directions between the two points. I am not overly strong in javascript and this is essentially a mashup of code...can anyone see what I have done wrong and why this wont work?

Javascript is:

<code>
    var map, GeoMarker;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var arena = new google.maps.LatLng(43.684782688659126,-79.2992136269837);
        var mapOptions = {
        zoom: 12,
        center: arena,
        panControl: false,
        zoomControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
        directionsDisplay.setMap(map);
        var marker1 = new MarkerWithLabel({
        position: arena,
        draggable: false,
        raiseOnDrag: false,
        map: map,
        icon: "images/lax-pin1.png",
        labelContent: "Ted Reeve Arena",
        labelAnchor: new google.maps.Point(25, 0),
        labelClass: "pin", // the CSS class for the label
        labelStyle: {opacity: 0.95}
        });
        GeoMarker = new GeolocationMarker();
          GeoMarker.setCircleOptions({fillColor: '#808080'});
         google.maps.event.addListenerOnce(GeoMarker, 'position_changed',                  function(e) {
         map.setCenter(e.latLng);
         map.fitBounds(e.latLngBounds);
         });
         google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
         alert('There was an error obtaining your position. Message: ' + e.message); 
         });
         GeoMarker.setMap(map);
         }   
        function calcRoute() {
        var request = {
            origin: GeoMarker,
            destination: marker1,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
        }
        });
    }
         google.maps.event.addDomListener(window, 'load', initialize);      

</code>

The html is an onclick div tag for the calcRoute function Thanks for any help....

Upvotes: 0

Views: 1455

Answers (2)

Anto Jurković
Anto Jurković

Reputation: 11258

There is an error reported:

TypeError: e is undefined

for line

map.setCenter(e.latLng);

Event listener 

google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function(e) {
    map.setCenter(e.latLng);
    map.fitBounds(e.latLngBounds);
});

should be changed to

google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function(e) {
    //map.setCenter(e.latLng);
    //map.fitBounds(e.latLngBounds);
    map.setCenter(GeoMarker.getPosition());
    map.fitBounds(GeoMarker.getBounds());
});

request should be changed to:

var request = {
    origin: GeoMarker.getPosition(),
    destination: marker1.getPosition(),
    travelMode: google.maps.TravelMode.DRIVING
};

because origin/destination expects string or valid LatLng

Update: I forgot this change: marker1 has to be changed to global:

var map, GeoMarker;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var marker1;

Upvotes: 1

DarrenE
DarrenE

Reputation: 43

Okay, I got it to work, but not pretty. This is what I did function calcRoute() { var arena1 = new google.maps.LatLng(43.684782688659126,-79.2992136269837); var request = { origin: GeoMarker.getPosition(), destination: arena1, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } });

Upvotes: 0

Related Questions