Click here to Skip to main content
15,849,328 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
Hi everyone,

I am making a web application in, 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.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 : ' + + '<br>LONGITUDE : ' + data.lng +
              , marker);
                })(marker, data);
            var flightPath = new google.maps.Polyline({
                path: mypath,
                strokeColor: "red",
                strokeOpacity: 0.8,
                strokeWeight: 6

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..!!");
      called the same function as above.

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

1 solution

Hello Sam,

There is inbuilt functionality of the Map for searchbox. Please visit following link

Places search box

Autocomplete for Addresses and Search Terms
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900