मुझे Google मानचित्र दिशानिर्देश फ़ंक्शन बनाने/प्रतिलिपि बनाने में समस्या हो रही है। जब मैं एक से/फ़ील्ड करता हूं तो मैं इसे ठीक काम करने में सक्षम हूं लेकिन जैसे ही मैं कई गंतव्यों को जोड़ने का प्रयास करता हूं, यह काम नहीं करता है। मैंने हम पर ध्यान दिया है लेकिन मुझे कोई अच्छा उदाहरण नहीं मिल रहा है यह दिखाता है कि यह कैसे किया जाता है। नीचे मैंने जो किया है वह नीचे है। लेकिन मुझे पूरा यकीन है कि यह वास्तव में बुरी तरह से किया जाता है। कोई भी उदाहरण महान होगा।Google मानचित्र API - कई गंतव्यों को काम नहीं कर रहा है (Google दिशानिर्देश)
<linkhref=http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src=http://maps.google.com/maps/api/js?sensor=false&key=xxxxx" type="text/javascript"></script>
<script type="text/javascript">
var intTextBox = 0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement() {
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute(
'id', 'strText' + intTextBox);
newTBDiv.innerHTML =
"Text " + intTextBox + ": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";
contentID.appendChild(newTBDiv);
}
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement() {
if (intTextBox != 0) {
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById(
'strText' + intTextBox));
intTextBox = intTextBox - 1;
}
}
var address = '<%= hdnDefault.Value %>'; //Hidden field contains default city London
var rendererOptions = {
draggable:
true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); ;
var directionsService = new google.maps.DirectionsService();
var map;
var mygc = new google.maps.Geocoder();
mygc.geocode({
'address': address },
function(results, status) {
var country1 = results[0].geometry.location.lat();
var country2 = results[0].geometry.location.lng();
var australia = new google.maps.LatLng(country1, country2);
initialize(australia);
}
);
function initialize(australia) {
var myOptions =
{
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: australia
};
map =
new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(
"directionsPanel"));
google.maps.event.addListener(directionsDisplay,
'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}
function calcRoute(fromAddress, toAddress) {/*from and to text boxes*/
var request = {
origin: fromAddress,
destination: toAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request,
function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
}
function setDirections(fromAddress, toAddress) {
calcRoute(fromAddress, toAddress);
}
function showLocation() {
geocoder.getLocations(document.forms[0].fromAddress.value,
function(response) {
if (!response || response.Status.code != 200) {
alert(
"Sorry, we were unable to geocode the first address");
}
else {
location1 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };
geocoder.getLocations(document.forms[0].toAddress.value,
function(response) {
if (!response || response.Status.code != 200) {
alert(
"Sorry, we were unable to geocode the second address");
}
else {
location2 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };
gDir.load(
'from: ' + location1.address + ' to: ' + location2.address);
}
});
}
});
}
</script>
<
body onload="initialize()">
<div>
<div id="map_canvas" style="width: 430px; height: 450px; margin-right: 10px;">
</div>
</div>
</div>
/*Contains texboxes and buttons*/
</div>
<div id="directionsPanel" style="text-align: right; width: 900px; height: 100%;">
<p>
Total Distance:
<span id="total"></span>
</p>
</div>
</
body>
धन्यवाद। यह मेरे लिए काम करता है !!! – Rup