How to implement Google Mapping with Get Direction and distance from one location to another location in Asp.net using JavaScript || Google Map Searching with Get Direction in Web Application Asp.net using JavaScript with GoogleAPI.

The following  article is shows about how to use Google maps with direction and distance in Asp.net application.

For that first I am taking two textboxes to enter From location and for To location ,one GetDirection button and one division to display map.

The following steps show the complete information:

1.       Open Visual StudioàFileàNewàASP.Net Empty WebsiteàGive the name as GooglemappingwithDirectionàOK

2.       Add one webpage to the solutions and give the name as GooglemapsDirection.aspx

3.       Design the form like the following:

4.       Write the following code in GooglemapsDirection.aspx source page using JavaScript.

   <form id="form1" runat="server">

    <div>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script language="javascript" type="text/javascript">

    var directionsDisplay;

    var directionsService = new google.maps.DirectionsService();

    function InitializeMap() {

        directionsDisplay = new google.maps.DirectionsRenderer();

        var latlng = new google.maps.LatLng(17.425503, 78.47497);

        var myOptions =

        {

            zoom: 13,

            center: latlng,

            mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("Gmap"), myOptions);

        directionsDisplay.setMap(map);

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

        var control = document.getElementById('control');

        control.style.display = 'block';

    }

    function calcRoute() {

        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 btnDirections_onclick() {

        calcRoute();

    }

    window.onload = InitializeMap;

    </script>

   

<table id ="control">

<tr>

<td class="style1">

<table>

<tr>

<td>From:</td>

<td>

    <input id="startvalue" type="text" style="width: 305px" /></td>

</tr>

<tr>

<td>To:</td>

<td><input id="endvalue" type="text" style="width: 301px" /></td>

</tr>

<tr>

<td align ="right">

    <input id="btnDirections" type="button" value="GetDirections"

        onclick="return btnDirections_onclick()" /></td>

</tr>

</table>

</td>

</tr>

<tr>

<td valign ="top">

<div id ="directionpanel"  style="height: 390px;overflow: auto" ></div>

</td>

<td valign ="top">

<div id ="Gmap" style="height: 390px; width: 489px"></div>

</td>

</tr>

</table>

    </div>

    </form>

Then build the application and run it , no need to write any code in GooglemapsDirection.aspx.cs file.

Then you will get output like the following:

For Example if you enter Hyderabad in From textbox ,Mumbai in To textbox and click Find button then you will get the following output with Hyderabad to Mumbai direction and Distance:

Thank you….

How to implement Google Mapping with search keyword in Asp.net using JavaScript || Google Map Searching in Web Application Asp.net using JavaScript with GoogleAPI.

The following  article is shows about how to use Google maps in our Asp.net application.

For that first I am taking one textbox to enter search text ,one Find button and one division to display map.

The following steps show the complete information:

1.       Open Visual StudioàFileàNewàASP.Net Empty WebsiteàGive the name as GooglemappingàOK

2.       Add one webpage to the solutions and give the name as Googlemaps.aspx

3.       Design the form like the following:

4.       Write the following code in Googlemaps.aspx source page using JavaScript.

  <form id="form1" runat="server">

    <div>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script language="javascript" type="text/javascript">

    var map;

    var geocoder;

    function InitializeMap() {

        var latlng = new google.maps.LatLng(17.425503, 78.47497);

        var myOptions =

        {

            zoom: 13,

            center: latlng,

            mapTypeId: google.maps.MapTypeId.ROADMAP,

            disableDefaultUI: true

        };

        map = new google.maps.Map(document.getElementById("map"), myOptions);

    }

    function FindLocaiton() {

        geocoder = new google.maps.Geocoder();

        InitializeMap();

        var address = document.getElementById("addressinput").value;

        geocoder.geocode({ 'address': address }, function (results, status) {

            if (status == google.maps.GeocoderStatus.OK) {

                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({

                    map: map,

                    position: results[0].geometry.location

                });

            }

            else {

                alert("Geocode was not successful for the following reason: " + status);

            }

        });

    }

    function Button1_onclick() {

        FindLocaiton();

    }

    window.onload = InitializeMap;

</script>

<h2>Google Map Search  </h2>

<table>

<tr>

<td>

    <input id="addressinput" type="text" style="width: 447px" />  

</td>

<td>

    <input id="Button1" type="button" value="Find" onclick="return Button1_onclick()" /><br />

    </td>

</tr>

<tr>

<td colspan ="2">

<div id ="map" style="height: 390px; width: 489px" > </div>

</td>

</tr>

</table>

    </div>

    </form>

Then build the application and run it , no need to write any code in Googlemaps.aspx.cs file.

Then you will get output like the following:

For Example if you enter Hyderabad in textbox , click Find button then you will get the following output with Hyderabad location:

Thank you….

Javascript Key Codes for Keyboard Characters || javascript function for clicking enter key on keyboard

When we use keyboard keys in your JavaScript function then the following codes will be useful to write condition statement in your function.

For Example:

We have one textbox and button for login for that you type your username in textbox then instead of clicking Login button if you click on enter key in your keyboard then it has to be login.

For  that the following function will work in onkeypress event.

The enter key value is 13.

<input type="text" id="txtSearch" onkeypress="searchKeyPress(event);" />
    <input type="button" id="btnSearch" Value="Search" onclick="anyfunction();" />

    <script>
    function searchKeyPress(e)
    {

        if (typeof e == 'undefined' && window.event) { e = window.event; }
        if (e.keyCode == 13)
        {
            document.getElementById('btnSearch').click();
        }
    }
    </script>

The following are Java script   Key Codes for Keyboard Characters :

backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	27
page up	33
page down	34
end	35
home	36
left arrow	37
up arrow	38
right arrow	39
down arrow	40
insert	45
delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
T	84
U	85
V	86
W	87
X	88
y	89
z	90
Left window key	91
Right window key	92
Select key	93
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103
numpad 8	104
numpad 9	105
multiply	106
add	107
subtract	109
decimal point	110
divide	111
f1	112
f2	113
f3	114
f4	115
f5	116
f6	117
f7	118
f8	119
f9	120
f10	121
f11	122
f12	123
num lock	144
scroll lock	145
semi-colon	186
equal sign	187
comma	188
dash	189
period	190
forward slash	191
grave accent	192
open bracket	219
back slash	220
close braket	221
single quote	222