i have code for two place finder and direction drow in google map bt what i want when i click on any or both place marker and move that marker and leave that time i want the direction will be attached to anothe rmarker automatically and give direction correct. i have completely with draggable marker bt i want that direction join to two direction in google maps.
here is the code:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="DesktopModules_Date_Time_WebUserControl" %>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var location1;
var location2;
var address1;
var address2;
var latlng;
var geocoder;
var map;
var distance;
// finds the coordinates for the two locations and calls the showMap() function
function initialize() {
geocoder = new google.maps.Geocoder(); // creating a new geocode object
// getting the two address values
address1 = document.getElementById("address1").value;
address2 = document.getElementById("address2").value;
// finding out the coordinates
if (geocoder) {
geocoder.geocode({ 'address': address1 }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//location of first address (latitude + longitude)
location1 = results[0].geometry.location;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
geocoder.geocode({ 'address': address2 }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//location of second address (latitude + longitude)
location2 = results[0].geometry.location;
// calling the showMap() function to create and show the map
showMap();
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
// creates and shows the map
function showMap() {
// center of the map (compute the mean value between the two locations)
latlng = new google.maps.LatLng((location1.lat() + location2.lat()) / 2, (location1.lng() + location2.lng()) / 2);
// set map options
// set zoom level
// set center
// map type
var mapOptions =
{
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
// create a new map object
// set the div id where it will be shown
// set the map options
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// show route between the points
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
origin: location1,
destination: location2,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distance = "The distance between the two points on the chosen route is: " + response.routes[0].legs[0].distance.text;
distance += "<br/>The aproximative driving time is: " + response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
}
});
// show a line between the two points
var line = new google.maps.Polyline({
map: map,
path: [location1, location2],
strokeWeight: 7,
strokeOpacity: 0.8,
strokeColor: "#FFAA00"
});
// create the markers for the two locations
var marker1 = new google.maps.Marker({
draggable: true,
map: map,
position: location1,
title: "First location"
});
var marker2 = new google.maps.Marker({
draggable: true,
map: map,
position: location2,
title: "Second location"
});
// create the text to be shown in the infowindows
var text1 = '<div id="content">' +
'<h1 id="firstHeading">First location</h1>' +
'<div id="bodyContent">' +
'<p>Coordinates: ' + location1 + '</p>' +
'<p>Address: ' + address1 + '</p>' +
'</div>' +
'</div>';
var text2 = '<div id="content">' +
'<h1 id="firstHeading">Second location</h1>' +
'<div id="bodyContent">' +
'<p>Coordinates: ' + location2 + '</p>' +
'<p>Address: ' + address2 + '</p>' +
'</div>' +
'</div>';
// create info boxes for the two markers
var infowindow1 = new google.maps.InfoWindow({
content: text1
});
var infowindow2 = new google.maps.InfoWindow({
content: text2
});
// add action events so the info windows will be shown when the marker is clicked
google.maps.event.addListener(marker1, 'click', function () {
infowindow1.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function () {
infowindow2.open(map, marker1);
});
// compute distance between the two points
var R = 6371;
var dLat = toRad(location2.lat() - location1.lat());
var dLon = toRad(location2.lng() - location1.lng());
var dLat1 = toRad(location1.lat());
var dLat2 = toRad(location2.lat());
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(dLat1) * Math.cos(dLat1) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
document.getElementById("distance_direct").innerHTML = "<br/>The distance between the two points (in a straight line) is: " + d;
}
function toRad(deg) {
return deg * Math.PI / 180;
}
</script>
<script type="text/javascript">
function addmoredestinations() {
document.getElementById()
}
</script>
Create Trip
<div style="height:500px; display:block;">
<div id="form" style="width:100%; height:20%">
<table align="center" valign="center">
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="7" align="center"><b>Add start and destination</b></td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr>
<td>First address:</td>
<td> </td>
<td><input type="text" name="address1" id="address1" size="50"/></td>
<td> </td>
<td>Second address:</td>
<td> </td>
<td><input type="text" name="address2" id="address2" size="50"/></td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr>
<td colspan="7" align="center"><input type="button" value="Show" onclick="initialize();"/></td>
</tr>
</table>
</div>
<div id="map_canvas" style="width:100%; height:300px;margin-left:0px;margin-top:25px;float:left"></div>
<div id="distance_direct" style="margin-left:100px;float:left"></div>
<div id="distance_road" style="margin-left:100px;float:left"></div>
</div>
Thanks in advance to help me.
pls give me help to sort out this problem
and this code i ran in DNN 6.02 version.
thnx