Using google map javascript in ASP.NET

See more:

ASP.NET

Google

mapping

Hi everyone,

I am making a web application in asp.net, in which i have to use Google Map Javascript API V3 for showing google maps in my application. I have done some research and was able to display a google map in my application with marker(connecting to SQL Server and getting co-ordinates). I have used this code to show up the map in first instance which displays polylines and markes

function initialize() 
        {
            var latlng = new google.maps.LatLng(21.95, 78.631217, 121.992188);
            var myOptions = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
                streetViewControl: true
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            
            var markers = JSON.parse('<%=onLoad()%>');
            
            var markerOptions = {center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 11};
            
            var mypath = new Array();
            
            var infoWindow = new google.maps.InfoWindow();
            
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    removed: myLatlng,
                    map: map,
                    icon: 'icon122.png',
                    title: data.rmk
                });
                
                (function (marker, data) {
                    // Attaching a click event to the current marker
                    google.maps.event.addListener(marker, "click", function (e) {
                    var removedString = '<div id="removed" style="margin-removed15px; margin-removed3px;overflow:hidden; width:200px; height:100px;">' +
                                '<div id="bodyContent"><font style="color:darkblue;font:15px  tahoma;margin-removed5px;">' +
                                data.rmk +
                                '</font><br><br><div style="font:12px verdana;color:darkgreen; margin-removed5px;">' +
                                'LATITUDE : ' + data.lat + '<br>LONGITUDE : ' + data.lng +
                                '</div></div></div>';
                        infoWindow.setContent(contentString);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                mypath.push(myLatlng);
            }
            
            var flightPath = new google.maps.Polyline({
                path: mypath,
                strokeColor: "red",
                strokeOpacity: 0.8,
                strokeWeight: 6
            });
            flightPath.setMap(map);
}

But, next thing i want to do is that i have text box and a button in which i want to enter some search criteria like "g.p to fetch results from SQL Server and show markers"

now, their are few problems which i am facing i have called the same function as above in my search function just to check whether it functions properly or not. This function gets execute in search function as well, but, my map is not being displayed. i have used this code in my search function

function test(field)
{
   if (field.value == '') 
   {
      alert("Search string can not be blank..!!");
   }
   else
   {
      called the same function as above.
   }
}

can any one tell me what might be wrong with my code.??