Google Maps API navigation starting point via input text field

Question

Im working on a website for a teagarden, and i want to make a google map which enables customers to input their adress into a textfield.

When they submit their adress the google map will give the navigation route between the inputted adress and the adress of the teagarden(it doesnt matter if the navigation route is shown in the google map on the website itself or that it opens a google maps tab with the navigation. as long as people can input their adress and it gives them a navigation towards the teagarden).

Is this possible?

Answer 1

Absolutely. This is a quite simple task and it would not be a problem to let the user stay on the same page instead of opening a new tab. You should take a look at the following API´s:

Convert a Address into usable Coordinates: https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

I have written an explanation on how to use this api here (How to use Address instead of Lat/Long in Google Map API)

and to calculate the Route take a look at: https://developers.google.com/maps/documentation/directions/intro

You will obtain the Coordinates with the above mentioned Geolocation api. You need a request object with known origin and destination, this could look like this:

var request = {
 origin: {lat: startLat, lng: startLng},
 destination: {lat: endLat, lng: endLng},
 travelMode: google.maps.DirectionsTravelMode.DRIVING
};

The function to automatically draw a polyLine line between start and endpoint could look like this:

route: function (request) {           
    console.log("in route");
    var lineColor = "#a12347";
    var lineOpacity = 1.0;
    var strokeWeight = 5;

    var service = new google.maps.DirectionsService();
    var bounds = new google.maps.LatLngBounds();

    polyRoute = new google.maps.Polyline({
        path: [],
        strokeColor: lineColor,
        strokeOpacity: lineOpacity,
        strokeWeight: strokeWeight
    });

    service.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            console.log(result);
            var legs = result.routes[0].legs;
            for (i = 0; i < legs.length; i++) {
                var steps = legs[i].steps;
                for (j = 0; j < steps.length; j++) {
                    var nextSegment = steps[j].path;
                    for (k = 0; k < nextSegment.length; k++) {
                        polyRoute.getPath().push(nextSegment[k]);
                        bounds.extend(nextSegment[k]);
                    }
                }
            }
        }
        map.fitBounds(bounds);
        map.setZoom(16);
        polyRoute.setMap(map);
    });

If you need further help for this task don´t hesitate to ask.