Googleマップで道順オプションを追加する方法

私は自分のウェブサイトに追加したマーカーに "道順を取得"オプションを追加しようとしています。 Location for Amar Urja FIDDLE：https://jsfiddle.net/varshit/9t8pwoa5/Googleマップで道順オプションを追加する方法

<html> 
<div id="map" onload="myMap()"></div> 
<script src="https://maps.googleapis.com/maps/api/js? 
key=AIzaSyC7c1XGzYaMKeKfaHXGU9XumqzgH5PNgkw&callback=myMap"></script> 
</html> 

<script> 
function myMap() { 
var uluru = { 
    lat: 28.668877, 
    lng: 77.424681 
}; 
var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 21, 
    center: uluru, 
}); 
var marker = new google.maps.Marker({ 
    position: uluru, 
    draggable: true, 
    map: map 
}); 
} 
</script>

出典

2017-07-20 Varshit Kalra

[Google MapsのAPIとマーカへの道順]（https://stackoverflow.com/questionsの可能性のある重複/ 27765446/directions-to-marker-with-google-maps-api） –

こんにちは。ご提供いただいたことをありがとうございます。私はあなたの地図上で私のマーカの周りの道順を知るオプションを与えることができます。そして、ユーザーがGET DIRECTIONSをクリックすると、彼はGoogleマップにリダイレクトされます。 –

そこでURLロケーションIDを交換してください。 DEMO

HTML

<input type="text" id="routeFrom" name="routeFrom" value="700 n tryon st, charlotte nc" /> 
<label for="routeFrom">From</label><br /> 
<input type="text" id="routeTo" name="routeTo" value="Huntersville, NC" /> 
<label for="routeTo">To</label><br /> 
<select id="routeMode" name="routeMode"> 
    <option value="DRIVING">Driving</option> 
    <option value="WALKING">Walking</option> 
    <option value="BICYCLING">Bicycling</option> 
    <option value="TRANSIT">Transit</option> 
</select> 
<label for="routeMode">Mode</label><br /> 
<div class="textcenter"> 
    <button id="routeGo">Route</button> 
    <button id="routeClear">Clear Route</button> 
</div> 
<div id="map_canvas"></div> 
<div id="directions"></div>

CSS

#map_canvas{ 
    width: 60%; 
    height: 400px; 
    border: 1px solid black; 
    float: left; 
} 
#directions { 
    width: 38%; 
    float: right; 
} 
body { 
    font-size: 12px; 
}

var directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true }); 
var directionsService = new google.maps.DirectionsService(); 
var map; 

$(window).load(function() { 
    var myOptions = { 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: new google.maps.LatLng(28.668877, 77.424681) 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById("directions")); 

    $("#routeMode").on("change", function() { calcRoute(); }); 
    $("#routeGo").on("click", function() { calcRoute(); }); 
    $("#routeClear").on("click", function() { directionsDisplay.setDirections({ routes: [] }); });  
}); 


function calcRoute() { 
    var request = { 
      origin: $("#routeTo").val(), 
     destination: $("#routeFrom").val(), 
     travelMode: google.maps.TravelMode[$("#routeMode").val()] 
    }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 
}

出典

2017-07-20 05:33:53 acmsohail

Googleマップで道順オプションを追加する方法

答えて

関連する問題