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….