获取前往Google Maps Marker的路线

Question

I'm trying to get directions to a Google Maps Marker position from a postcode that a user can enter in a textbox. I'm using the Maps, Places and Directions Google Libraries.

I've found this example from google and I'm trying to work from it http://code.google.com/apis/maps/documentation/directions/

I think I'm pretty much there. I want the user to be able to click on the marker from the map and then click a link that says 'Directions from Marker One'. I can get this to appear correctly and I pass the correct location into a function but for some reason it doesn't keep the entire latlng coordinates. It looks like it drops one of them and that's why it throws an error. If i print out what I pass to the new function (placeLoc) it's only showing one of the coordinates.

the error it gives is: Uncaught Error: Invalid value for property : -0.5796900000000278

heres the code I've got so far:

        function addPlaceResults(){

    var request = {
        location: midWayPoint,
        radius: 7000,
        types: [type]
    };

    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
    service.getDetails(request, callback);


    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
            }
        }   
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });

        var request = { reference: place.reference };
        service.getDetails(request, function(details, status) {

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(
                    details.name + "<br />" 
                    + details.formatted_address + "<br />" 
                    + "<a target='_blank' href='" + details.website +"'>Visit Website</a>" + "<br />" 
                    + details.formatted_phone_number + "<br />"
                    + "<a href='#' onclick='dPoint1(" +placeLoc+ ")'>Directions from Marker One</a>" + "<br />"

                );
             infowindow.open(map, this);
            });
        });
    }
};

        //directions from point one
        function dPoint1(x) {
    console.log(x);
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: true,
        suppressInfoWindows: true
    });

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));

    var request = {
        origin: address1, 
        destination: x,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function(response, status){
        if (status == google.maps.DirectionsStatus.OK) 
        {
            directionsDisplay.setDirections(response);
        }
    });
};

I've tried to include only the relevant code and details in this question. If there is anything I've missed or anything that isn't clear please let me know and I'll add it in / do my best to clarify myself.

Once again, I'll greatly appreciate any help.

Cheers JA

---

Edit

Ok, that makes perfect sense. Thanks guys.

I've tried using the toString() method but that doesn't work. I can successfully pass a string with the two values, separated by a comma into dPoint1 function by using toUrlValue(). When I do this I can print them both out to the console using console.log(x,y) but I can't actually run the code. I get the same error as before.

I think the problem is because I need them to be one thing so i can add it to 'destination: ' for example it should ultimately be destination: x, but because I need to pass x & y in I have to have destination: x ,y, which throws the error.

I'm guessing I need to make use of the google.maps.LatLng() method.

I added this in late last night:

newlatlng = new google.maps.LatLng((placeLoc.lat()+placeLoc.lat()));

that gave me some directions but not to the right place!

Does anyone have any ideas on how I could use this?

Thanks so much for all the help you've given me so far.

JA

Answer 1

This won't work

onclick='dPoint1(" +placeLoc+ ")'

because you can't pass objects to functions like that: concatenating it as a string will produce a string representation which will probably be in the form "x,y". You need to define function dPoint1 to take x and y -- which may well work -- but it would be better to pass literal values explicitly which you derive from placeLoc.

Answer 2

As mentioned by Andrew Leach :

onclick='dPoint1(" +placeLoc+ ")'

Wont work as place.geometry.location is a google.maps.LatLng object: http://code.google.com/apis/maps/documentation/javascript/reference.html#PlaceGeometry

However the google.maps.LatLng class has a toString() method: http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLng

You could try using that instead of passing the google.maps.LatLng object to the dPoint1() method.

Eg

onclick='dPoint1(" +placeLoc.toString()+ ")'