jajack007 0 Newbie Poster

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">&nbsp;</td>
            </tr>
            <tr>
                <td>First address:</td>
                <td>&nbsp;</td>
                <td><input type="text" name="address1" id="address1" size="50"/></td>
                <td>&nbsp;</td>
                <td>Second address:</td>
                <td>&nbsp;</td>
                <td><input type="text" name="address2" id="address2" size="50"/></td>
            </tr>
            <tr>
                <td colspan="7">&nbsp;</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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.