Карты Google с текстовыми полями назначения

Question

Я хочу вставить карты Google в веб-сайт с двумя текстовыми полями. Я хочу разместить пункт назначения в каждом текстовом поле, а затем нажать кнопку «Перейти», которая прослеживает маршрут от двух пунктов назначения, указанных в двух текстовых полях.

Если Google Maps не самый простой способ сделать это, есть ли другой провайдер, с которым я могу использовать эту идею.

спасибо

Answer 1

<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>

Приведенный выше код поможет получить то, что вам нужно.Форма имеет текстовые поля Start & Destination, где вы должны ввести адрес вручную.Если вы хотите автозаполнение для этих текстовых полей (то есть, когда вы набираете адрес, вам будет предложено перейти по этой ссылке "https://google -developers.appspot.com / maps / Documentation / javascript / examples / place-autocomplete").