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

The following  article is shows about how to use Google maps in our 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">
    <script type="text/javascript" src=""></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();

        var address = document.getElementById("addressinput").value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                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() {

    window.onload = InitializeMap;


<h2>Google Map Search  </h2>
    <input id="addressinput" type="text" style="width: 447px" />  
    <input id="Button1" type="button" value="Find" onclick="return Button1_onclick()" /><br />
<td colspan ="2">
<div id ="map" style="height: 390px; width: 489px" > </div>

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

1 comment: