Thursday, 29 August 2013

Google map usercontrol

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="googlemapad1tower.ascx.cs" Inherits="Usercontrol_googlemapad1tower" %>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script language="javascript" type="text/javascript">
        var count = 0;
        var map;
        var geocoder;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

        var count = 0;
        var map;
        var geocoder;
        function InitializeMap() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var latlng = new google.maps.LatLng(21.7679, 78.8718);
            var myOptions =
        {
            zoom: 4,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
            map = new google.maps.Map(document.getElementById("map"), myOptions);

            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('directionpanel'));

            //            var control = document.getElementById('control');
            //            control.style.display = 'block';

        }
        function InitializeMap2(lat, lng) {

            var latlng = new google.maps.LatLng(21.7679, 78.8718);
            //var latlng = new google.maps.LatLng(lat, lng);
            var myOptions =
        {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
        }
        function FindLocaiton(lat, lng, address) {
            geocoder = new google.maps.Geocoder();
            InitializeMap2();
            var latlng = new google.maps.LatLng(lat, lng);
            map.setCenter(latlng);

            var marker = new google.maps.Marker({
                map: map,
                position: latlng
            });

            var infowindow = new google.maps.InfoWindow({
                content: address
            });

            //google.maps.event.addListener(marker, 'click', function () {
            // Calling the open method of the infoWindow
            infowindow.open(map, marker);
            // });
            return false;

        }
        //  window.onload = InitializeMap;

        function calcRoute(start, end) {

            //var start = document.getElementById('startvalue').value;
            //var end = document.getElementById('endvalue').value;
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

        }


        function Button1_onclick() {
            calcRoute();
        }


        function markicons() {

            InitializeMap();

            var ltlng = [];
            var te = "";
            var ve = "";
            var radioButtons = document.getElementsByName("<%=rdqlist1.ClientID %>");
            var radioButtons2 = document.getElementsByName("<%=rdqlist2.ClientID %>");

            for (var x = 0; x < radioButtons.length; x++) {

                checked = radioButtons[x].value;
                checked1 = radioButtons[x].parentNode.childNodes[1].innerHTML;
                te = te + ' ' + checked;
                ve = ve + ' ' + checked1;
                ltlng.push(new google.maps.LatLng(checked1, checked));
                // ltlng.push(new google.maps.LatLng(13.154376055418528, 77.431640625));

            }
            // ltlng.push(new google.maps.LatLng(21.7679, 78.8718));

            map.setCenter(ltlng[0]);
            for (var i = 0; i <= ltlng.length; i++) {
                marker = new google.maps.Marker({
                    map: map,
                    position: ltlng[i]
                });

                (function (i, marker) {

                    google.maps.event.addListener(marker, 'click', function () {


                        infowindow = new google.maps.InfoWindow();


                        infowindow.setContent("Address:- " + radioButtons2[i].value);

                        infowindow.open(map, marker);

                    });

                })(i, marker);

            }

        }
    </script>
     <div style="display: none;">
        <asp:RadioButtonList ID="rdqlist1" runat="server">
            <asp:ListItem Text="21.7679" Value="78.8718"></asp:ListItem>
            <asp:ListItem Text="19.72534224805787" Value="73.212890625"></asp:ListItem>
            <asp:ListItem Text="17.392579271057766" Value="78.310546875"></asp:ListItem>
            <asp:ListItem Text="13.154376055418528" Value="77.431640625"></asp:ListItem>
        </asp:RadioButtonList>
        <asp:RadioButtonList ID="rdqlist2" runat="server">
        </asp:RadioButtonList>
    </div>
    <div>
        <div style="float: left;">
        </div>
        <div style="float: left;">
            <table>
                <tr>
                    <td style="width: 353px">
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="map" style="height: 353px">
                        </div>
                    </td>
                </tr>
            </table>
           
        </div>
    </div>

No comments:

Post a Comment