ここでは、Json オブジェクトとして応答するマーカーがあり、これらのマーカーは Google マップに表示されます。ここでは、これらのマーカー間にパスを描画したいのですが、(value.Latitude) の無効な値のエラーを示す発火バグが発生します。ここで、値は私の JSON オブジェクトです。
var request = {
origin:value.Latitude,
destination:value.Longitude,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
ここに私のスクリプト全体があります
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<style type="text/css">
#map_canvas {
height: 500px;
width: 800px;
position: static;
top: 0px;
left: 100px;
}
</style>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var latlng = new google.maps.LatLng(18.5236, 73.8478);
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
directionsDisplay.setMap(map);
$(document).ready(function () {
$("#btnSubmit").click(function () {
var Source = $("#Source").val();
var Destination = $("#Destination").val();
authenticate(Source, Destination);
});
});
function authenticate(Source,Destination) {
$('#somediv').empty();
var table = $('<table/>').appendTo($('#somediv'));
$.ajax
({
type: 'GET',
url: 'REST/WebService/GetLogin',
dataType: 'json',
data:{'Source': Source, 'Destination': Destination },
error:function()
{
alert("unsuccessfull");
},
success:function(feeds)
{
alert(feeds.length);
$.each(feeds, function (index, value) {
new google.maps.Marker({
position: new google.maps.LatLng(value.Latitude,value.Longitude),
map: map,
title: "Marker Placing"
});
var request = {
origin:value.Latitude,
destination:value.Longitude,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
//alert(feeds.toSource());
}
});
}
}
</script>