Google APIとJavaScriptを使用して2つのドロップされたマーカーの方向を取得する方法

Question

2つの入力フィールドを使用する前にユーザーがドロップした2つのマーカーの間のパスを取得しようとしていますが、 。 - どちらかlatitute/longiture

origin：二つのマーカーは、Googleが方向APIは3つのパラメータを必要とするマップユーザー

<div style="margin-bottom: 10px;"> 
     <label>Location A: </label> 
     <label id="start" ></label> 
    </div> 

    <div style="margin-bottom: 10px;"> 
     <label>Location B :</label> 
     <label id="end" ></label> 
    </div> 

    <div style="margin-bottom: 10px;"> 

     <button onclick="javascript:calculateRoute()" type="button" style="width: 150px">Calculate Distance</button> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label style="color: red; font-weight: bold" id="lblDistance"></label> 
    </div> 

    <div style="float: left; margin-top: 10px; margin-left: -3px;"> 

     <button type="button" id="pathbtn" style="width: 115px">Shortest Path</button> 
    </div> 

</div> 

のJavaScript

function initialize() { 


var long = parseFloat(document.getElementById("Langitud").value); 
var lat = parseFloat(document.getElementById("Latitud").value); 
var zoomMap = parseFloat(document.getElementById("Zoom").value) 
var disableDefaultUIMap = document.getElementById("disableDefaultUI").checked; 
var scrollwheelMap = document.getElementById("scrollwheel").checked; 
var draggableMap = document.getElementById("draggable").checked; 
var maxZoomMap = parseInt(document.getElementById("maxZoom").value); 
var minZoomMap = parseInt(document.getElementById("minZoom").value); 
var myCenter = new google.maps.LatLng(long, lat); 
var maptype = parseInt(document.getElementById("MapTypeSelect").value) 
var mapTypeIdMap; 
switch (maptype) 
{ 
    case 1: 
     mapTypeIdMap = google.maps.MapTypeId.ROADMAP; 
     break; 
    case 2: 
     mapTypeIdMap = google.maps.MapTypeId.SATELLITE; 
     break; 
    case 3: 
     mapTypeIdMap = google.maps.MapTypeId.HYBRID; 
     break; 
    case 4: 
     mapTypeIdMap = google.maps.MapTypeId.TERRAIN; 
     break; 
} 



var mapProp = { 
    center: myCenter, 
    zoom: zoomMap, 
    mapTypeId: mapTypeIdMap, 
    disableDefaultUI: disableDefaultUIMap, 
    scrollwheel: scrollwheelMap, 
    draggable: draggableMap, 
    maxZoom: maxZoomMap, 
    minZoom: minZoomMap 


}; 

var iconMarker = document.getElementById("sc").innerHTML; 

var conte = document.getElementById("conte").value; 

var draggableMarker = document.getElementById("draggableMarker").checked; 

var map = new google.maps.Map(document.getElementById("map"), mapProp); 



var listenerHandle = google.maps.event.addListener(map, 'mousedown', function (e) { 

    var latLng = e.latLng; 

    marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     draggable: true, 
     icon: image 

    }); 

    //// to get data about mouse position 
    //mMoveHandler = google.maps.event.addListener(map, 'mousemove', function (e) { 
    marker.setPosition(e.latLng); 
    //}); 


    //google.maps.event.removeListener(listenerHandle); 


    document.getElementById("looo").innerHTML = "Lattitude: " + e.latLng.lat() + ' <br/> ' + "Longitude: " + e.latLng.lng(); 
}); 


//-------------------- 
var image = { 
    url: iconMarker, 
    // This marker is 20 pixels wide by 32 pixels high. 
    size: new google.maps.Size(30, 32), 
    //// The origin for this image is (0, 0). 
    //origin: new google.maps.Point(0, 0), 
    //// The anchor for this image is the base of the flagpole at (0, 32). 
    //anchor: new google.maps.Point(0, 32) 
}; 



var marker = new google.maps.Marker({ 
    position: myCenter, 
    map: map, 
    draggable: draggableMarker, 
    animation: google.maps.Animation.BOUNCE, 
    icon: image 


}); 



var infowindow = new google.maps.InfoWindow({ 


    content: conte, 
}); 
google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map, marker); 

}); 
infowindow.open(map, marker); 
marker.setMap(map); 


document.getElementById("cen").innerHTML = " new google.maps.LatLng(" + long + " , " + lat + ")"; 
document.getElementById("zoo").innerHTML = " " + zoomMap; 
document.getElementById("dis").innerHTML = " " + disableDefaultUIMap; 
document.getElementById("swh").innerHTML = " " + scrollwheelMap; 
document.getElementById("drag").innerHTML =" "+ draggableMap; 
document.getElementById("maxzom").innerHTML = " " + maxZoomMap; 
document.getElementById("minzom").innerHTML =" "+ minZoomMap; 
document.getElementById("pos").innerHTML = " new google.maps.LatLng(" + long + " , " + lat + ")"; 
document.getElementById("dra").innerHTML =" "+ draggableMarker; 
document.getElementById("contet").innerHTML = " " + conte; 
document.getElementById("mapt").innerHTML = " google.maps.MapTypeId." + mapTypeIdMap.toUpperCase(); 

}

Answer 1

によってランダムにドロップされますまたは出発地のプレーンテキスト名

destination - latitute/longitureまたは到達点

のためのプレーンテキスト名とコースのAPIキーのどちらか

、あなたがこれらの機能を使用することにより、それらの座標を取得することができ、地図上ドロップマーカーを使用するにはマーカーの各オブジェクト：

var lat = Marker.getPosition().lat(); 
var lng = Marker.getPosition().lng(); 

し、単に新しい非同期API呼び出し上の座標を渡す：

var target = 'https://maps.googleapis.com/maps/api/directions/json?orgin=' 
+originMarkerCoords+'&destination=' 
+destinationMarkerCoords+'&key='+apiKey; 

参考：https://developers.google.com/maps/documentation/directions/intro

は、それはあなたがしようとしているもののいくつかのコード例を提供してください