CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Garry
Garry

Reputation: 1271

Google maps with destination textboxes

I am wanting to imbed google maps into a website with two textboxes. I am wanting to place a destination in each textbox and then press a 'Go' button which traces the route from the two destinations that are entered in the two textboxes.

If google maps is not the easiest way to do this, is there another provider that I can use this idea with.

thanks

Upvotes: 1

Views: 2424

Answers (1)

Sailesh Jaiswal
Sailesh Jaiswal

Reputation: 319

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var map;
var directionsService = new google.maps.DirectionsService();

function initialize() {

    var rendererOptions = {
            draggable: true
        };

    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

    var my_place = new google.maps.LatLng(17.435979,78.448196);
    var myOptions = {
        zoom:14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: my_place
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById("Start").value;
  var end = document.getElementById("Destination").value;
  var request = {
     origin:start, 
     destination:end,
     travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
 directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
 });
}
$(function(){
    initialize();
});
</script>

<div id='map_canvas' style='width: 500px; height: 400px'></div>
<form name="GoogleMapForm" method="post" action="">
Start: <input type="text" name="Start" id="Start" /><br />
Destination: <input type="text" name="Destination" id="Destination" /><br />
<input type="button" name="Go" value="Go" onclick="javascript: calcRoute()" />
</form>

Above code help to get what you required. Form has Start & Destination Textboxes where you have to enter address manually. If you want a autocomplete for these textboxes(i.e., guide you when you type the address follow this link "https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete").

Upvotes: 2

Related Questions